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

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

第一步:

npm i xgplayer --savenpm 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/

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！