阅读 527

videoJS兼容win7/IE11下使用flash播放视频

背景

  • PC端需要播放m3u8格式视频,要求兼容chrome、IE11。最终使用videoJS实现的视频回放,后来同事发现自己win7系统下IE11不能正常播放。

  • 于是,我光明正大地打开了b站,播放起来小猪佩奇,发现事情没那么简单!b站竟然在win7下的IE11只支持flash播放,看来win10与win7下的IE11根本不是亲兄弟

  • 不过我还是坚信官方宣称的Plays anything,在官网与github的issue上挣扎了一段时间,找到了解决方法,下面废话不多说,直接上代码!!!

解决方法

    <!-- 播放器样式 -->
    <link href="video-js.min7.7.5.css" rel="stylesheet" />
    <!-- 
        默认7以上版本,会自带hls解析插件,不用单独引入 
        h5技术也在其中,会自动注册 
    -->
    <script src="video.min7.7.5.js"></script>
    <!-- 以下两个插件是flash播放需要的 -->
    <!-- 此文件引入后,techOrder中会在h5之外,会在注册flash技术 -->
    <script src="videojs-flash.js"></script>
    <!-- 此插件是将flashls与video.js集成的源处理程序 -->
    <script src="videojs-flashls-source-handler-bright.js"></script>
    <script>
      // 全局方式覆盖 修改SWF文件请求路径,若使用flash会请求加载此文件
      videojs.options.flash.swf = 'video-js.swf';
    </script>
复制代码
    // 部分配置项,具体参考官方
    var options = {
      // poster: 'Logo.png', //未播放时 的封面
      //默认先执行h5,如果引入videojs-flash.js,浏览器不支持h5,会默认使用flash
      techOrder: ['html5', 'flash'], //定义Video.js技术首选顺序,
      //autoplay: true, //播放器准备好之后,是否自动播放 【默认false】
      //controls: false, //是否显示控制栏
      preload: 'auto', //预加载
      muted: true, //静音
      language: 'zh-CN', //初始化语言
      //fluid: true,
      /*controlBar: {  // 配置控制栏
            timeDivider: false, // 时间分割线
            durationDisplay: false, // 总时间
            progressControl: true, // 进度条
            customControlSpacer: true, // 未知
            fullscreenToggle: true // 全屏
        },*/
    };
复制代码

引用文件对应版本

特别提醒

  • 保证video-js-bright.swf正常访问到
  • 保证videojs-flashls-source-handler-bright.js与video-js-bright.swf版本配套, 否则会出现部分功能问题,比如时间轴无法拖动、
  • 上述代码需要在服务器上运行,否则会显示播放失败