h5 播放器 如何支持倍速

1、H5 的video标签属性介绍，如图所示

2、创建如下结构的测试文件

     1）jquery源文件（如果使用原生js版本，此项可以不要）

     2）视频文件（任一视频文件都可以）

3、在页面添加待测试dom

     1）添加video标签，并将视频源指向上一步的视频文件

     2）添加“播放倍速”的下拉选择框

     3）video标签的controls属性表示显示播放按钮

4、【jquery版本】通过选择“播放倍速”下拉框，直接改变演示视频的播放速度，代码与注释详见截图

5、【jquery版本】演示效果如下

      1）视频文件的图像与声音是在一起的，不是分开的，因此，设置playbackRate倍速之后，不用担心图像倍速播放了，音频跟不上。因为两者是一起倍速的

      2）选择“播放倍速”下拉框，视频将自动倍速播放

6、【原生js版本】通过选择“播放倍速”下拉框，直接改变演示视频的播放速度，代码与注释详见截图

7、【原生js版本】演示效果如下

      1）js版本与jquery版本的的区别其实就是查找dom、对象，绑定事件语法的区别，其他属性设置都是一样的

      2）选择“播放倍速”下拉框，视频将自动倍速播放