vue项目视频实现键盘快进快退，音量调大小及监听播放事件

直接上代码

<div style="padding-top:56.25%" ><video style="width:100%;height:672px;position: absolute;bottom: 0;right: 0;":src="视频地址":poster="视频封面海报图地址"webkit-playsinlineplaysinlinepreload="load"controls="controls"></video>
</div>

video标签有下载按钮要想避免，在标签里面加controlsList="nodownload"，即：

<div style="padding-top:56.25%" ><video style="width:100%;height:672px;position: absolute;bottom: 0;right: 0;":src="视频地址":poster="视频封面海报图地址"webkit-playsinlineplaysinlinecontrolsList="nodownload"preload="load"controls="controls"></video>
</div>

用video就不需要多余的js方法去监控键盘事件，直接上面这一串代码就行。但是跟键盘控制vue-video-player一样也必须选中视频区域pc端才能实现这一效果，相比之下这个好一点的就是移动端不需要另写js方法，移动端也适用，只是pc端移动端表现形式不一样而已。

html video官方文档链接 HTML <video> 标签 | 菜鸟教程

补充一点：触发视频暂停播放事件给标签定义一个名字，直接上代码

<div style="padding-top:56.25%" ><video style="width:100%;height:672px;position: absolute;bottom: 0;right: 0;"ref="videoPlayer":src="视频地址":poster="视频封面海报图地址"webkit-playsinlineplaysinlinecontrolsList="nodownload"preload="load"controls="controls"></video>
</div>

this.$refs.videoPlayer.pause()// 暂停
this.$refs.videoPlayer.play()// 播放

js监听视频播放事件；参考vue如何实现对video的监听？_zlting~的博客-CSDN博客_vue 监听videohttps://blog.csdn.net/sunshineting2/article/details/107080661

mounted() {this.$refs.videoPlayer.addEventListener('play', this.handlePlay)},methods：{handlePlay() {this.$refs.videoPlayer.play()},},

这个有个弊端，在ipad上在微信浏览器中没有倍速显示，我在开发的项目中需要在各种浏览器都有倍速，所以就弃用了，去用的daplyer插件，移步看我另一个播放视频控件

vue引用DPlayer播放器_唐屁屁儿的博客-CSDN博客_dplayer集成vue

这个插件没有快进快退音量调节需要必须选中视频区域问题，个人觉得比vue-video-player和h5 video 这俩好用

vue项目视频实现键盘快进快退，音量调大小及监听播放事件相关推荐

Silverlight 5 beta新特性探索系列:9.视频快进快退和TextSearch对象对文字项查询
本节讲诉两个新特性:一.在Silverlight 5中可以控制MediaElement对象播放的视频进行快进快退控制.二.在Silverlight 5中的文字项进行搜索查询. 一.对于MediaEle ...
python 循环播放音乐_python gstreamer实现视频快进/快退/循环播放功能
这篇文章主要介绍了python gstreamer 实现视频快进/快退/循环播放功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 Gstreamer到底是个啥? ...
如何实现视频的快进快退功能（整理）
最近在研究视频的播放的快进快退功能,先把相关的调研结果整理一下,做个记录. 裸的H264码流,如果实现快进快退必须基于 I 帧才能实现:在播放前对整个码流进行统计,总共有多少帧,所有的 I 帧在什么位 ...
python 网站视频快进_python gstreamer实现视频快进/快退/循环播放功能
Gstreamer到底是个啥? GStreamer 是一个基于pipeline的多媒体框架,基于GObject,以C语言写成. 应用GStreamer这个这个多媒体框架,你可以写出任意一种流媒体的应 ...
ffmpeg播放器快进快退(七)
指导7:快进快退处理快进快退命令现在我们来为我们的播放器加入一些快进和快退的功能,因为如果你不能全局搜索一部电影是很让人讨厌的.同时,这将告诉你av_seek_frame函数是多么容易使用. 我们 ...
十、FFmpeg视频播放之快进快退
1.处理快进快退(seek)命令本章我将给大家讲解怎么给我们的播放器添加快进.快退.定位功能,这也是几乎所有播放器都有的功能.为实现此功能,我们要用到av_seek_frame函数,这个函数非常简单 ...
Java后端处理video快进快退播放以及断点续传的原理和代码
video 快进快退的原理: 通过对所在服务器上的流媒体进行skip操作,然后再response的header里设置相应的Content-Range以及其他属性,来控制视频流的快进快退的功能. 断点续 ...
Android FFmpeg系列——7 实现快进/快退功能
Android FFmpeg系列--0 编译.so库 Android FFmpeg系列--1 播放视频 Android FFmpeg系列--2 播放音频 Android FFmpeg系列--3 C多线 ...
MediaPlayer+SeekBar暂停快进快退
MediaPlayer+SeekBar暂停快进快退首先是,如何能够播放一个视频(网络权限小伙伴们自己盘上) 然后是进度条Seekbar 然后是点击时改变视频播放进度最后是暂停和继续, INTERE ...

vue项目视频实现键盘快进快退，音量调大小及监听播放事件

vue项目视频实现键盘快进快退，音量调大小及监听播放事件相关推荐

最新文章

热门文章