vue-video-player 拖动进度条触发暂停移动端展示倍速菜单

一、安装

npm install vue-video-player --save

二、组件内引入

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {components: {videoPlayer}
}

问题1：拖动进度条和播放结束会触发暂停

uniapp H5项目内，视频点击暂停需显示蒙层，但是vue-video-player 拖动进度条和播放结束时也会触发暂停，这种情况下不需要展示蒙层，查看源码后，发现DEFAULT_EVENTS不包含拖动事件，可以传入:events=“[‘seeking’,‘seeked’]”，通过正在拖动和拖动结束事件给个标识。

主要代码

<template><view class="video_box"><video-player @play="videoPlay" @pause="videoPause"@ended="videoEnded" @timeupdate="videoTimeUp" @loadeddata="videoLoaded"@seeking="videoSeeking" @seeked="videoSeeked" :events="['seeking','seeked']"class="video-player vjs-custom-skin" id="videoPlayer" ref="videoPlayer" :playsinline="true":options="playerOptions"></video-player><view class="subscribe-box flex justify-center align-center dir-col" v-if="isShowSubs && !isSeeking"><view class="mb-44 f-30 text-c">订阅后可观看完整课程</view><view class="mb-44 subs-btn" @click="toSubscribe">立即订阅</view></view></view></template>
<script>
export default {data() {return { videoSrc: '',durationTime: '', // 视频总时常currentTime: '', // 当前播放进度时长 isShowSubs:false,playerOptions: {playbackRates: [0.8, 1.0, 1.5, 2.0], // 可选的播放速度autoplay: true, // 如果为true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 是否视频一结束就重新开始。preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: 'zh-CN',aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "video/mp4", // 类型src: '' // url地址}],poster: '', // 封面地址notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: false, // 是否显示剩余时间功能fullscreenToggle: true // 是否显示全屏按钮}},isSeeking: false,isVideoEnd:false}},watch: {videoSrc(newVal) {this.$set(this.playerOptions.sources[0], 'src', newVal)}},onLoad() {this.initVideo()},  methods: { //初始化视频内容initVideo(){//调用接口获取视频链接和进度this.videoSrc = res.url;this.progress = res.progress; this.$nextTick(() => {  this.$refs.videoPlayer.player.play();})},// 视频信息加载完成，获取总时长，若接口返回进度，断点播放videoLoaded(item) {this.durationTime =  item.cache_.duration  if (this.progress > 0) { item.currentTime(Number(this.durationTime) * Number(this.progress));   }},// 当前播放进度videoTimeUp(item) {this.currentTime = item.cache_.currentTime },// 正在拖动videoSeeking(item) {this.isSeeking = true},// 拖动结束videoSeeked(item) {this.isSeeking = false},// 点击播放videoPlay() {//清除定时器if (this.pauseTimer) {clearTimeout(this.pauseTimer);}},// 触发暂停videoPause(item) {//利用定时器延迟this.pauseTimer = setTimeout(() => {if(this.isVideoEnd)returnif (this.isSeeking)return// 展示蒙层this.isShowSubs = true}, 100);}, // 播放结束videoEnded() {this.isVideoEnd=true},}
}
</script>

问题2：微信h5无法自动播放

initVideo(){ this.$nextTick(() => {  let video = this.$refs.videoPlayer.player;// 微信内置浏览器内置方法WeixinJSBridgeif (window.WeixinJSBridge) {WeixinJSBridge.invoke('getNetworkType', {},  (e) =>{video.play();}, false);}  else video.play();})
}

问题3：移动端倍速按钮改写

项目中视频播放主要在移动端H5，倍速点击无法显示菜单去选择，只能点击倍速按钮一直切换，vue-video-player底层用的video.js，要去改写PlaybackRateMenuButton

import _videojs from 'video.js'
const videojs = window.videojs || _videojs
data() {return { playerOptions:{controlBar: {playbackRateMenuButton: false //隐藏原始播放速率按钮}}}
}
methods:{// 在播放前调用initRate() {//防止切换视频显示多个倍速按钮this.$refs.videoPlayer.player.getChild('controlBar').removeChild('definePlaybackRateMenuButton');//插件中的倍速菜单类名this.menu = this.$refs.videoPlayer.player.controlBar.el_.querySelector('.vjs-menu')//扩展原来的倍速按钮let definePlaybackRateMenuButton = videojs.extend(videojs.getComponent('PlaybackRateMenuButton'), { handleClick: function() { //video.js的样式会覆盖display:block, 需要移除this.menu.el_.classList.remove('vjs-hidden') //选择倍速后倍速菜单会隐藏，但是再次点击倍速按钮样式为block,无法显示菜单，所以这里处理为每次点击展示this.menu.el_.style.display ='block';},//这个方法必须，因为新组件需要自己的rates数组。player的option里面定义的只是PlaybackRateMenuButton原始组件的rates数组playbackRates: function() {return [2.0, 1.5, 1.25, 1.0, 0.8]}});//注册定义的新rate组件videojs.registerComponent('definePlaybackRateMenuButton', definePlaybackRateMenuButton);//将组件添加到控制栏的按钮组中，5是添加的位置this.$refs.videoPlayer.player.getChild('controlBar').addChild('definePlaybackRateMenuButton', {}, 5); }
}

/* js配置将倍速隐藏了，所以这里需要展示 */
.vjs-control-bar .vjs-playback-rate{display: block !important;
}

问题4：video按钮样式

默认的底部按钮样式不符合UI，需要重写

.video_box {position: sticky;top: 0;z-index: 99;width: 100%;height: 484rpx;overflow-x: hidden;.vjs-custom-skin {/deep/ .video-js {width: 100%;height: 484rpx;}/*播放按钮设置成宽高一致，圆形，居中*//deep/ .video-js .vjs-big-play-button {background-color: rgba(255, 255, 255, 0.7) !important;border-radius: 50% !important;width: 1.6em !important;height: 1.6em !important;margin-top: -1em !important;margin-left: -1em !important;color: #000 !important;border: none !important;}/* controls 播放按钮位置调整 *//deep/ .video-js .vjs-big-play-button .vjs-icon-placeholder:before {top: -12rpx;}/* controls 背景透明度调整 *//deep/ .video-js .vjs-control-bar {background-color: rgba(0, 0, 0, 0.7) !important;}/* controls 按钮去除默认样式 *//deep/ .video-js .vjs-control-bar .vjs-button {background-color: rgba(255, 255, 255, 0) !important;color: #fff !important;border: none !important;outline: none;}/* controls 调整IOS按钮不水平居中的问题 *//deep/ .video-js .vjs-control-bar .vjs-icon-placeholder:before {width: 76rpx !important;height: 84rpx !important;line-height: 84rpx !important;}/*进度条背景轨道*//deep/ .video-js .vjs-slider {background-color: rgba(255, 255, 255, 0.45) !important;border-radius: 1em;}/*去除画中画按钮*//deep/ .vjs-picture-in-picture-control {display: none;}} /*进度条进度*/.vjs-custom-skin /deep/ .video-js .vjs-play-progress,.vjs-custom-skin /deep/ .video-js .vjs-volume-level {border-radius: 1em;}}

vue-video-player 拖动进度条触发暂停移动端展示倍速菜单相关推荐

vue点击拖动进度条
需要实现拖拽和点击进度条的功能,但是很多插件都只实现拖拽事件,基于以上两个原因,自己封装了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置) ...
JS video 禁止拖动进度条
需要实现一个效果,视频加载的过程中禁止拖动进度条快进. 开始呢我想着把控件禁掉,自动播放解决. <video id="video" src="http://kuan ...
Video 全屏播放、禁止拖动进度条、禁止下载
全屏播放 ios:默认全屏播放模式,不做处理: 安卓:默认小屏播放模式,特殊处理,以下是实现代码: /** * @description 安卓全屏播放模式 * @video DOM节点 */ fu ...
video播放器禁用or启用拖动进度条
做视频教育网站客户提出一个需求: 视频学习完毕时,在观看视频能够拖动进度条.未观看完毕时,禁止拖动视频进度条,只能倍速播放; 用的插件的 videojs一开始用的是 disableProcess.j ...
异常：谷歌浏览器video标签播放视频不能拖动进度条
谷歌浏览器video标签播放视频不能拖动进度条当前端video的src不是直接使用视频文件的地址,而是通过后台下载接口返回文件流时,后台返回流因为没为response的header设置一些参数,会在 ...
关于前端video标签视频无法拖动进度条快进问题(Django)
因为后端返回的是视频的文件流,并不是视频文件地址.后端返回流的时候要为header设置一些参数,否则部分浏览器会出现问题(如Google Chrome...). django中常用返回文件流写法: c ...
uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码一 , template中 <video id="myVide ...
html如何设置视频不能拖动,video标签播放视频不能拖动进度条(示例代码)
因为你的video的src不是直接使用视频文件的地址,而是通过后台接口返回文件流,后台返回流的时候没为response的header设置一些参数,否则会在部分浏览器有问题 String rangeSt ...
【网页上视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何可继续播放】
面对网页视频无法加速时如何进行加速播放遇到一 zhengzhi 刷题任务时 ,发现无法拖动进度条,也没有加速播放并且鼠标一失焦就会自动暂停时,让我乖乖看完是不可能,因此找了一个解决方案快速完成该任务 ...

vue-video-player 拖动进度条触发暂停移动端展示倍速菜单

一、安装

二、组件内引入

问题1：拖动进度条和播放结束会触发暂停

主要代码

问题2：微信h5无法自动播放

问题3：移动端倍速按钮改写

问题4：video按钮样式

vue-video-player 拖动进度条触发暂停移动端展示倍速菜单相关推荐

最新文章

热门文章

vue-video-player 拖动进度条触发暂停移动端展示倍速菜单

一、安装

二、 组件内引入

问题1：拖动进度条和播放结束会触发暂停

主要代码

问题2：微信h5无法自动播放

问题3：移动端倍速按钮改写

问题4：video按钮样式

vue-video-player 拖动进度条触发暂停移动端展示倍速菜单相关推荐

最新文章

热门文章

二、组件内引入