zoukankan      html  css  js  c++  java
  • Vue中videojs的配置

    videojs(el, options, cb): 接受三个参数: video标签id, 要实例化的videojs配置, 回调函数;

    常用的videojs配置选项:

    • preload: 是否预加载
    • muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放
    • controls: 将显示视频控件, 如果不需要则去掉controls即可
    • autoplay: 视频在加载完成之后自动播放
    • poster: 视频封面图片
    • loop: true/false, 是否循环播放
    • notSupportMessage: 浏览器无法播放时的提示信息
    • techOrder: 播放控件,默认是html5,这里需要播放rtmp所以首选项要是flash
    • fluid: 流式布局,自适应父元素大小
      更多的配置可以看videojs-options

    常用方法和事件

      1. autoplay()获取或者设置自动播放属性
      2. currentTime()设置或者获取当前播放进度
      3. duration()获取视屏的总长度,一般要等到视屏对象完全加载后才能获取到,一般我们会使用定时轮询的方式来获取总时长
      4. ended()获取当前视屏对象是否已经处于结束状态
      5. enterFullWindow() 当全屏不支持我们可以视频容器延伸到浏览器将让我们一样宽。经过试验改api完全无法使视屏进入全屏。分析源码后发现真正进入全屏的api应该是requestFullscreen(),但可惜该api只能又手势触发函数执行,连模拟点击都没法触发他。
      6. exitFullscreen() 退出全屏,有效的
      7. exitFullWindow() 退出全屏,试了没什么用
      8. height() 设置/获取播放器的高度
      9. width() 设置/获取播放器的宽度
      10. isFullscreen() 检查是否处于全屏模式
      11. load() 开始加载视屏
      12. loop() 在视频中获取或设置循环属性元素
      13. muted() 获取当前的静音状态
      14. pause() 暂停视频
      15. paused() 检查视屏是否暂停
      16. play() 播放视屏
      17. played() 检查视屏播放状态
      18. preload() 获取或设置预加载属性
      19. ready() 视屏对象加载完成后调用ready中的回调函数
      20. poster() 获取或设置海报图像源url
      21. reset() 重载视屏
      22. src() 更换视频源
      23. dispose() 销毁视频实例

    当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

    <video controls></video>
    //全屏按钮
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
    //播放按钮
    video::-webkit-media-controls-play-button {
        display: none;
    }
    //进度条
    video::-webkit-media-controls-timeline {
        display: none;
    }
    //观看的当前时间
    video::-webkit-media-controls-current-time-display{
        display: none;           
    }
    //剩余时间
    video::-webkit-media-controls-time-remaining-display {
        display: none;           
    }
    //音量按钮
    video::-webkit-media-controls-mute-button {
        display: none;           
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;           
    }
    //音量的控制条
    video::-webkit-media-controls-volume-slider {
        display: none;           
    }
    //所有控件
    video::-webkit-media-controls-enclosure{
        display: none;
    }
     
  • 相关阅读:
    Mysql 创建外键 1005 err 150
    骑车目标
    windows 如何查看端口占用进程ID 进程名称 强制结束进程
    Eclipse去除JavaScript验证错误
    MyEclipse 代码里的中文字太小设置方法
    security自动登陆
    Tomcat 7 可以修改 Session 默认的 Cookie 名 JSESSIONID 了
    windows2008 安装oracle10g“程序异常终止。发生内部错误。请将以下文件提供给oracle技术支持部门
    ORA-01652: 无法通过 128 (在表空间 TEMP 中) 扩展 temp 段(EXP-00056: 遇到 ORACLE 错误 1652 ORA-01652: unable to extend temp segment by 128 in tablespace TEMP)
    oracle数据库启动时出现ORA-01157和ORA-01110问题
  • 原文地址:https://www.cnblogs.com/heyiping/p/15763204.html
Copyright © 2011-2022 走看看