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

HTMLタグ完全ガイド

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

playbackまたはstreamingがメディアの終わりに達した場合またはもっともっと多くのデータが利用できない場合、endedイベントが発生します。

オンライン例

オーディオ再生が完了すると、ポップアップメッセージが表示されます:

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　オーディオ/video　ended　イベントの使用-基本チュートリアル(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.onended　=　function()　
{
　　　　alert("オーディオが再生完了しました");
};
</script>
</body>
</html>

テストを試してみる ‹/›

定義と使用方法

オーディオが/ビデオが終わりに達すると、endイベントが発生します。
「お聴きいただきありがとうございます」「お見逃しなく」などのメッセージには非常に役立ちます。

ブラウザの互換性

IEFirefoxOperaChromeSafari

文法

HTMLで：

<audio|video onended="myScript">テストしてください

JavaScriptで：

audio|video.onended=function(){myScript};テストしてください

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

audio|video.addEventListener("ended", myScript);テストしてください

注意： Internet Explorer 8 およびもっと古いIEバージョンのブラウザではサポートされていません addEventListener() 方法。

技術的詳細

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

オンライン例

ビデオ再生が完了すると、ポップアップメッセージが表示されます：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　オーディオ/video　ended　イベントの使用-基本チュートリアル(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.onended　=　function()　
{
　　　　alert("ビデオが再生完了しました");
};
</script>
</body>
</html>

テストを試してみる ‹/›

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

HTML: <template> タグ