利用JS控制插入视频的播放/暂停/快进等功能

利用JS控制插入视频的播放/暂停/快进等功能
1、页面样式

2、HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 内部样式 -->
<style>p{width:400px;height:400px;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin: 0px;background-color: red;display: flex;justify-content: center;align-items: center;}span{display: inline-block;cursor: pointer;}section{width: 960px;height: 544px;position: relative;}body{margin: 0px;}
</style>
<body><section><!-- poster：插入封面图片   --><video src="./视频.mp4" poster="./轮回眼.gif" ></video><input type="button" value="播放" class="begin">  <input type="button" value="静音"><input type="button" value="后退5S"><input type="button" value="快进5S"><input type="button" value="2倍播放"><input type="button" value="0.5倍播放"><input type="button" value="全屏播放"><p>这是一个广告<span>X</span></p></section><script src="./高级.js"></script>
</body></html>

3、js主要涉及到的方法
.play()：播放
.pause();暂停
.volume=1;【设置音量，取值范围为0-1】
.currentTime+=5;【控制进度条，实现快进，后退功能】
.playbackRate=0.5;【倍速播放】
launchFullscreen(vide);【全屏播放功能】
4、案例

let vide=document.getElementsByTagName("video")[0];// // 播放
let begin=document.getElementsByClassName("begin")[0];
// begin.addEventListener("click",function(e){//   if(this.value=="播放"){//       this.value="暂停";
//     //   播放
//       vide.play();
//   }else if (this.value=="暂停"){//     this.value="播放";
//     // 暂停
//     vide.pause();
//   }
// })let louder=document.querySelector(`input[value="静音"]`);
louder.addEventListener("click",function(e){// 设置视频播放声音（取值0-1；0是静音，1是最大声音）if(this.value=="静音"){this.value="取消静音";//   播放vide.volume=0;}else if( this.value=="取消静音"){this.value="静音"// 暂停vide.volume=1;}
})// 获取当前播放的时间的（快进后退）
let quickly=document.querySelector(`input[value="快进5S"]`);
quickly.addEventListener("click",function(e){vide.currentTime+=5;
})// 后退
let slowly=document.querySelector(`input[value="后退5S"]`);
slowly.addEventListener("click",function(e){// currentTime：当前播放的时间vide.currentTime-=5;
})// 倍速播放(0.1-16)
let fast2=document.querySelector(`input[value="2倍播放"]`);
fast2.addEventListener("click",function(e){// currentTime：当前播放的时间vide.playbackRate=2;
})// 倍速播放
let slower=document.querySelector(`input[value="0.5倍播放"]`);
slower.addEventListener("click",function(e){// currentTime：当前播放的时间vide.playbackRate=0.5;
})// 暂停出现广告，关闭广告继续播放
// 获取广告节点
let pEle=document.getElementsByTagName("p")[0];
let turnOff=document.getElementsByTagName("span")[0];
pEle.style.display="none"begin.addEventListener("click",function(e){if(this.value=="播放"){this.value="暂停";//   播放vide.play();pEle.style.display="none"}else if (this.value=="暂停"){this.value="播放";// 暂停vide.pause();pEle.style.display="block"pEle.style.display="flex";pEle.style.justifyContent="center";pEle.style.alignItems="center";}
})turnOff.addEventListener("click",function(e){pEle.style.display="none"vide.play();begin.value="暂停"})// 全屏播放功能let showbig=document.querySelector(`input[value="全屏播放"]`);showbig.addEventListener("click", function() {launchFullscreen(vide);// v1.webkitRequestFullscreen(); //谷歌浏览器全屏
});
//解决浏览器兼容性
function launchFullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}
}

利用JS控制插入视频的播放/暂停/快进等功能相关推荐

html按钮控制播放暂停,外部按钮控制video视频的播放暂停
.stop { background-color: #FF2D2D; width: 80px; height: 30px; line-height: 30px; text-align: center; ...
解决视频文件播放不能快进问题
视频修复器(VideoFixer)可以修复不能拖动或不能播放的 divx.avi.asf.wmv.wma.rm.rmvb 等文件.非常好用
【FFmpeg】ffplay 播放视频命令 ( 播放 | 暂停 | 停止 | 音量控制 | 进度控制 | 音频流 / 视频流 / 字幕流 / 节目切换 )
FFmpeg 系列文章目录 [FFmpeg]Windows 搭建 FFmpeg 命令行运行环境 [FFmpeg]FFmpeg 相关术语简介 ( 容器 | 媒体流 | 数据帧 | 数据包 | 编解码器 ...
最近发现kingeditor编辑器插入视频无法播放
最近发现kingeditor编辑器插入视频无法播放最近用到kingEditor编辑器,发现在添加上传视频的时候(下图)是无法播放的,而且在查看源代码的时候发现是embed标签并不是video标签,于 ...
基于HTML5实现音乐播放暂停及快进后退功能
近年来,H5的流行,加入许多标签,导致一些新手看起来有些懵,有点不太会用新标签,今天,举一个H5里比较常用的标签,audio标签,这个标签的作用在于添加一个音乐标签,可以实现它的样式,暂停,播放,快进 ...
html怎么设置视频不能快进,【浏览器插件】Video Speed Controller – 网页视频倍速、快进、回放功能0.07～16 倍...
简单介绍 Video Speed Controller 是一个专门用来为视频添加倍速播放.快进10秒.回放10秒功能的 Chrome.Firefox 扩展,适合于任何 HTML5 视频播放器,支持从 ...
MediaPlayer+SeekBar暂停快进快退
MediaPlayer+SeekBar暂停快进快退首先是,如何能够播放一个视频(网络权限小伙伴们自己盘上) 然后是进度条Seekbar 然后是点击时改变视频播放进度最后是暂停和继续, INTERE ...
腾讯视频客户端如何设置快进速度
今天小编给大家分享"腾讯视频客户端如何设置快进速度".大家都知道腾讯视频作为中国最大的视频分享网站,它有非常全面的视频资源.而我们只要通过下载这个客户端,就可以完全的将这些视频尽收 ...
腾讯视频投屏显示无法连接服务器,腾讯视频投屏不能快进
腾讯视频投屏不能快进似乎是很多网友遇到的问题,因为不能快进,很多网友要浪费时间去看重复的镜头,很是烦人,那么腾讯视频投屏不能快进要怎么办呢?下面一起来了解一下吧! 腾讯视频投屏不能快进解决办法: 手机 ...
被限制的ckplayer播放器如何实现倍速播放和快进
很多网络教育视频都喜欢用ckplayer播放器,ckplayer是开源的,可以限制学员拖曳进度条和倍速播放.下面介绍ckplayer两个BUG: 1.F12 进入开发者模式,在控制台console输入 ...

利用JS控制插入视频的播放/暂停/快进等功能

利用JS控制插入视频的播放/暂停/快进等功能相关推荐

最新文章

热门文章