直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari
一个源代码例子：
-
<!DOCTYPE html>
-
<html>
-
<body>
-
-
<video width="320" height="240" controls>
-
<source src="movie.mp4" type="video/mp4">
-
<source src="movie.ogg" type="video/ogg">
-
您的浏览器不支持 HTML5 video 标签。
-
</video>
-
-
</body>
-
</html>
同时
标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
当前，
|
浏览器
|
MP4
|
WebM
|
Ogg
|
|
Internet Explorer 9+
|
YES
|
NO
|
NO
|
|
Chrome 6+
|
YES
|
YES
|
YES
|
|
Firefox 3.6+
|
NO
|
YES
|
YES
|
|
Safari 5+
|
YES
|
NO
|
NO
|
|
Opera 10.6+
|
NO
|
YES
|
YES
|
-
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
-
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
-
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
HTML5
其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，
一个源代码例子：
-
<!DOCTYPE html>
-
<html>
-
<body>
-
-
<div style="text-align:center">
-
<button onclick="playPause()">播放/暂停</button>
-
<button onclick="makeBig()">放大</button>
-
<button onclick="makeSmall()">缩小</button>
-
<button onclick="makeNormal()">普通</button>
-
<br>
-
<video id="video1" width="420">
-
<source src="mov_bbb.mp4" type="video/mp4">
-
<source src="mov_bbb.ogg" type="video/ogg">
-
您的浏览器不支持 HTML5 video 标签。
-
</video>
-
</div>
-
-
<script>
-
var myVideo=document.getElementById("video1");
-
-
function playPause()
-
{
-
if (myVideo.paused)
-
myVideo.play();
-
else
-
myVideo.pause();
-
}
-
-
function makeBig()
-
{
-
myVideo.width=560;
-
}
-
-
function makeSmall()
-
{
-
myVideo.width=320;
-
}
-
-
function makeNormal()
-
{
-
myVideo.width=420;
-
}
-
</script>
-
-
</body>
-
</html>
阅读(3481) | 评论(0) | 转发(0) |
