请参考官网地址:http://v2.h5player.bytedance.com/gettingStarted/#%E5%AE%89%E8%A3%85

//下载所需要得包
npm install xgplayer
npm install xgplayer-flv
//在需要用到得界面导入所需包
import Player from 'xgplayer';
import FlvPlayer from 'xgplayer-flv';

<!--视频播放器得容器-->
 <div id="mse" style="width: 100%; height: 100%;"></div>
methods:{
	playVideo(){
		this.$nextTick(() => {
        const config = {
          "id": 'mse',
          "url": `${videoUrl}`,
          "playsinline": true,
          "poster": poster,
          "plugins": [],
          "isLive": true,
          "volume": 0,
          "autoplay": true,
          "width": '100%',
          "height": '100%',
          "fluid": false,
          "playbackRate": [
            null
          ],
          "screenShot": true
        }
        config.plugins.push(FlvPlayer)
        let player = new Player(config)
      })
	}
}

其实最开始用的播放器是fly.js但是针对有些视频流时会报错,并且控制台一直警告。问题详见:https://github.com/Bilibili/flv.js/issues/79
在这里插入图片描述
这个问题没解决掉所以换了一个播放器然后就没有这个警告了,视频流也可以正常播放。那个大佬知道如何解决这个问题得话还请在评论区或者私信回复一下【抱拳】

Logo

前往低代码交流专区

更多推荐