vue+西瓜播放器实现直播流flv.js播放

写bug的小张

已于 2023-05-22 16:11:18 修改

阅读量610

点赞数

文章标签： javascript vue.js

于 2023-05-22 16:10:25 首次发布

本文链接：https://blog.csdn.net/qq_46639390/article/details/130808969

版权

请参考官网地址：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
在这里插入图片描述
这个问题没解决掉所以换了一个播放器然后就没有这个警告了，视频流也可以正常播放。那个大佬知道如何解决这个问题得话还请在评论区或者私信回复一下【抱拳】