码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Html5播放器如何实现倍速播放


    定义和用法

    playbackRate 属性设置或返回音频的当前播放速度。

    playbackspeed

    指示音频的当前播放速度。

    例值:

    • 1.0 正常速度
    • 0.5 半速(更慢)
    • 2.0 倍速(更快)
    • -1.0 向后,正常速度
    • -0.5 向后,半速

    示例代码1:

    代码示例:

    1. <video id="video" controls src="**.mp4" type="video/mp4"></video>
    2. 选择倍速播放:
    3. <select id="select">
    4. <option value="0.5">0.5</option>
    5. <option value="1" selected>1.0</option>
    6. <option value="1.25">1.25</option>
    7. <option value="1.5">1.5</option>
    8. <option value="2">2.0</option>
    9. </select>
    1. var select = document.getElementById('select');
    2. var video = document.getElementById('video');
    3. select.addEventListener('change', function () {
    4. video.playbackRate = this.value;
    5. })

    示例2:

    应用倍速实例。

    1. <div id="player"></div>
    2. <script src="//player.polyv.net/script/player.js"></script>
    3. <script>
    4. var player = polyvPlayer({
    5. wrap: '#player',
    6. width: 800,
    7. height: 533,
    8. vid: 'e785b2c81c9e018296671a1287e99615_e',
    9. });
    10. </script>
    speedboolean/array[2, 1.5, 1.2, 0.5]设置为false则关闭倍速,可传入数组自定义显示哪几种倍速,速率1不需要填入,会自动添加,所设置速率值必须大于0,少于或等于3,最多设置6种速率(不包含1),所设置值会按由大到小自动排序

     设置倍速代码如下:

    1. <div id="player"></div>
    2. <script src="//player.polyv.net/script/player.js"></script>
    3. <script>
    4. var player = polyvPlayer({
    5. wrap: '#player',
    6. width: 800,
    7. height: 533,
    8. speed:[2, 1.5, 1.2, 0.5], //倍速播放参数设定值
    9. vid: 'e785b2c81c9e018296671a1287e99615_e',
    10. });
    11. </script>

    图1-1:倍速播放效果

    图1-2:倍速播放效果

       [ 视频安全 ] 相关原创文章

    • 教育教学类视频如何处理加密与安全(组图)
    • 防止360浏览器小窗下载视频
    • 视频安全之视频播放密码功能(设置观看密码功能教程)
    • 视频安全之授权播放和防录屏跑马灯
    • 企业级微信视频直播如何设定观看白名单(设定手机观看白名单、授权观看直播)
    • 在线教育网站如何更好的实现视频安全视频保护?
    • 免费视频二维码的完整使用教程(适合小企业做微信视频宣传) 
    • Html5视频video标签中使用blob实现视频播放加密

    [ 视频直播 ] 相关原创文章

    • 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
    • 视频直播画中画效果(边角叠加、去背景、并列布局三种效果)
    • 做视频直播时如何测试本地网络的上行带宽(网速测试)
    • 在线导播台(网页导播台)混流效果
    • 云课堂直播功能介绍,更贴合在线教育、企业内训的场景应用
    • 微信公众号直播有哪些不一样的玩法?
    • 企业年会活动常用的音频类、视频类工具软件

     

  • 相关阅读:
    jsp 前端传值,后端接受不到
    使用 js 动态修改在线 svg 背景色
    Unity VSCode一些插件
    Git图形化界面GUI的使用&SSH协议及idea集成Git
    存储器概述
    h5 uniapp如何保存照片【saveImageToPhotosAlbum不支持h5端】
    PMP项目管理中的重要角色
    vmware 16增加硬盘容量并在Ubuntu 18.04上边格式化并挂载
    入门CubeIDE软件 界面功能说明
    托盘四向车货架|海格里斯如何保证托盘四向穿梭车货架系统可以高效运转?
  • 原文地址:https://blog.csdn.net/ffffffff8/article/details/127666660
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号