video标签监听播放暂停，隐藏下载按钮

/* 隐藏视频默认的下载按钮*/
video::-webkit-media-controls-enclosure {overflow:hidden;}

video::-webkit-media-controls-panel {width: calc(100% + 30px);}

/*隐藏音频的默认下载按钮*/

audio::-webkit-media-controls-enclosure {overflow:hidden;}
audio::-webkit-media-controls-panel {width: calc(100% + 30px);}

//播放视频，并且监听视频是否播放结束
init.public.playVideo=function(target){

//点击播放按钮，隐藏遮罩层和自定义的播放按钮
$('#'+target).next('.video-mask').hide();
document.getElementById(target).play();
var md=document.getElementsByClassName("common-video")[0];

//监听播放结束之后显示遮罩层和播放按钮

md.addEventListener("ended",function(){
$('#'+target).next('.video-mask').show();
});
}
//点击视频暂停播放
init.public.pauseVideo=function(target){
document.getElementById(target).pause();
$('#'+target).next('.video-mask').show();
}
//监听视频的播放状态
init.public.judeVidestate=function(){
var myVideo=document.getElementById("_vid");
myVideo.addEventListener('play',function(){
$('.video-mask').hide();
});
myVideo.addEventListener('pause',function(){
$('.video-mask').show();
});
}

video标签监听播放暂停，隐藏下载按钮相关推荐

video标签监听事件
<video id="myVideo" controls="controls" poster='预览图' preload="auto" ...
【HTML】video标签处理隐藏下载按钮等
[HTML]video标签处理隐藏下载按钮等隐藏下载按钮增加 controlsList="nodownload" 属性 <video controlsList=&quo ...
vue项目视频实现键盘快进快退，音量调大小及监听播放事件
直接上代码 <div style="padding-top:56.25%" ><video style="width:100%;height:672px ...
使用video标签，连续播放无限个mp4(h264封装的)视频时，画面会闪烁的问题解决
采用的预加载方法,使用两个video标签加一个js中的Array(存储还没播放的视频.) html页面代码,除了下面的div之外,还需导入一个jquery的库我导的jquery-3.4.1.js这个. ...
微信小程序音乐播放控件，监听播放事件，音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体播放器播放之后闪退,是因为音乐的链接失效了所以闪退监 ...
直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...
html5 video/audio 监听事件属性及方法
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>au ...
纯JS Video标签的视频播放、暂停、结束、长度事件 Event 信息
在HTML5后,网站的视频会使用视频标签(video标签)进行播放.以下是该标签的一些事件信息 html <video id="videoDom" controls=&quo ...
微信 jssdk 语音监听播放结束的坑
//监听播放完毕wx.onVoicePlayEnd({success: (res) => {this.onStopPlay();}});//播放录音wx.playVoice({localId: ...

video标签监听播放暂停，隐藏下载按钮

video标签监听播放暂停，隐藏下载按钮相关推荐

最新文章

热门文章