微信扫一扫打赏支持

html5--4-2 video元素的属性

html5--4-2 video元素的属性

 

学习要点

  • 掌握video元素的基本用法

直到现在,在网页中的大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法，这样播放视频就不必依赖外部插件

在本套课程中我们不会讲解音/视频的的发展史和编码解码的相关知识，有兴趣的朋友可以去查阅相关资料。我们重点学习video和audio两个元素的使用。

目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同，但是这个支持是动态变化的。

当前，video 元素支持三种视频格式： 

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

　　　　　　支持的浏览器有：Firefox、Opera、Chrome

  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

　　　　　　支持的浏览器有：IE9+、Chrome、Safari

　　　　　　虽然目前应用较广，单有专利保护，是收费在

  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

　　　　　　支持的浏览器有：Chrome、Opera、Safari

　　　　　　专门为网页传播而设计在，清晰度高，压缩率也很高，并且开源免费，未来可能会成为主流。目前国外大在视频网站很多采用


video元素的属性

属性属性值描述
src url 要播放的视频的 URL地址。
width 正整数/百分比 设置视频播放器的宽度。
height 正整数/百分比 设置视频播放器的高度。
poster URL 视频播放前的预览图片
autoplay 空值/autoplay 视频在就绪后自动播放。一般不设置该属性。
loop 空值/loop 循环播放。
preload auto/none/metadata 视频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可。
control 空值/controls 向用户显示控件，比如播放按钮

 

 

 实例

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <video src="res/video.mp4" controls="" width="500px" height="300px" poster="res/秦.jpg" loop="">
 9         你的浏览器暂不支持HTML5的vedio元素！
10     </video><br><br>
11     <video src="res/video.webm" controls="">
12         你的浏览器暂不支持HTML5的vedio元素！
13     </video>
14 </body>
15 </html>
View Code

 

posted @ 2017-12-04 12:39  范仁义  阅读(462)  评论(0)  编辑  收藏  举报