西瓜视频实现直播的使用教程

随着信息技术的不断发展，以移动网络为基础的短视频开始兴起与发展，并在短短时间内成为家喻户晓的产品，像现阶段还处于最火的“抖音”，“快手”等，都是在此基础上应运而生的。

既然讲到了“抖音”和“快手”相信大家对视频直播也不陌生吧那么视频直播主要是由什么实现的呢？

一个通用的直播模型一般包括三个模块：主播方、服务器端和播放端。

今天呢我主要讲播放端实现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, // 下载   });    
},