Video 视频播放防作弊和禁止下载
1、实现效果 - 查看源码
- 实现视频可播放不能下载,禁止右键下载、F12源码打开链接下载
- 实现只在当前窗口播放,切换窗口、窗口最小化、窗口被遮挡停止播放,恢复后继续播放
在线demo:缓存完再播放 、 边播放边缓存 、 IE 测试防止播放作弊
兼容情况:
2、Video 禁止鼠标右键下载
<!-- 添加 οncοntextmenu="return false" --> <video src="地址" controls preload="auto" oncontextmenu="return false"></video>
3、禁止源码打开链接下载
主要使用 MediaSource 和 createObjectURL 实现。参考源码
html:
<video id="videoDemo" controls preload="auto" oncontextmenu="return false" ></video>
js:
//video/webm;codecs = "vp8,vorbis" 表示webm视频容器中的vp8视频编解码器和vorbis音频编解码器3 //video/ogg;codecs = "theora,vorbis" 表示ogg视频容器中的theora视频编解码器和vorbis音频编解码器 //video/mp4;codecs = "avc1.42E01E,mp4a.40.2" 表示基本的MEPG-4视频容器中的H.264视频编解码器和ACC音频编解码器 //video/mp4;codecs = "avc1.64001E,mp4a.40.2" 表示高质量的MEPG-4视频容器中的H.264视频编解码器和ACC音频编解码器 var video = document.getElementById("videoDemo");//mp4 格式 跟文件编码也有关var assetURL = "demo.mp4";var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';//webm 格式// var assetURL = "demo.webm";// var mimeCodec = 'video/webm;codecs="vorbis,vp8"';if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {var mediaSource = new MediaSource();video.src = URL.createObjectURL(mediaSource);mediaSource.addEventListener("sourceopen", sourceOpen);} else {console.error("Unsupported MIME type or codec: ", mimeCodec);}function sourceOpen() {console.log(this); // openvar mediaSource = this;var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);fetchAB(assetURL, function(buf) {console.log(buf);console.log(sourceBuffer);sourceBuffer.addEventListener("updateend", function() {console.log(mediaSource);mediaSource.endOfStream();//video.play(); //这里会报错就去掉了console.log(mediaSource.readyState); // ended });sourceBuffer.appendBuffer(buf);});}function fetchAB(url, cb) {console.log("fetchAB----",url);var xhr = new XMLHttpRequest();xhr.open("get", url);xhr.responseType = "arraybuffer";xhr.onload = function() {console.log(xhr.response);cb(xhr.response);};xhr.send();}
不兼容:IE(提示 Unsupported MIME type or codec: video/mp4; codecs=”avc1.42E01E, mp4a.40.2”)
待解决: 发现network还是可以看到视频链接的并且右键还是可以打开并且下载
(Safari可以)
4、监听浏览器最小化 - document.visibilityState
document.hidden
:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。
document.visibilityState
:表示下面 4 个可能状态的值
hidden
:页面在后台标签页中或者浏览器最小化
visible
:页面在前台标签页中
prerender
:页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded
:页面正在从内存中卸载
Visibilitychange
事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。
这样,我们可以监听 Visibilitychange
事件,当该事件触发时,获取 document.hidden
的值,根据该值进行页面一些事件的处理。
var videoPausedStatus; document.addEventListener('visibilitychange', function () {var isHidden = document.hidden;if (isHidden) {videoPausedStatus = true;if (!video.paused) {videoPausedStatus = false;video.pause();}} else {if (!videoPausedStatus) {video.play();}} }); // //IE // document.addEventListener('msvisibilitychange',function(){// console.log(document.msVisibilityState); // }); // //FF // document.addEventListener('mozvisibilitychange',function(){// console.log(document.mozVisibilityState); // }); // //chrome // document.addEventListener('webkitvisibilitychange',function(){// console.log(document.webkitVisibilityState); // });
5、判断当前页面是否被激活 - document.hasFocus()
解决不能监听页面被其他软件遮盖
setInterval(function () {if (document.hasFocus() != pageFocus) {pageFocus = document.hasFocus();if (!pageFocus) {if (!video.paused) {videoPausedStatus = false;video.pause();}} else {if (!videoPausedStatus) {video.play();}}} }, 1000);
原文:https://itguliang.github.io/post/1e5c2008.html
转载于:https://www.cnblogs.com/itguliang/p/10070855.html
Video 视频播放防作弊和禁止下载相关推荐
- Video 全屏播放、禁止拖动进度条、禁止下载
全屏播放 ios:默认全屏播放模式,不做处理: 安卓:默认小屏播放模式,特殊处理,以下是实现代码: /** * @description 安卓全屏播放模式 * @video DOM节点 */ fu ...
- html5的video播放器上禁止下载和禁止右键下载实现。
<video id="video" src="#" controls controlsList="nodownload" oncont ...
- h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
- video 视频播放
video 视频播放 前言 1.js全屏Api 一.回放 二.全屏播放 常用属性,事件 前言 1.js全屏Api 进入全屏if (ele.requestFullscreen) {ele.request ...
- vue引入video视频播放器(视频调用代码范例)
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
- 【杠精】问卷星防切屏解除方法-解除问卷星平台模拟考试防作弊切屏和最大化全屏的方法
只需一段简短的代码即可摧毁其防线!!! screenfull.request=function(){};onblur=null 今天有朋友反映没办法复制题目和答案 传送门 ↓ [杠精]解除问卷星平台模 ...
- 智慧教室—基于人脸表情识别的考试防作弊系统
需要源码的朋友请私信我!!!! 智慧教室-基于人脸表情识别的考试防作弊系统 课堂专注度分析 作弊检测 关键点计算方法 逻辑回归关键点 下载权重 使用 部分源码 课堂专注度及考试作弊系统.课堂动态点名, ...
- Windows编译安装AzerothCore魔兽世界开源服务端Lua脚本引擎Eluna和防作弊anticheat模块教程
Windows编译安装AzerothCore魔兽世界开源服务端Lua脚本引擎Eluna和防作弊anticheat模块教程 大家好,我是艾西今天和大家聊聊魔兽世界游戏内的脚步以及防作弊模块 Eluna是 ...
- DZ应用中心”对不起,您的网站已被设置禁止下载此应用“完美解决办法
应用中心开发平台Discuz!扩展中心防骗云平台专门针对所谓的盗版网站进行屏蔽网站授权,造成众多无辜站长用户无法更新和下载应用中心插件.模板,如果遇到下载提示:"对不起,您的网站已被设置禁止 ...
最新文章
- Unix / 类 Unix shell 中有哪些很酷很冷门很少用很有用的命令?(转)
- 关闭/开启 ubuntu 自动更新提示
- 电子老鼠闯迷宫pascal解题程序
- BZOJ2199: [Usaco2011 Jan]奶牛议会
- 面向对象与软件工程—团队作业1
- 温度表达转化(信息学奥赛一本通-T1013)
- c语言出勤率随机,c
- es6 数组排序_重读《学习JS数据结构与算法-第三版》- 第3章 数组 二
- android 数据存储之 Shared Preferences
- ASP.NET+AJAX解决网页打开等待问题
- ABAP EXPORTING IMPORTING
- 空手套白狼高手,一个小姑娘只用3天净赚5万,值得你去深思!
- Redis-Lua脚本(集成SpringBoot工程)
- html 字体样式斜体,CSS font-style斜体字体倾斜体样式
- 气传导蓝牙耳机优缺点有哪些?气传导耳机科普及推荐
- 段码液晶屏驱动芯片如何选择
- 最全的androidStudio插件
- 关于Unity中新版动画系统的使用
- 针对setContentView我犯的错误
- 水星UD6S网卡Linux驱动,水星UD6S驱动
热门文章
- python 自动填excel_使用python自动填充文字.docx从excel fi
- css3位移过度效果,详解Css3新特性应用之过渡与动画
- java 连接ftp 测试_ftp,ftp怎么进行连接,附上在Java环境下的配置教程
- oracle监听怎么关闭,Oracle数据库启动监听、关闭
- java 方法调用表达式_java lambda怎么表达式判断被调用接口名称和接口中方法
- python读取配置文件 分段_python配置文件读取
- java stack 实现_Swift Stack实现
- JDBC、JDBC连接池、JDBCTemplate
- Bloomberg监控系统的标准化和扩展
- 【Ian Goodfellow 强推】GAN 进展跟踪 10 大论文(附下载)