HTML5にオーディオとビデオを埋め込む方法

HTML5 は、audio 要素と video 要素を使用して、オーディオ コンテンツとビデオ コンテンツを埋め込みます。これにより、HTML5 をサポートするブラウザーで、プラグインをインストールせずにビデオとオーディオを再生できるようになります。

さらに、これら 2 つのタグに関連する JavaScript API が提供されているため、独自のオーディオおよびビデオ コントロールを作成できます:

<!-- 嵌入视频 -->
<video id="player"
       src="xxx.ogg"
       poster="mymovie.jpg"
       width="300" height="200">
    Video player not available.
</video>

<!-- 嵌入音频 -->
<audio src="xxx.mp3" id="myAudio">Audio player not available.</audio>

これら 2 つのタグには両方とも、メディア ファイルのアドレスである src 属性が含まれている必要があります。ロードされます。 width 属性と height 属性はビデオプレーヤーのサイズを指定します。ポスター属性は、ビデオの読み込み中に表示される画像です。開始タグと終了タグの間のコンテンツはフォールバック コンテンツです。つまり、ブラウザがこれら 2 つのタグをサポートしていない場合に表示されます。 すべてのブラウザがすべてのメディア形式をサポートしているわけではないため、さまざまなメディア ソースを指定できます。このとき `` タグが使用されます:

<!-- 嵌入视频 -->
<video id="player">
    <source src="xx.webm" type="video/webm; codecs=&#39;vp8, vorbis&#39;">
    <source src="xx.ogv" type="video/ogg; codecs=&#39;theora, vorbis&#39;">
    Video player not available.
</video>

<!-- 嵌入音频 -->
<audio id="myAudio">
     <source src="xx.ogg" type="audio/ogg">
     <source src="xx.mp3" type="audio/mpeg">
Audio player not available.</audio>

これら 2 つのタグをサポートするブラウザは次のとおりです: IE9 以降、Firefox 3.5 以降、Safari 4 以降、Opera 10.5 以降、Chrome、iOS バージョンの Safari、および Android バージョンの Webkit。

1 属性

オーディオ要素とビデオ要素には、次の共通の属性があります:

属性	データ型	手順
自動再生	ブール値	自動再生フラグを取得または設定します。
バッファリング	期間	ダウンロードされたバッファリングされた時間範囲オブジェクト。
bufferedBytes	バイト範囲	ダウンロードされたバッファリングされたバイト範囲オブジェクト。
バッファリングレート	整数	ダウンロード速度、1秒あたりに受信される平均ビット数。
バッファリングスロットル	ブール値	バッファリングをスロットルするかどうか。
コントロール	ブール値	ブラウザの組み込みコントロールの表示と非表示を制御するためのcontrols属性を取得または設定します。
現在のループ	整数	メディア ファイルがループされた回数。
現在のソース	文字列	現在再生中のメディア ファイルの URL。
現在時刻	浮動小数点数	再生された秒数。
デフォルトの再生レート	浮動小数点数	再生速度を取得または設定します。デフォルトは 1 秒です。
期間	浮動小数点数	合計再生時間、単位は秒です。
終了しました	ブール値	再生が終了したかどうか。
ループ	ブール値	[終了後に最初から再生を再開するかどうか]を取得または設定します。
ミュート	ブール値	[サウンドをミラーリングするかどうか]を取得または設定します。
ネットワーク状態	整数	ネットワーク接続ステータス; 0: 空; 1: ロード中; 3: 最初のフレームがロードされました; 4: ロードが完了しました。
一時停止中	ブール値	一時停止するかどうか。
再生レート	浮動小数点数	[現在の再生速度]を取得または設定します。
プレイしました	期間	現在の再生時間。
準備完了状態	整数	準備はできましたか？ 1: データが利用できない; 1: 現在のフレームを表示できる; 2: 再生を開始できる; 3: 最初から最後まで再生できる。
シーク可能	期間	検索できる時間範囲。
求めています	ブール値	プレーヤーがメディア ファイルの新しい場所に移動しているかどうか。
ソース	文字列	メディア ファイルのソース、このソースはいつでも書き換えることができます。
スタート	浮動小数点数	[再生開始位置]を取得または設定します。単位は秒です。
合計バイト数	整数	現在のリソースに必要な合計バイト数。
ビデオの高さ	整数	ビデオの高さ。ビデオにのみ適用されます。
ビデオ幅	整数	ビデオの幅。ビデオにのみ適用されます。
ボリューム	浮動小数点数	[現在の音量]を0.0から1.0まで取得または設定します。

2 事件

audio 和 video 元素有这些共有的事件：

事件	说明
abort	下载中断。
canplay	可以播放；readyState 为 2。
canplaythrough	播放可以继续，即不会被中断；readyState 为 3。
canshowcurrentframe	当前帧已下载；readyState 为 1。
dataunavailable	没有数据导致不能播放；readyState 为 0。
durationchange	改变了 duration 的值。
emptied	网络连接关闭。
empty	发生错误导致下载停止。
ended	已播放到末尾，所以播放停止。
error	下载期发生网络错误。
load	已加载完成。可能会被废弃，建议使用 canplaythrough。
loadeddata	媒体的第一帧已加载。
loadedmetadata	媒体的元数据已加载。
loadstart	下载已开始。
pause	播放已被暂停。
play	媒体已接受到开始播放的指令。
playing	媒体已开始播放。
progress	正在下载。
ratechange	改变了播放速度。
seeked	搜索结束。
stalled	浏览器正尝试下载，但未接收到数据。
timeupdate	currentTime 被非法更新。
volumechange	改变了 volume 或 muted 值。
waiting	播放暂停，等待下载更多的数据。

---

之所以定义了这么多的事件，就是为了开发人员能够只使用少量的 HTML 和 JavaScript 就可以编写出自定义的音、视频播放器！

3 自定义媒体播放器

 <p class="mediaplayer">
    <p class="video">
        <video id="player"
               src="http://people.mozilla.com/~prouget/demos/resources/videos/billyBrowsers.ogg"
               poster="mymovie.jpg"
               width="300" height="200">
            Video player not available.
        </video>
    </p>
    <p class="controls">
        <input type="button" value="Play" id="video-btn">
        <span id="curtime">0</span><span id="duration">0</span>
    </p>
</p>

现在我们加一些 JavaScript ，就可以自定义一个简单的视频播放器：

//取得元素引用
var player = document.getElementById("player"),
        btn = document.getElementById("video-btn"),
        curtime = document.getElementById("curtime"),
        duration = document.getElementById("duration");//实测，得不到整个视频的总体播放时间

//更新播放时间
duration.innerHTML = player.duration;

//为按钮添加事件处理程序
EventUtil.addHandler(btn, "click", function (event) {
    if (player.paused) {
        player.play();
        btn.value = "Pause";
    } else {
        player.pause();
        btn.value = "Play";
    }
});

//定时更新当前时间
setInterval(function () {
    curtime.innerHTML = player.currentTime;
}, 250);

可以进一步扩展这个视频播放器，让它可以使用更多的属性，监听更多的事件。同样的代码也可以用于 audio 元素。

4 检测编解码器的支持情况

audio 和 video 元素都有一个 canPlayType() 方法，它接收一个格式/编解码器的字符串，返回 “probably”、”maybe”、”“，所以这样这样使用：

if (audio.canPlayType("audio/mpeg")){
      ...
  }

因为真正决定文件是否能够播放的是编码格式，所以建议同时传入 MIME 类型和编解码器，这样检测会更准确：

if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
  ...
}

注意，编解码器必须使用引号！下面列出已得到支持的音/视频格式和编解码器：

音频	字符串	支持的浏览器
AAC	audio/mp4; codecs=”mp4a.40.2”	IE9+、Safari4+、iOS 版的 Safari
MP3	audio/mpeg	IE9+、Chrome
Vorbis	audio/ogg; codecs=”vorbis”	Firefox 3.5+、Chrome、Opera 10.5+
WAV	audio/wav; codecs=”1”	Firefox 3.5+、Chrome、Opera 10.5+

---

视频	字符串	支持的浏览器
H.264	video/mp4; codecs=”avcl.42E01E, mp4a.40.2”	IE9+、Safari4+、iOS 版的 Safari、Android 版 WebKit
Theora	video/ogg; codecs=”theora”	Firefox 3.5+、Chrome、Opera 10.5+
WebM	video/webm; codecs=”vp8, vorbis”	Firefox 4+、Chrome、Opera 10.6+

---

5 Audio 类型

audio 元素有一个原始的 JavaScript 构造函数 Audio，可以利用它来控制什么时候播放音频：

 var audio = new Audio("xxx.mp3");
 EventUtils.addHandler(audio, "canplaythrough", function(event){
     audio.play();
 });

上面的代码实现了这样的功能：当下载完成后自动播放音频。

在 iOS 中，调用 play() 会弹出一个对话框，得到用户许可后才可以播放。

如果想要在一个音频播放完之后在播放另一个音频，可以在 onfinish 事件中调用 play() 方法。

相关推荐：

分享一个简单的HTML5 视频嵌入实例代码

以上がHTML5にオーディオとビデオを埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。