vue + xgplayer-hls.js 实现hls流播放

项目中使用西瓜播放器插件

第一步:

npm i xgplayer --save

npm i xgplayer-hls.js --save

第二步:

// 在需要的页面引入

import 'xgplayer';
import hlsjsPlayer from 'xgplayer-hls.js';

第三步:

// 提供一个容器
<div id='xg></div>

第四步:

// 定义一个方法来初始化
initPlayer(url, bgImg) {
      let player = new hlsjsPlayer({
        id: 'xg', // 上面容器的id选择器
        url: url,
        autoplay: true, // 自动播放
        fluid: true, // 流体
        with: 375,
        height: 300,
        poster: bgImg, // 海报
        playbackRate: [0.5, 0.75, 1, 1.5, 2], // 播放速率
        download: true, // 下载
      });
    },

第五步:

// 可以在你请求成功获取到数据那模块下写 主要是地址
this.initPlayer(res.data.data.url, res.data.data.bgImg);

其他配置可以访问西瓜播放器地址自行配置自己项目中需要的内容

加油，明天还是要敲代码的小猴猴呀 ~~

西瓜播放器插件地址:http://v2.h5player.bytedance.com/

感谢浏览，希望有助于你们，一起进步啊 ~~