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

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

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

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

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

可查看西瓜播放器地址自定义配置 http://v2.h5player.bytedance.com/generate/
原文详细地址 http://www.hereitis.cn/articleDetails/772