html5视频播放,实现防止下载（一）

一、html5视频播放

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-button vjs-big-play-centered" controlspreload="auto" poster=""><source :src="mp4VideoUrl" type="video/mp4"><source :src="m3u8VideoUrl" type="application/x-mpegURL">
</video>

图片如下：

二、正常播放的时候，在PC端存在一些下载工具的时候，会显示能下载，如下图，点击可以直接下载对应的视频

三、还有一种右键保存下载。

四、既然知道了问题原因所在，那么就需要想想怎么防止别人下载呢？为什么要防止别人下载呀？当然是因为由于播放的视频涉及版权问题,所以需要禁止video标签自带的下载功能。好，到此，我们禁止自带下载功能。

<!DOCTYPE html>
<html>
<body><video width="320" height="240" controls="true" autoplay="autoplay"><source src="/i/movie.ogg" type="video/ogg" /><source src="/i/movie.mp4" type="video/mp4" /><source src="/i/movie.webm" type="video/webm" /><object data="/i/movie.mp4" width="320" height="240"><embed width="320" height="240" src="/i/movie.swf" /></object>
</video></body>
</html>

<!DOCTYPE html>
<html>
<body><video width="320" height="240" controls="true" controlslist="nodownload" autoplay="autoplay"><source src="/i/movie.ogg" type="video/ogg" /><source src="/i/movie.mp4" type="video/mp4" /><source src="/i/movie.webm" type="video/webm" /><object data="/i/movie.mp4" width="320" height="240"><embed width="320" height="240" src="/i/movie.swf" /></object>
</video></body>
</html>

五、需要禁止了控制条中的下载，但右键的视频保存还是存在的。这个也需要屏蔽一下，简单粗暴一下，如下：

<!DOCTYPE html>
<html>
<body>
<div id="videoDiv">
<video id="video1" width="320" height="240" controls="true" controlslist="nodownload" autoplay="autoplay"><source src="/i/movie.ogg" type="video/ogg" /><source src="/i/movie.mp4" type="video/mp4" /><source src="/i/movie.webm" type="video/webm" /><object data="/i/movie.mp4" width="320" height="240"><embed width="320" height="240" src="/i/movie.swf" /></object>
</video>
</div>
</body>
</html>
<script>
window.oncontextmenu=function(e){//取消默认的浏览器自带右键 很重要！！e.preventDefault();
}
// 如果使用jquery,如下代码也可以
//$('#video1').bind('contextmenu',function() { return false; });
</script>

但事实上这个方法不能做到真正的屏蔽。使用如下方法即可破解，F12，打开开发者工具，在控制台里面输入window.οncοntextmenu=null，托托的就破解了

如果使用$('#video1').bind('contextmenu',function() { return false; });那么直接$('#video1').unbind('contextmenu');即可。

至此，是不是很神奇！！！

六、怎么才能够对video标签的另存下载进行真正的屏蔽；

（1）、服务器端对视频地址加密。

（2）、增加视频下载的难度。

html5视频播放,实现防止下载（一）相关推荐

HTML5 视频播放器 WordPress插件
HTML5 视频播放器 WordPress插件. 插件特点:3个类型的播放列表效果,5个皮肤可选,支持 .MP4 和.WEBM ,自动隐藏控制条,海报图像,播放列表图像,支持音量控制,可以添加视频描述 ...
html5视频播放事件相关
html5视频播放事件相关使用: 监听视频播放结束 var myVideo = $("#videoPlayExecute"); // 监听视频播放结束 myVideo[0].ad ...
超炫酷的HTML5视频播放器支持手机移动页面
前几天在工作中遇到一个问题就是要在网页中放入视频,那么问题来了H5自己的播放器不太漂亮.这样子的怎么可能拿得出手呢.要的就是要有装B范对不对啊嘻嘻(●''●)- - 今天给大家介绍一个超级炫酷的HTM ...
html5 video视频资源保护,HTML5 视频播放 video
HTML5 中的视频播放 ===================================================================== -------不需要下载任何额外的 ...
HTML5视频播放器jQuery插件
HTML5 Video player jQuery plugin As you know – HTML5 <video> element is already supported by m ...
解决无法在哔哩哔哩（b站）上使用HTML5视频播放器脚本插件/油猴等插件失效的问题
文章目录 1.问题描述 2.解决方法 3.推荐使用视频插件简介特性附:[快捷键](https://github.com/xxxily/h5player#%E5%BF%AB%E6%8D%B7%E9 ...
jQuery和CSS3定制HTML5视频播放器
摘要: 随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的. ... ... ... ... ...
在线html5视频播放器,打造自己的html5视频播放器
推荐这篇文章: 前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的&qu ...
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
html五编写视屏_打造自己的html5视频播放器
前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的",就是要自 ...

html5视频播放,实现防止下载（一）

html5视频播放,实现防止下载（一）相关推荐

最新文章

热门文章