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();     
}); 
}




  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在video标签中设置播放按钮,可以使用以下步骤: 1. 首先,使用一个div元素将video标签包裹起来。这个div将作为播放按钮的容器。 2. 在这个div中,添加一个按钮元素,比如使用一个<i>标签,并为它添加一个合适的类名,比如"play-button"。 3. 使用CSS来设置这个播放按钮的样式。可以为这个按钮设置一个合适的背景图像,比如一个播放图标,并调整其尺寸和位置,使其看起来像一个播放按钮。 4. 为这个按钮添加点击事件的监听器。在事件处理函数中,使用JavaScript来控制video标签播放暂停。 示例代码如下: HTML: ```html <div class="video-container"> <video src="video.mp4"></video> <i class="play-button"></i> </div> ``` CSS: ```css .video-container { position: relative; width: 300px; height: 200px; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background-image: url(play-button.png); background-size: cover; cursor: pointer; } ``` JavaScript: ```javascript var video = document.querySelector('video'); var playButton = document.querySelector('.play-button'); playButton.addEventListener('click', function() { if (video.paused) { video.play(); } else { video.pause(); } }); ``` 这样,用户点击播放按钮时,视频将开始播放暂停。记得替换示例代码中的视频路径和播放按钮图像路径为你实际使用的资源路径。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值