前端-h5直播视频流（xgplayer 篇）

前言

1、通过接口获取媒体流地址或静态地址；（省略）
2、通过 西瓜播放器插件xgplayer 以及相关xgplayer支持的插件实现直播
本质：始终在调用流地址实现视频播放（个人理解）

使用

template

 <divref="video"id="mmid"v-show="islivea"></div>

安装西瓜播放器插件
官网

$ npm install xgplayer
$ npm install xgplayer-hls.js
// 由于是直播，我们使用xgplayer-hls.js插件，对于hls协议的点播(直播)可以使用该插件完成，
//该插件是对hls.js的封装，力求稳定的同学可以使用该插件。
// 其他插件也可以，比如 xgplayer-flv
// $ npm install xgplayer-flv

使用

引入

import Player from "xgplayer"; // 用来播放录播的MP4格式视频
// import FlvPlayer from "xgplayer-flv"; // 直播流flv
import HlsJsPlayer from "xgplayer-hls.js"; // 直播流m3u8（hls）

mounted下

// ts书写   js把：void去掉
mounted(): void {this.getVideo();}

相关参数配置和说明

// ts书写   js把private 私有声明去掉private getVideo() {setTimeout(() => {this.videoPlayer = new HlsJsPlayer({el: document.querySelector("#mmid"), // 选择demo// url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',url: 'http://play.happok.com/happok/7440.m3u8?auth_key=1621421808-0-0-d284825ce4d69e098fbba3b3748b63b7',width: "100%",height: "240px",volume: 0.6, // 初始音量autoplay: true, // 自动播放playsinline: true,isLive: true, // 是否直播// rotate: {   //视频旋转按钮配置项//     innerRotate: true, //只旋转内部video//     clockwise: false // 旋转方向是否为顺时针// },controls:true, // 播放器控制controlsList: ['nodownload'], // 关闭控制器相关配置 ['nodownload','nofullscreen','noremoteplayback'] 只对原生video有效 对自定义UI请使用ignores选项ignores: ['fullscreen'], // 控制条忽略相关配置项 ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume']lang: 'zh-cn', // 语言支持 'zh-cn' | 'en' | 'jp' 中文、英文、日文rotateFullscreen: false,// 样式全屏，不旋转=>视频会随着手机横竖屏进行切换closeVideoClick: true, // video触发click事件后视频切换播放/暂停状态 关闭closeVideoTouch: true, // h5端触发touchend事件后视频切换播放/暂停状态 关闭videoInit: true,poster: 'https://pics5.baidu.com/feed/ae51f3deb48f8c544ac3d4662d3a57fde0fe7f06.jpeg?token=ea1493323bf5a129e0569426a19e0e3e', // 封面图cors: true // 请求是否跨域});}, 150);}

适配相关-同层播放微信端

'x5-video-player-type':'h5-page', //同层播放
playsinline: true // 处理ios点击播放默认全屏问题

5、api-事件优化相关(网慢提示、以及结束控制)

// 播放器相关参数控制console.log(this.videoPlayer.networkState) // 返回视频的当前网络状态console.log(this.videoPlayer.hasStart)// 是否开始播放console.log(this.videoPlayer.readyState)//返回视频的就绪状态

this.videoPlayer.on('waiting',()=>{ // 页面监听缓冲时间，如果存在则进行判断缓冲的时间是否大于3秒console.log('waiting网慢加载')this.$set(this.loadObj,'wait',true) // 定义属性保存出现缓冲if(this.loadObjsetTimeOut){ // 定义属性保存setTIMEOUT事件，确保只执行一次clearTimeout(this.loadObjsetTimeOut)}this.loadObjsetTimeOut=setTimeout(()=>{if(Object.keys(this.loadObj).length > 0){ // 判断3s后是否还在缓冲Toast({type: 'html',message: '<span>本端网络信号弱</span>',position: 'top',duration: 2000,className:'cctoast',});}setTimeout(()=>{ // 判断13s后是否还在缓冲if(Object.keys(this.loadObj).length > 0){Toast({type: 'html',message: '<span>本端网络信号弱,请稍后重试</span>',position: 'top',duration: 2000,className:'cctoast',});}},10000)},3000)})this.videoPlayer.on('canplay',()=>{ // 监听播放事件  缓冲如果结束了则对对象置空console.log('canplay可以播放')if(Object.keys(this.loadObj).length > 0){this.loadObj = {}}})this.videoPlayer.on('error',(error)=>{Toast({type: 'html',message: '<span>当前无直播</span>',position: 'top',duration: 3000,className:'cctoast',});// 视频流404的时候=>视频停止推流 进行监听错误的结束事件if(this.videoPlayer.readyState=='没有关于音频/视频是否就绪的信息'){//逻辑//结束视频// 一般可以使用一张图片进行代替视频demo} })

前端-h5直播视频流（xgplayer 篇）相关推荐

H5直播入门（理论篇）
前言这篇总结其实是去年公司每周技术分享会轮到我的时候写的.那时候公司正在大刀阔斧地准备直播业务,私以为主管会委以重任,就翻了不少论坛,做了一次简单的技术分享.后来直播业务让另一位同事承担了,自己也就 ...
H5直播答题并不难，看完这篇你也会
各大平台为了给自家的直播答题争抢流量,已经绞尽脑汁,不断在玩法上进行创新.这场竞争从 iOS 平台蔓延至 Android 平台.目前大多数平台获取用户的方式还是通过分享邀请码,下载 App 的方式进行 ...
前端开发：H5直播起航
前言前不久抽空对目前比较火的视频直播,做了下研究与探索,了解其整体实现流程,以及探讨移动端HTML5直播可行性方案. 发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端 ...
H5直播站点运维笔记一服务器篇
H5直播站点运维笔记一服务器服务器篇一.CentOS6基础操作 1. 查看服务器版本 2. 查看服务器性能 3. 文件查找 4. 软件查找 5. 用户系统 6. 远程登录工具二.FTP ( V ...
H5直播站点运维笔记四压测篇
H5直播站点运维笔记四压测篇压测篇一.测试环境 1．CPU 2．内存 3．操作系统 4．WEB环境二.优化前压测三.开启opcache优化四.laravel 缓存配置/路由/类映射加载优化 ...
移动端H5直播/点播前端入坑简易手册
需求来了,只能H5 因业务需要,我们要在微信中使用直播服务.因为业务较小,没有必要花很多钱去采购第三方一条龙服务.那么,我们采用直播推流使用腾讯云的服务,前端自己开发页面. 原来考虑过使用微信小程序做 ...
H5直播之MSE(Media Source Extensions)
参考 w3c media-source Media Source 系列 - 使用 Media Source Extensions 播放视频全面进阶 H5 直播无 Flash 时代,让直播拥抱 H5 ...
H5直播系列二 MSE(Media Source Extensions)
转自https://www.jianshu.com/p/1bfe4470349b 参考 w3c media-source Media Source 系列 - 使用 Media Source Exten ...
h5直播开发之旅总结
前言关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...

前端-h5直播视频流（xgplayer 篇）

前言

使用

前端-h5直播视频流（xgplayer 篇）相关推荐

最新文章

热门文章