H5多媒体视频播放器的使用及常用属性

H5视频播放器标签 video 实现代码如下：

<video src="http://www.w3school.com.cn/i/movie.ogg" width="400" height="400"  controls></video>

1、其控制器默认样式如下图：(谷歌浏览器为例)

其中的 controls 为显示默认的控制器

2、视频源兼容性处理，浏览器兼容性参考图如下：

其中，同一视频源不同格式的视频引入方式，如下代码：

<video width="400" height="400" controls>
    <source src="http://www.w3school.com.cn/i/movie.ogg">
    <source src="http://www.w3school.com.cn/i/movie.mp4">
</video>

使用 source 来引入不同格式的同一视频源即可解决浏览器的兼容性问题

3、在大多数情况下，我们见到的视频播放器的控制条是多种多样的，所以，这就需要我们根据不同的设计方式来自定义视频播放控制器。

打造个性化视频播放控制器常用的属性：

• controls：显示或隐藏用户控制界面
• autoplay：媒体是否自动播放
• loop：媒体是否循环播放
• paused：媒体是否暂停（只读）
• ended：媒体是否播放完毕（只读）
• currentTime：开始播放到现在所用的时间
• duration：媒体总时间（只读）
• volume：0.0 - 1.0 的音量相对值
• muted：是否静音