HTML5使用audio和video元素来嵌入音频和视频内容。可以让支持HTML5的浏览器不需要安装任何插件就可以播放视频和音频。 另外还提供了与这两个标签相关的 JavaScript API，这样就可以创建我
另外还提供了与这两个标签相关的 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>这两个标签，都必须包含 src 属性，即要加载的媒体文件地址。width 和 height 属性是指定视频播放器的大小。poster 属性是在加载视频期间会显示的图像。位于开始和结束标签之间的内容是后备内容，即当浏览器不支持这两个标签时会显示这些内容。 因为不是所有的浏览器都支持所有的媒体格式，所以可以指定不同的媒体来源。这时会用到 `` 标签：
<!-- 嵌入视频 -->
<video id="player">
<source src="xx.webm" type="video/webm; codecs='vp8, vorbis'">
<source src="xx.ogv" type="video/ogg; codecs='theora, vorbis'">
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>支持这两个标签的浏览器有这些：IE9+、Firefox 3.5+、Safari 4+、Opera 10.5+、Chrome、iOS 版的 Safari 和 Android 版的 Webkit。
1 属性
audio 和 video 元素有这些共有的属性：
2 事件
audio 和 video 元素有这些共有的事件：
之所以定义了这么多的事件，就是为了开发人员能够只使用少量的 HTML 和 JavaScript 就可以编写出自定义的音、视频播放器！
3 自定义媒体播放器
<p class="mediaplayer">
<p class="video">
<video id="player"
src="http://img.558idc.com/uploadfile/allimg/html5-1/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 视频嵌入实例代码
以上就是HTML5嵌入音频和视频的方法的详细内容，更多请关注自由互联其它相关文章！