HTML リファレンスマニュアル

HTML タグ一覧

HTML オーディオ/ビデオ DOM ratechange イベント

再生速度を変更した後、ratechangeイベントがトリガーされます。

オンラインサンプル

ビデオの再生速度を変更し、速度の変更を通知する：

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML オーディオ/HTML video onratechangeイベントの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<p>この例では、HTML DOMを使用してvideo要素に"onratechange"イベントを追加しました。playbackRate属性は、ビデオの再生速度を変更するために使用されます。</p>
<video id="myVideo" width="320" height="176" autoplay controls>
　　<source src="mov_bbb.mp4" type="video/mp4">
　　<source src="mov_bbb.ogg" type="video/ogg">
　　あなたのブラウザはHTMLをサポートしていません。5　videoタグ。
</video>
<br>
<button onclick="setPlaySpeed()" type="button">ビデオを低速再生に設定</button>
<script>
//　id="myVideo"の<video>要素を取得します。
var vid = document.getElementById("myVideo");
//　ビデオの再生速度を0に設定します。3　(低速)
function setPlaySpeed()　
{　
　　　　vid.playbackRate = 0.3;
}　
//　ビデオの再生速度が変更されたときに実行されるように、<video>にratechangeイベントを追加します。関数はポップアップテキストメッセージを表示します。
vid.onratechange = function()　
{
　　　　myFunction()
};
function myFunction()　
{
　　　　alert("onratechange イベントがトリガーされました　-　ビデオの再生速度が変更されました");
}
</script>　
</body>
</html>

テストしてみる ‹/›

定義と使用方法

オーディオを変更する際/ビデオの再生速度が変更された場合（例えば、ユーザーがスローモーションやフォワードモードに切り替えた場合）、ratechangeイベントが発生します。
このイベントは「オーディオ」/ビデオオブジェクト”のplaybackRate属性呼び出し、この属性はオーディオ/ビデオの現在の再生速度。

ブラウザの互換性

IEFirefoxOperaChromeSafari

文法

HTML では：

<audio|video onratechange="myScript">試してみてください

JavaScript では：

audio|video.onratechange=function(){myScript};試してみてください

JavaScript では、addEventListener() メソッドを使用して：

audio|video.addEventListener("ratechange", myScript);試してみてください

注意： Internet Explorer 8 およびもっと早い IE 版本ではサポートされていません addEventListener() メソッド。

技術的な詳細

サポートされる HTML タグ:	<audio> と <video>
サポートされる JavaScript オブジェクト:	オーディオ、ビデオ

HTML オーディオ/ビデオ DOM リファレンスマニュアル

HTML: <template> タグ