vue flash m3u8 pc端播放

最近在做一个项目，需求要兼容一个erp （小声逼逼：是我见过最烂的）视频播放，一开始想这还不简单吗，一顿操作猛如虎，先把m3u8转成pc端可以播放的，用的是HLS 怎么个玩意  然后就漫长的等了一段时间对接就是这么一个流程， 很开心每天就是催催他们，嗯很舒服，然而舒服的日子总是短暂的，真的是30年河东30年河西，他们说要嵌入他们开发的erp 嗯 应该不是问题，嵌入进去以后，果然没有让我失望，播放不了，第一直觉干嘛？甩锅，他们说只能用flash 播放，我TM就。。。 研究一下应该不是很难，关键是老子没有用过flash ,对于我们这种flash 小白，真的是很不友好的，经过了两天的跳井，

还是讲一下跳井的经历吧，一开始想用videojs的记得他好像可以吧m3u8转为flash的，在文档看过有这么一个印象，看了一下是有这么个东西，在他们的浏览器里面试了一下发现不行？？？？真的一脸懵逼，

然后就马上换方案，google到了swfObject 这么一个插件，经过了一段漫长的摸索， 其实就是太懒了，老是想拿别人的现成的例子来用，找了很多发现问题，真的是懵逼，越是懵逼无脑，越是找不到答案，真的是很心累,到最后还是乖乖的去看了文档，真香

这个痛苦的过程持续了两天。

文档链接：http://osmfhls.kutu.ru/docs/grind/

这也许就是传说中的 ：不怕加班就怕加班还做不出来东西的来源-------Alex Finch

看过文档以后发现写的还是很清楚，简单的，一看不想看的原因可能是没有搞过flash

好了好了不逼逼了

-------------------------------------------------------------------------分割线--------------------------------------------------------------------------

直接上代码：

我能是用vue-cli 架构开发的

index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

methods:

  doSetMedia (m3u8url) {
        m3u8url = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'

        let flashvars = {
          src: m3u8url,
          plugin_m3u8: '../../../../../../static/js/osmf/flashlsOSMF.swf',
          poster: this.getVideoData.picUrl,
          javascriptCallbackFunction: 'onJSBridge',
          autoPlay: true,
        }

        let params = {
          quality: 'high',
          bgcolor: '#000000',
          allowscriptaccess: 'always',
          allowfullscreen: 'true',
          wmode: 'direct',
        }
        let attributes = {
          name: 'player',
        }
        swfobject.embedSWF(
          '../../../../../../static/js/osmf/GrindPlayer.swf',
          'player',
          '800',
          '400',
          '10.1.0', null,
          flashvars,
          params,
          attributes,
          function (playerId) {
            that.monitorCurrentTime()
          }
        )
      },

temple:需要一个div来显示

<div id="player"></div>

这样基本上就可以了，但是有个问题我是需要监听他的播放时间，发现他的回调是在全局的，我在vue里面拿不到

javascriptCallbackFunction: 'onJSBridge', 这个参数只能接口只接受字符串类型的那怎么办的呢？于是我就在index.html页面加入了如下的方法，如果有更好的写法，请各位客官 你懂得。

index.html

<script type="text/javascript">

  function onJSBridge(playerId, event, data) {
    window.hftFlashCurrentTime=data.currentTime
    switch(event) {
      case "onJavaScriptBridgeCreated":
        player = document.getElementById(playerId);
        break;
      default:
        break;
    }
  }

</script>

解释一下：这个我给window对象添加了一个属性 然后在页面里面监听他的实时变化，

  monitorCurrentTime () {
        let currentT = document.getElementById('player')

        this.monitorFlag = setInterval(() => {
          if (window.hftFlashCurrentTime >= 5) {
            clearInterval(this.monitorFlag)
            if (!this.serviceCountBuy) {
              currentT.pause()
      
              }
            }
          }
        }, 1000)

      }

详细的参数可以看官网写的很清楚：swfobject.embedSWF()

或者google一下很多文章都有写，我在这里就不多逼逼了，基本上就已经可以了。其实方法已经很少人用了，但是还是有市场的，这就是这两天的  experience

 

m3u8为pc端可以播放的方式

initH5Media (m3u8url) {
        let that = this
        let mediaPlayer = document.getElementById('h5MediaPlayer')
        let hls = new Hls()
        hls.loadSource(m3u8url)
        hls.attachMedia(mediaPlayer)
        hls.on(Hls.Events.MANIFEST_PARSED, function () {

        })
        mediaPlayer.addEventListener('timeupdate', function () {
          that.timeUpdate()
        }, false)

      }

通过npm 下载 hls

npm i hls.js@0.13.3-canary.5704

然后引入进来在export default {}   外面。。。。你也可以再页面mounted之后

let Hls = null
if (process.browser) {
  Hls = require('hls.js')
}

 

重要的事情，电脑一定要装flash插件，电脑一定要装flash插件，电脑一定要装flash插件

一开始我就是用videojs 实现的，他会自动的转flash，只是我电脑当时没有装flash 插件。