このスクリプトを使用すると、要素のPlayイベントでアクションをトリガーし<video>
て(この場合)の背景色を変更div
できますが、同じメソッドを使用して1つ以上の要素のクラスなどを調整(または不透明度を適用)できます。中間層へ)。サンプルはイベントをオフにするので、それは1回限りのことですが、再生、一時停止、終了、エラーなどをトラップするイベントを追加すると、動作をかなりきめ細かく制御できます。
<!DOCTYPE HTML>
<html>
<body style="background-color: white">
<div id="dimMe" style="background-color:blue">
<video id="video" autobuffer controls muted width=240 height=200>
<source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v">
</source>
</video>
</div>
<script>
document.getElementById("video").addEventListener('play', dimBack, false);
function dimBack() {
this.removeEventListener('play', dimBack, false);
document.getElementById("dimMe").style.backgroundColor="green";
}
</script>
</body>
</html>