首页 前端知识 简易的html5视频播放倍速代码写法

简易的html5视频播放倍速代码写法

2024-03-15 10:03:11 前端知识 前端哥 59 996 我要收藏

HTML5视频标签有一个叫做playbackRate的属性,用于设置倍速播放。例如设置播放速度为2倍,可以写成:

<video src="video.mp4" autoplay controls playbackRate="2"></video>

同时,可以使用JavaScript来控制播放速度。以下是一个简单的代码示例,包含了3个按钮,点击分别可以将倍速设置为1、1.5和2。

<video src="video.mp4" id="myVideo" autoplay controls></video>

<button onclick="setSpeed(1)">1x</button>
<button onclick="setSpeed(1.5)">1.5x</button>
<button onclick="setSpeed(2)">2x</button>

<script>
  function setSpeed(rate) {
    var video = document.getElementById("myVideo");
    video.playbackRate = rate;
  }
</script>

 

MR虚拟直播

  • MR直播实例(混合现实直播)高品质企业直播
  • 企业年会直播来个虚拟舞台场景如何?
  • MR直播(混合现实直播)做一场高品质企业培训
  • MR场景直播-帮助企业高效开展更有意思的员工培训
  • 企业多会场视频直播(主会场、分会场直播)实例效果
  • 虚拟直播(虚拟场景直播)要怎么做?

无延迟直播

  • 无延时直播/超低延时直播画面同步性测试(实测组图)
  • 搞定企业视频直播:硬件设备、直播网络环境和设备连接说明
  • 无延时/无延迟视频直播实例效果案例
  • OBS无延迟视频直播完整教程(组图)
  • 毫秒级超低延时直播产品实测(PRTC直播/webRTC直播)

视频加密与安全

  • 企业培训视频如何防止被下载和盗用?
  • 上新:视频加密功能增加防录屏(随机水印)功能
  • 两种实现视频倍速播放的方法(视频播放器倍速1.5x/2x)
  • 教育培训机构教学课程内容视频加密是如何做的?

在线导播台

  • 在线导播台(网页导播台)混流效果
  • OBS Studio导播台多画面使用实测

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3817.html
标签
音视频
评论
会员中心 联系我 留言建议 回顶部
复制成功!