admin管理员组文章数量:1572325
一、html5视频播放
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-button vjs-big-play-centered" controls
preload="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视频播放,实现防止下载(一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727721635a1126878.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论