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

HTML タグ一覧

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

play イベントは再生開始時にトリガーされます。

オンライン例

ビデオが再生開始すると、ポップアップメッセージが表示されます:

例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML オーディオ/ビデオ onplay イベントの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<p>再生ボタンを押してください。</p>
<video　id="myVideo"　width="320"　height="176"　controls>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
　　あなたのブラウザはHTMLをサポートしていません5　video　タグ。
</video>
<script>
var　vid　=　document.getElementById("myVideo");
vid.onplay　=　function()　
{
　　　　alert("ビデオが再生開始しました");
};
</script>　
</body>
</html>

テストをしてみる ‹/›

定義と使用法

play イベントがオーディオ/ビデオ(audio/ビデオ(audio) 再生開始時にトリガーされます。

ヒント： 　pause イベントがオーディオ/ビデオ(audio/ビデオ(audio) 暫停再生時にトリガーされます。

ブラウザの互換性

IEFirefoxOperaChromeSafari

文法

HTML では：

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

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

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

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

技術的詳細

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

オンライン例

オーディオが再生開始すると、ポップアップメッセージが表示されます：

例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML オーディオ/ビデオ play イベントの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<p>再生ボタンを押してください。</p>
<audio　id="myAudio"　controls>
　　<source　src="horse.ogg"　type="audio/ogg">
　　<source　src="horse.mp3"　type="audio/mpeg">
　　あなたのブラウザは audio 要素をサポートしていません。
</audio>
<script>
var　aud　=　document.getElementById("myAudio");
aud.onplay　=　function()　
{
　　　　alert("オーディオが再生開始");
};
</script>
</body>
</html>

テストをしてみる ‹/›

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

HTML: <template> タグ