vue中使用保利威视频播放器

在data中

 vodPlayerJs: "https://player.polyv.net/script/player.js",

 this.loadPlayerScript(this.loadPlayer);if (this.player) {this.onPause();//两个监听事件this.onPlay();}

我这里不知道到底是vid还是URL，所以两个的取值根据传送的参数决定的

loadPlayerScript(callback) {if (!window.polyvPlayer) {const myScript = document.createElement("script");myScript.setAttribute("src", this.vodPlayerJs);myScript.onload = callback;document.body.appendChild(myScript);} else {callback();}},// 暂停事件onPause() {let that=this;this.player.on("s2j_onVideoPause", function (e) {that.flag=true;});},// 播放事件onPlay() {const _that = this;this.player.on("s2j_onVideoPlay", function (e) {_that.flag=false;});},loadPlayer() {const polyvPlayer = window.polyvPlayer;this.player = polyvPlayer({wrap: "#player" + this.index,width: "100%",height: "544",vid: this.vid,autoplay: false,ban_preview_video: "on",allowFullscreen:false,url: this.url,});},

关于全屏的问题
由于保利威的全屏不能带我自己写的进度条

let element = document.documentElement.getElementsByClassName("vue-video-player")[0];let player=document.getElementsByClassName('pv-video-player')[0];// this.player.toggleFullscreen();//保利威的全屏方法if (this.fullscreen) {player.style.height="544px";//用来设置保利威的视频大小，我设置AUTO或者100%的时候高度就为0了不知道为什么if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}} else {player.style.height="100vh";if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {// IE11element.msRequestFullscreen();}}this.fullscreen = !this.fullscreen;

最后附上一些我自己写的菜单栏的方法

进度条的

var that = this;var oDiv1 = document.getElementById('d2');var oDiv2 = document.getElementById('bg1');var oDiv3 = document.getElementById('drag1');oDiv3.onmousedown = function (e) {var oEvent = e || event;var downLg = oEvent.clientX - oDiv3.offsetLeft;e.preventDefault();e.stopPropagation();document.onmousemove = function (ev) {var oEvent = ev || event;var moveLg = oEvent.clientX - downLg;ev.preventDefault();ev.stopPropagation();if (moveLg < 0) {moveLg = 0;}else if (moveLg > oDiv1.offsetWidth - oDiv3.offsetWidth + 14) {moveLg = oDiv1.offsetWidth - oDiv3.offsetWidth + 14;}oDiv2.style.width = moveLg + 'px';oDiv3.style.left = moveLg + 'px';that.currentTime1 = moveLg / 458 * that.allTime1;that.currentTime = that.getHMS(moveLg / 458 * that.allTime1);that.player.j2s_seekVideo(moveLg / 458 * that.allTime1);}document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;}}

附上盒子结构
这里面的取值比如视频总长度，视频当前播放时间可以参考保利威的官方API
https://dev.polyv.net/2020/videoproduct/v-player-sdk/v-player-sdk-web/reference/

<div class="video-bar-bar"><div class="video-bar-bar-time">{{currentTime}}</div><div class="video-bar-bar-line" @mousedown="changeTime"><div class="video-bar-bar-line-cricle" id="drag1" :style="[{left:currentTime1/allTime1*458+'px'},{}]"></div>//这里是为了设置进度条跟小圆圈的长度与距离<div class="video-bar-bar-line-all" id="d2"></div><div class="video-bar-bar-line-get" id="bg1" :style="[{width:currentTime1/allTime1*458+'px'},{}]"></div></div><div class="video-bar-bar-allTime">{{allTime}}</div></div>

关于格式化视频时间

  getHMS(time) {const hour = parseInt(time / 3600) < 10 ? '0' + parseInt(time / 3600) : parseInt(time / 3600)const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)return hour + ':' + min + ':' + sec},

关于音量的设置也是

// 拖拽音量盒子changeVal() {let that = this;var oDiv1 = document.getElementById('d1');var oDiv2 = document.getElementById('bg');var oDiv3 = document.getElementById('drag');oDiv3.onmousedown = function (ev) {var oEvent = ev || event;var downLg = oEvent.clientY - oDiv3.offsetTop;ev.preventDefault();ev.stopPropagation();document.onmousemove = function (ev) {var oEvent = ev || event;var moveLg = oEvent.clientY - downLg;ev.preventDefault();ev.stopPropagation();if (moveLg < 0) {moveLg = 0;} else if (moveLg > 98) {moveLg = 98;}// oDiv2.style.height = 98-moveLg + 'px';// oDiv3.style.bottom = 98-moveLg + 'px';that.vol = 98 - moveLg;that.player.j2s_setVolume((98 - moveLg) / 100);}document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;}}},

同样附上盒子结构

 <div class="video-volume" @click.stop="isShowVol=!isShowVol"><div class="video-volume-bar" v-if="isShowVol" @mousedown="changeVal" @click.stop="changeVal"><div class="video-volume-bar-cricle" id="drag" :style="[{bottom:vol+'px'},{}]"></div><div class="video-volume-bar-all" id="d1"></div><div class="video-volume-bar-get" id="bg" :style="[{height:vol+'px'},{}]"></div></div><img id="vol" src="../../assets/蒙版组 57@2x.png" @mouseover="hover('vol',require('../../assets/蒙版组 57@2x_1.png'))"@mouseout="unhover('vol',require('../../assets/蒙版组 57@2x.png'))"></div>

以上
有兴趣的大家可以一起讨论

vue中使用保利威视频播放器相关推荐

保利威视频播放器功能抽取，仅作为播放课程资源使用，去除多余功能
由于项目中所使用的场景,除了直播和回放,还有一个就是简单的课程资源播放器,然后取出整体的冗余,使用一个较为简单播放器来进行播放操作.保利威直播的demo和开发文档,在实际调试过程中,让人非常头疼,在g ...
vue中安装和使用Dplayer视频播放器
1.下载 npm下载 npm install dplayer - s npm i hls.js -s yarn下载 yarn add dplayer yarn add hls.js 2.使用 < ...
vue中使用腾讯云视频播放器
1.index.html <script src="//imgcache.qq.com/open/qcloud/video/vcplayer ...
Python笔记_84_我的订单_使用celery完成订单超时_视频播放_使用保利威视频加密
文章目录我的订单后端提供查询当前登录用户的订单列表信息前端请求获取当前登录用户的订单信息订单状态显示分析使用Celery的定时任务来完成订单超时功能视频播放使用保利威云视频服务来对视频进 ...
职教视频云：保利威、百家云与巨头对垒
配图来自Canva可画作为当下备受青睐的转型赛道之一,职业教育正在开启新的发展窗口,结合直播来打造玩法更多.互动更全的云课堂成为了众多职业教育玩家抢占先机的竞争高地. 面对职业教育线上化趋势,越来越 ...
保利威助力2022东亚海洋合作平台青岛论坛直播成功举办
保利威助力2022东亚海洋合作平台青岛论坛直播成功举办! 6月21日-23日,由自然资源部.山东省人民政府主办的2022东亚海洋合作平台青岛论坛隆重举办,来自全球的近400位嘉宾.1000多家企业参会 ...
保利威HTML5播放器使用文档（参考备用）
2018-11-19 长沙阴不好意思,是转载备用,不是原创的,图片为原创截图,呵呵. 功能特色: 倍速功能(0.5x / 1x / 2x ).加密.截图功能.模式切换.高清标清超清切换: 跑马灯 ...
保利威(polyv)加密视频的使用详解---python(基于drf/vue)
0. 注册账号,新人会免费用7天 polyv官网地址http://www.polyv.net/vod/ 一. 根据图片步骤,创建视频分类并上传测试视频 a. b. c. d. 二. 参数介绍 ...
第三方直播云平台（保利威和阿里云）直播集成demo
第三方直播云平台(保利威和阿里云)直播集成文档整理. 保利威: 保利威帮助中心 js demo <div id="player"></div> <sc ...
2022届秋招保利威前端面试
2022届秋招保利威前端面试原文网址:https://www.nowcoder.com/discuss/353158719997419520?sourceSSR=search 对象的浅拷贝和深拷贝如 ...

vue中使用保利威视频播放器

vue中使用保利威视频播放器相关推荐

最新文章

热门文章