HTML5 uses the audio and video elements to embed audio and video content. It allows browsers that support HTML5 to play video and audio without installing any plug-ins.

In addition, JavaScript APIs related to these two tags are provided, so that we can create our own audio and video controls:

<!-- 嵌入视频 -->
<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>

Both of these two tags must include src attribute, which is the address of the media file to be loaded. The width and height attributes specify the size of the video player. The poster attribute is an image that will be displayed while the video is loading. Content between the opening and closing tags is fallback content, meaning it is displayed if the browser does not support these two tags. Because not all browsers support all media formats, different media sources can be specified. The `` tag will be used at this time:

<!-- 嵌入视频 -->
<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>

The browsers that support these two tags are: IE9, Firefox 3.5, Safari 4, Opera 10.5, Chrome, iOS version of Safari and Android version of Webkit.

1 Attributes

The audio and video elements have these common attributes:

2 事件

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

之所以定义了这么多的事件，就是为了开发人员能够只使用少量的 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\"")){
  ...
}

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

5 Audio 类型

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

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

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

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

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

相关推荐：

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

The above is the detailed content of How to embed audio and video in HTML5. For more information, please follow other related articles on the PHP Chinese website!