内容目录
在前面的《html5 Canvas绘制图形入门详解》系列文章中，我们学习了如何使用html5 canvas进行绘图。在html5中，我们不仅可以按照自己的意愿绘制图形，还可以使用html5提供的<video>标签实现视频播放、使用html5提供的<audio>标签实现音频播放。
今天，我们就来初步学习如何使用html5的<video>标签实现视频播放功能。
在html5出现之前，想要在浏览器中实现视频播放功能，就必须使用额外的插件或控件来实现。不过，自从html5问世以后，这样的局面有所改变。现在，我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能，
俗话说“知己知彼，百战百胜”。对于video标签而言，同样也是如此，只有先了解了video标签，使用起来才能得心应手。现在，我们就来看看video标签具备哪些标签属性(如果video标签具有以下属性就表示启用该属性所表示的功能，不添加对应的属性就表示禁用对应的功能)：
| video标签属性 | 基本描述 |
|---|---|
| width | 设置视频播放器的宽度 |
| height | 设置视频播放器的高度 |
| src | 设置用于播放的视频的URL |
| autoplay | 设置视频在加载完毕后自动开始播放。属性值为"autoplay" |
| controls | 显示具备播放、暂停等功能的控件。属性值为"controls" |
| loop | 视频在播放完毕后重新循环播放。属性值为"loop" |
| preload | 指定视频在页面加载时进行加载，并预备播放。属性值为"preload"，如果使用 "autoplay"，则忽略该属性。 |
在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 video视频播放入门示例</title> </head> <body> <!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 --> <video id="myVideo" src="Enola - I Can Make A Mess.mp4" autoplay="autoplay" controls="controls" loop="loop"> 您的浏览器不支持video标签。 </video> </body> </html>
现在，我们打开浏览器，看一看具体的效果：
值得注意的是：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。
为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 video视频播放入门示例</title> </head> <body> <!-- 具备自动播放、显示用户控件、播放完毕后循环播放功能的video标签 --> <video id="myVideo" autoplay="autoplay" controls="controls" loop="loop"> <!-- 提供多种格式的视频文件，以便浏览器从中播放自身支持的视频文件 --> <source src="北京欢迎你.mp4" ></source> <source src="北京欢迎你.ogg" ></source> <source src="北京欢迎你.webm" ></source> 您的浏览器不支持video标签。 </video> </body> </html>
0 条评论
撰写评论