在h5页面中使用xgplayer处理视频

1.引入

<script src="https://unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js" charset="utf-8"></script>

2.提供占位符

这里展示的是视频是后台返回的数据

<div :id="`mse${index}`" ></div>

3.在后台所返数据里 有图片有视频

//拿到数据之后 调用该函数
this.toPlay()

//过滤视频
    toPlay(){
      // this.DynamicList.forEach((item,index) => {
      this.dydata.forEach((item,index) => {
        if(item.multimediaType == 1){
          // this.play(index,item.multimedia.slice(1,item.multimedia.length-1))
          this.play(index,item.multimedia)
        }
      })
    },
//播放视频  
    play(playid,playurl){
      this.$nextTick(() => {   //先拿到接口数据 再播放视频
        //实例化
        var player = new Player({
          "id": 'mse'+playid, //绑定dom节点
          "url": playurl,  //视频地址
          "fluid": true, //流式布局，自适应父元素宽高
          "volume": 0.3, //初始音量
          "controlsList": ['nofullscreen'], //去掉全屏按钮
          "videoInit": true,  //若未设置poster封面，使用视频首帧
          "playsinline": true,  //手机观看时，开启内联模式
        });
      });
    },
    

happy周五 希望今天可以摸鱼