关于VIDEO.JS播放器控制栏播放按钮点击问题

关于如何调用video.js组件作为播放器实现视频播放功能，网上有很多相关帖子，这里就不详细展开了。但在众多帖子里面，都没有提到网页版video的控制栏播放按钮点击问题，特此留贴记录一番。

症状是如下图所示。

这个按钮对应的是控制栏playToggle 按钮开关。虽然通过别的代码已经实现了点击整个屏幕范围播放停止功能，但是对于这个控制栏按钮点击无效的小瑕疵，还是必须解决的。

经过网上一轮搜寻，发现它可以有一些方法去实现这个按钮的点击。例如监听播放器的play和pause方法。实现方法如下：

<video ref="my_videos"id="myVideo"@play="videoPlay"@pause="videoPause"class="video-js vjs-default-skin vjs-big-play-centered"x-webkit-airplay="allow"x5-video-player-type="h5"type="application/x-mpegURL"allowsInlineMediaPlayback="YES"webview.allowsInlineMediaPlayback="YES"><source :src="this.courseDetailItem.FileUrl"type="video/mp4":poster="this.courseDetailItem.CoverUrl"/></video>

关键点在于@play="videoPlay"和@pause="videoPause"这两个参数就是设置对应控制台播放暂停按钮点击方法。

而当我简单设置了如下代码时：

videoPlay(){console.log("开始播放....");this.$refs.my_videos.play();},
videoPause(){console.log("videoPause....");this.$refs.my_videos.pause();}

却发生了播放暂停不停切换的神奇效果。为了避免两个按钮不停触发，所以只能添加标识符，并且延时改变其属性。最终代码就如下：

videoPlay(){console.log("开始播放....");//触发video的播放事件if(this.videoPauseShow === true) {this.$refs.my_videos.play();setTimeout(() => {this.videoPauseShow = false;}, 100);}},
videoPause(){console.log("videoPause....");//触发video的播放事件if(this.videoPauseShow === false) {this.$refs.my_videos.pause();setTimeout(() => {this.videoPauseShow = true;}, 100);}

这样就可以避免播放暂停两者不停切换并且能实现点击事件。

小小原创文章，不入大神法眼。祝各位程序猿码运兴隆，无BUG一身轻。

关于VIDEO.JS播放器控制栏播放按钮点击问题相关推荐

SkeyeWebPlayer.js H5播放器开发之播放器控制栏部分功能的实现（四）
SkeyeWebPlayer.js H5免费播放器支持Websocket-RTSP播放; 支持 m3u8(HLS) 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持 HEVC/H265 播 ...
C# 视频监控系列（13）：H264播放器——控制播放和截图
C# 视频监控系列(13):H264播放器--控制播放和截图前言本该把这部分和上一篇合成一篇的,无奈挣扎半天,还是想对称起来,客户端3篇.服务器端3篇--所有播放器也勉强凑3篇吧(封装API的文章 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
H5播放器内置播放视频（兼容绝大多数安卓和ios）
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...
搭建webassembly网页播放器(五)---网页播放器开发
在前面的章节中,我们解决emcc环境以及使用emcc来编译ffmpeg得到网页开发中可以使用的js库,本章节,我们就来实现一个简单的播放器. 视频课程以及源码下载: https://edu.csdn. ...
React-Native之播放器全屏播放
React-Native之播放器全屏播放前言我们要在react-native中实现一个音/视频的播放器,首先就要使用大名鼎鼎的react-native-video库,该库在github上有5.3k ...
YouTube iframe嵌入式播放器及播放器参数自动播放，循环播放，播放列表，不显示 YouTube 徽标
YouTube 嵌入式播放器及播放器参数概览本文档介绍如何在应用中嵌入 YouTube 播放器,并定义了 YouTube 嵌入式播放器可以使用的参数. 通过将参数附加到 iframe 网址末尾,您 ...
ios系统html播放音频播放器,iOS音频播放之AVAudioPlayer，AVPlayer，AVQueuePlayer
本文以婚语APP为例,来讲解集体使用方法. 在婚语APP中,分别使用了AVAudioPlayer,AVPlayer,AVQueuePlayer来实现音频播放功能,下面以婚语的实际需求分别介绍它们的使用 ...
（1）H5实现音乐播放器【正在播放-歌词篇】
近期闲来无事,就想着复习一下前端的东西,然后正好跟朋友搞了一个公共开放的音乐api接口,就想着写一个音乐播放器玩玩! 话不多说,直接上图,然后上代码 [播放器显示正在播放] 实现功能: 1:歌词随着歌 ...

关于VIDEO.JS播放器控制栏播放按钮点击问题

关于VIDEO.JS播放器控制栏播放按钮点击问题相关推荐

最新文章

热门文章