利用西瓜播放器（xgplayer）实现直播点播

<template><div class="pc-live"><div class="left"><!-- 开启声音 --><div class="sound" @click.stop="openSound" v-if="sound"><img src="./../assets/live-jingyin.png" alt="" /><span class="word">取消静音</span></div><div class="live-player"><div class="yes-start" id="mse" v-if="liveStatus"></div><div class="no-start" v-else><img src="./../assets/poster-live.png" alt="" /></div></div></div></div>
</template><script>
import Player from 'xgplayer';
import HlsJsPlayerAll from 'xgplayer-hls.js'; // hls完整版
import FlvJsPlayer from 'xgplayer-flv.js';export default {name: 'live-index',components: {// VueScroll},data () {return {// 开启声音控件sound: false,xgplayer: null,liveStatus: 0, // 直播状态liveUrl: '', // 直播的链接btnStatus: false, // 解决按钮快速点击重复提交 true为提交中 false 可以再次提交}},created () {localStorage.setItem('dplayer-volume', 0)},mounted () {this.getliveComment()},methods: {// 开启声音openSound () {this.xgplayer.video.volume = 0.8this.sound = false},// 获取直播流getliveComment () {const config = this.$store.state.configthis.liveStatus = parseInt(config.liveStatus.val)if (this.liveStatus != 0) {this.sound = true// 是否Flvconst wayFlv = (config.liveUrl.remark.indexOf('flv') != -1)if(wayFlv){this.liveUrl = config.liveUrl.remarkthis.$nextTick(() => {this.dpInitFlv()})return}// 是否Hlsconst wayHls = (config.liveUrl.remark.indexOf("m3u8") != -1)if(wayHls){this.liveUrl = config.liveUrl.remarkthis.$nextTick(() => {this.dpInitHls()})return}// 是否MP4const wayMp4 = (config.liveUrl.remark.indexOf("mp4") != -1)if(wayMp4){this.liveUrl = config.liveUrl.remarkthis.$nextTick(() => {this.dpInitMp4()})return}}},// 用于播放FlvdpInitFlv () {if (this.xgplayer) returnthis.xgplayer = new FlvJsPlayer({id: 'mse',poster: require('./../assets/poster-live.png'),url: this.liveUrl,width: 1400,height: 780,fitVideoSize: 'fixWidth',errorTips: `播放失败，请<span>刷新</span>重试`,isLive: true,// preloadTime: 0, // 预加载时长(秒)// minCachedTime: 5,volume: 0,// autoplayMuted: true,  // 用了取消禁音会失效  autoplay: true,cors: true})},// 用于播放HlsdpInitHls () {if (this.xgplayer) returnthis.xgplayer = new HlsJsPlayerAll({id: 'mse',poster: require('./../assets/poster-live.png'),url: this.liveUrl,width: 1400,height: 780,fitVideoSize: 'fixWidth',errorTips: `播放失败，请<span>刷新</span>重试`,isLive: true,playsinline: true,volume: 0,// autoplayMuted: true,   autoplay: true,cors: true,ignores: ['time', 'progress']})},// 用于回播dpInitMp4 () {if (this.xgplayer) returnthis.xgplayer = new Player({id: 'mse',poster: require('./../assets/poster-live.png'),url: this.liveUrl,width: 1400,height: 780,fitVideoSize: 'fixWidth',errorTips: `播放失败，请<span>刷新</span>重试`,volume: 0,// autoplayMuted: true,autoplay: true,})},},beforeDestroy () {}
}
</script><style lang="scss" scoped>
.pc-live {width: 100vw;min-height: 100vh;background: url("./../assets/bg-pclive.png") no-repeat;background-size: 100% 100%;overflow: hidden;.reload {margin: 40px auto 30px;span {display: block;width: 100px;height: 35px;margin: 0 auto;line-height: 35px;font-size: 18px;font-weight: 700;text-align: center;background-color: #fff;border-radius: 4px;cursor: pointer;}}.left {margin: 100px auto 0;width: 1400px;position: relative;.sound {width: 150px;height: 35px;line-height: 35px;text-align: center;background-color: #fff;border-radius: 4px;z-index: 999;position: absolute;left: 20px;top: 20px;display: flex;align-items: center;justify-content: center;cursor: pointer;img {width: 20px;margin-right: 5px;}.word {font-weight: 700;font-size: 18px;}}.live-player {width: 1400px;.yes-start {width: 100%;height: 100%;}.no-start {img {display: block;width: 1400px;}}}}
}
</style>

利用西瓜播放器（xgplayer）实现直播点播相关推荐

西瓜播放器xgplayer设置自动播放
前言: 用西瓜播放器xgplayer做rtsp直播流的播放,想要在页面加载时自动播放. 设置autoplay:ture,muted:ture,嘿没有成功! 在网上找了半天,设置手动触发play.pla ...
vue - vue中使用西瓜播放器xgplayer
1,安装 # 最新稳定版 $ npm install xgplayer对于已有项目也可以通过 CDN 引入,代码如下: <script src="//unpkg.byted-stati ...
vue通过腾讯Web（H5）播放器，实现直播点播
官档:https://cloud.tencent.com/document/product/454/7503 index.html 引入 <script src="https://im ...
xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件，内置解析器、也能节省流量
一个功能强大,符合国内视频播放业务的 web 视频播放组件,由西瓜视频技术团队官方出品. 关于西瓜播放器西瓜播放器 (xgplayer.js) 不是一个看片软件,而是一个 Web 开发上的视频播放器 ...
vue 使用西瓜播放器直播
1.安装依赖 cnpm install xgplayer --save cnpm install xgplayer-flv--save cnpm install xgplayer-hls.js--sa ...
uniapp引入xgplayer(西瓜播放器)实现视频监控
开发背景最近有个需求,需要在app中展示对应站房的实时监控画面,因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件开发准备因为是直播流就选择了flvjs, 项目安装x ...
web点播/直播播放器-VideoJS 网页直播实现双击全屏
博客整理了,我们免费web点播/直播播放器liveplayer 相关功能的实现过程.记得关注哦. 网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 Vi ...
React使用西瓜播放器
西瓜播放器 | 快速上手概述西瓜播放器是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件.更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆 ...
视频（音频）播放组件——西瓜播放器
安装 npm install xgplayer 使用 <template><div><div id="video&qu ...

利用西瓜播放器（xgplayer）实现直播点播

利用西瓜播放器（xgplayer）实现直播点播相关推荐

最新文章

热门文章