UniAPP，添加m3u8 格式的视频

引入videoJS

在html 里面引入

<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video-js.min.css" rel="stylesheet"> 
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video.min.js"></script>

使用

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="XXX/oceans.m3u8" type="application/x-mpegURL">
  </video>

常用事件

• 播放 this.play()
• 停止 – video没有stop方法，可以用pause 暂停获得同样的效果
• 暂停 this.pause()
• 销毁 this.dispose()
• 监听 this.on(‘click‘,fn)
• 触发事件this.trigger(‘dispose‘)

但是Uniapp 对video 的解析如下：

image.png

因此要动态的创建video demo
代码如下：

<view class="video-wrap" ref="videoWrapHls" ></view>

var video = document.createElement('video');
      video.id = 'myVideo';
      video.style = `width:200px;height:200px;`;
      video.setAttribute(
        'class',
        'video-js vjs-default-skin vjs-big-play-centered'
      );
      video.setAttribute('webkit-playsinline', true);
      video.setAttribute('playsinline', true);
      video.setAttribute('x5-video-player-type', 'h5');
      video.setAttribute('x5-video-player-fullscreen', true);
      video.setAttribute('x-webkit-airplay', true);
      this.$refs.videoWrapHls.$el.appendChild(video);
      this.player_video = videojs('myVideo', {
        controls: true,
        autoplay: 'autoplay',
        preload: 'auto',
        sources: [{
          src: this.videoSrc,
          type: "application/x-mpegURL"
        }]
      })

切换下一个视频时一定要先销毁当前视频，清除当前元素
代码如下：

          if(document.getElementById('myVideo')){
              this.$refs.videoWrapHls.$el.removeChild(document.getElementById('myVideo'))
            }
            if(this.player_video){
              this.player_video.dispose();
            }