近年来,网络视频和音频变得越来越流行,YouTube,Viddler等网站的视频服务使人更容易发布视频和音频。然而,由于 HTML目前缺乏必要手段成功地嵌入和控制多媒体本身,许多网站都依赖Flash提供该功能。虽然可以嵌入多媒体使用各种插件(如QuickTime,Windows媒体等等),Flash是目前唯一被广泛部署插件,它为开发人员提供了一个跨浏览器兼容的解决方案。
HTML5的video和 audio元素使视频播放控制更容易，大部分的api两个元素之间共享。
当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
HTML5的视频播放，最简单的方法是使用嵌入视频 video元素
<video src="mov.mp4" controls="controls"> </video>
controls属性供添加播放、暂停和音量、全屏控制控件。
再加上宽度和高度属性width=”300″ height=”240″ 和autoplay属性，视频在就绪后马上播放。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5视频教程</title> </head> <body><video src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls width="300" height="240" autoplay> </video> </body> </html>
html5中视频控制属性：
| Autoplay | Autoplay | 如果指定，视频会在准备好(如已取得可播放视频)后自动播放. |
| Controls | Controls | 添加播放控制及音量控制功能栏. |
| Height | Pixels | 指定播放器的高度，以pixel为单位. |
| Loop | Loop | 如果指定，视频将重复播放. |
| Poster | url | 指定视频的预览图. |
| Preload | Preload | 如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。 |
| Src | url | 目标视频的URL. |
| Width | Pixels | 指定播放器的宽度，以pixel为单位. |
当浏览器不支持video标签时显示提示信息。
<video src="video.mp4"width="320"height="240"autoplay controls loop> 你的浏览器不支持HTML5，太落后了！！ </video>
如果无法确定目标浏览器是否能支持<video>或者你的视频格式，我们可以提供多个格式的视频文件，并给用户友好的提示。如下所示：
<video controls>
<sourcesrc="video1.mp4"/>
<sourcesrc="video1.ogv"/>
<sourcesrc="video1.webm"/>
<p>你的浏览器不支持HTML5 视频</p>
</video>
在上面的代码中我们提供了3种格式视频，浏览器将使用第一个可识别的格式。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3847.html
微信扫一扫 
支付宝扫一扫