Video 全屏播放、禁止拖动进度条、禁止下载

全屏播放

ios：默认全屏播放模式，不做处理；
安卓：默认小屏播放模式，特殊处理，以下是实现代码；

/**
* @description 安卓全屏播放模式
* @video DOM节点
*/
function fullscreen(video){if (video.requestFullscreen) {video.requestFullscreen()} else if (video.msRequestFullscreen) {video.msRequestFullscreen()} else if (video.mozRequestFullScreen) {video.mozRequestFullScreen()} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen()} else {console.log('Fullscreen API is not supported')}
}

屏蔽全屏模式

安卓：默认小屏播放模式，不做处理；
ios：默认全屏播放模式，特殊处理，以下是实现代码；

添加"webkit-playsinline"、“playsinlin” 这两个属性即可

<videoref="video":src="videoSrc":poster="bgImg"webkit-playsinlineplaysinlincontrols="controls"preload="meta"x-webkit-airplay="allow"x5-video-player-type="h5"x5-video-player-fullscreen="true"x5-video-orientation="landscape|portrait"currentTime="0">your browser does not support the video tag
</video>

禁止拖动进度条

方法1：每隔500毫秒记录一次视频播放的时间节点，如果是当前播放时间与上一次记录的播放时间大于1秒，说明有拖动非正常播放速度，这时候设置播放时间为上一次记录的播放时间。这个方法有缺陷就是如果我们长时间按住进度条然后拖动仍然可以拖动，需要改进方法。
方法2: 模拟一个视频播放的控制栏controls，最佳。
方法3：用一个蒙层遮住，不太实用，全屏播放立马就失效了
以下是方法1的代码实现：

// 禁止拖动进度条
const timer = setInterval(function() {const currentTime = video.currentTime// console.log(currentTime, originTime)if (currentTime - originTime > 1) {video.currentTime = originTime}originTime = currentTime
}, 500)

禁止下载

添加属性controlslist=“nodownload”

<videoref="video":src="videoSrc":poster="bgImg"controls="controls"controlslist="nodownload"preloadautoplay>your browser does not support the video tag
</video>

Video 全屏播放、禁止拖动进度条、禁止下载相关推荐

htmlVideo禁止拖动进度条禁止快进
video标签不写controls属性就不会显示播放 / 暂停 / 以及滚动条自定义添加2个按钮控制播放和暂停 <body><div class="box" ...
uniapp实现video视频禁止拖拽快进功能,禁止拖动进度条快进
之前写了一篇文章 , 禁止快进的 , 但刚刚发现在uni-app中实现不了 , 所以又上网找别的方法,话不多说, 上代码一 , template中 <video id="myVide ...
JS video 禁止拖动进度条
需要实现一个效果,视频加载的过程中禁止拖动进度条快进. 开始呢我想着把控件禁掉,自动播放解决. <video id="video" src="http://kuan ...
Chromium为视频标签 video 全屏播放的过程分析
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在Chr ...
Chromium为视频标签video全屏播放的过程分析
在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式 ...
h5 video全屏播放
相关链接: H5 video 的使用 H5 video开发问题及相关知识点由于全屏播放在移动web上的兼容问题,尤其是在iOS上,让全屏本应该比较简单的操作,根据业务的需求,有时候会有些复杂.这里查 ...
Android播放器拖动进度条的小图预览
播放器拖动预览,让用户提前了解视频的波澜迭起情节,先走马观花看一遍精彩部分,满足一下好奇心,这就是拖动预览的意义所在.那么我们该如何打造高性能.高效率.高可靠的拖动预览呢?首先,小图预览强调足够小,因 ...
微信小程序video组件/腾讯视频插件，禁止拖动进度条，使用遮罩层的方式实现
话不多说,直接上代码 wxml文件这里是原生video组件的方式 <video enable-progress-gesture="false" ><cover- ...
video播放器禁用or启用拖动进度条
做视频教育网站客户提出一个需求: 视频学习完毕时,在观看视频能够拖动进度条.未观看完毕时,禁止拖动视频进度条,只能倍速播放; 用的插件的 videojs一开始用的是 disableProcess.j ...