使用Video 元素。
<video controls width="500px" id="vid">
<source src="vid.mp4" />
</video>
图示
可以观察到的是video 标签中包含
controls,添加该标签可以使得播放器工具栏可见。Control bar 和我们平常所见到的一样，非常简单，包含暂停，播放按钮、进度条、最大化、下载，当然了，如果浏览器不同，显示的会不同。
注意：
- 要确保video 和html 文件存放到同一目录下。如果想放置在不同的目录下，需要设置src 属性。
- HTML5 Video 元素只支持Ogg、MPEG 4、WebM三种格式的视频。
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
使用js控制Video 元素
设置video 资源src属性。以下不使用controls 属性来设置，使用js代码来实现。
<video width="500px" id="vid">
<source src="vid.mp4" />
</video>
添加play，end 按钮。
<input type="button" name="name" value="Play" id="BtnPlay" />
<input type="button" name="name" value="End" id="btnEnd" />
创建JS 函数来控制Video播放和暂停。
function PlayOrPause() {
var v = document.getElementById('vid');
if (v.paused || v.ended) {
v.play();
document.getElementById('BtnPlay').value = "Pause";
}
else {
v.pause();
document.getElementById('BtnPlay').value = "Play";
}
}
设置当视频播放完成之后停止播放：
function End() {
var v = document.getElementById('vid');
v.pause();
v.currentTime = v.duration;
document.getElementById('BtnPlay').value = "Play";
}
video.png
Audio 元素
HTML5使得在页面中加载音频元素变得非常简单。
<audio id="audctrl" controls>
<source src="aud.mp3" type="audio/mp3" />
</audio>
audio元素
同样可以使用js控制audio 元素，就像控制video元素一样。
