DOM

：

：

HTMLMediaElement：resize イベント

　編集：2022.11.03 by T.A.

[Edge]。→、、

HTMLMediaElement の縦横の画素構成が更新されたときに発行されます。

mdn： videoWidth プロパティと videoHeight プロパティの一方または両方が更新されたときに発生します。

バブリング ¶なし
キャンセル可能 ¶はい だが動作はないでしょう。
インターフェイス Event
イベント ハンドラー プロパティ ¶onresize
例

HTML： 

<INPUT id=IdWidth type=range min=100 max=300 step=10 value=200><BR>
<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" controls style="width:200px"></VIDEO><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function JobWidth(eve){  //input イベントの処理：
  let D=IdWidth.value;
  IdTest.videoWidth=Number(D);
}
function Job(eve){   //resize イベントの処理：
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●";
}
IdWidth.oninput=JobWidth;  //“入力が変化したら”イベント割り当て。
IdTest.onresize=Job;  //イベント割り当て。

変化しなかった。videoWidth というプロパティは存在するが、更新はできないようだ。しかも画素の値のようだ。

JavaScript： 

IdTest.src="../../Sample/friday.mp4"

↑これを実行して画素数を変えたらイベントが発生した。

得られた内容：D 

＝[object]：[object Event]
isTrusted＝[boolean]：true
type＝[string]：resize
target＝[object]：[object HTMLVideoElement]
currentTarget＝[object]：null
eventPhase＝[number]：0
bubbles＝[boolean]：false
cancelable＝[boolean]：true
defaultPrevented＝[boolean]：false
composed＝[boolean]：false
…

HTML： 

<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" controls></VIDEO><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){   //resize イベントの処理：
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●";
}
IdTest.onresize=Job;  //イベント割り当て。

IdTest.src="../../Sample/Eizou_S.mp4"

得られた内容：D 

＝[object]：[object Event]
isTrusted＝[boolean]：true
type＝[string]：resize
target＝[object]：[object HTMLVideoElement]
currentTarget＝[object]：null
eventPhase＝[number]：0
bubbles＝[boolean]：false
cancelable＝[boolean]：true
defaultPrevented＝[boolean]：false
composed＝[boolean]：false
…
テスト