html5 video标签如何禁止视频下载

一、总结

一句话总结：bing方法给video对象绑定return false的匿名方法。

1、html5 video标签如何禁止视频下载？

bing方法给video对象绑定return false的匿名方法。

这样的效果是禁止鼠标右键的另存为功能。

23 $('#video1').bind('contextmenu',function() { return false; });

二、html5 video标签如何禁止视频下载

1、代码

 <!DOCTYPE html>

 <html>

 <head>

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

 </head>

 <body> 

 <div style="text-align:center;">

   <button onclick="playPause()">播放/暂停</button>

   <button onclick="makeBig()">大</button>

   <button onclick="makeNormal()">中</button>

   <button onclick="makeSmall()">小</button>

   <br />

   <video id="video1" width="420" style="margin-top:15px;">

     <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />

     <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />

     Your browser does not support HTML5 video.

   </video>

 </div> 

 <script type="text/javascript">

 var myVideo=document.getElementById("video1");

 $('#video1').bind('contextmenu',function() { return false; });

 function playPause()

 {

 if (myVideo.paused)

   myVideo.play();

 else

   myVideo.pause();

 } 

 function makeBig()

 {

 myVideo.width=560;

 } 

 function makeSmall()

 {

 myVideo.width=320;

 } 

 function makeNormal()

 {

 myVideo.width=420;

 }

 </script> 

 </body>

 </html>

2、实现介绍

网页使用了html5的video标签进行视频播放，由于播放的视频涉及版权问题，所以需要禁止video标签自带的下载功能。

有种做法是屏蔽掉video标签域的右键操作。
具体代码如下：
$('#videoArea').bind('contextmenu',function() { return false; });

该代码确实可以屏蔽掉右键另存，不过提供该方案的作者又神秘地说：不能做到真正的屏蔽（你懂的）

我用firebug去修改页面上的js，但死活都不能再右键另存，与提供方案的作者所述有矛盾。后来又找了下资料，描述如下：js为一次性执行，非即时渲染。

问题如下：
1、不能真正屏蔽，要怎么做才能够看到不能真正屏蔽的效果；
2、怎么才能够对video标签的另存下载进行真正的屏蔽；

1、不能真正屏蔽，要怎么做才能够看到不能真正屏蔽的效果；
按F12 在控制台中输入
$('#videoArea').unbind('contextmenu');

2、怎么才能够对video标签的另存下载进行真正的屏蔽；
单靠前端代码是做不到真正屏蔽的，要在服务器端对视频地址进行加密验证。
而且就算屏蔽了另存下载，用户也可以在浏览器的临时缓存文件夹中找到已经播放过的视频文件

 
0 Links

html5 video标签如何禁止视频下载的更多相关文章

  1. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  2. 用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  3. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  4. 【实战问题】【3】iPhone无法播放video标签中的视频

    问题:视频都是MP4格式,视频可以在手机上正常播放.video标签中的视频在安卓点击可以播放,但在iPhone无法播放 解决方案: 1,视频编码格式问题,具体iPhone手机支持的是哪些格式可见官方的 ...

  5. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  6. 巧用transform实现HTML5 video标签视频比例拉伸

    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...

  7. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  8. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

  9. h5的video标签支持的视频格式

    关于<video>标签所支持的视频格式和编码: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vo ...

随机推荐

  1. Object.prototype.toString.call(value)

    使用Object.prototype上的原生toString()方法判断数据类型,使用方法如下: Object.prototype.toString.call(value) 1.判断基本类型: Obj ...

  2. js进阶 14-9 ajax事件有哪些

    js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都 ...

  3. matlab 辅助函数 —— 文件下载与文件解压

    0. 可读性的提升 为了提升代码的交互友好性,可在代码执行一些耗时操作时,显示地输出一些文本信息,以显示进度: fprintf('Downloading xxfilename...\n') urlwr ...

  4. 00090_字节输入流InputStream

    1.字节输入流InputStream (1)通过InputStream可以实现把内存中的数据写出到文件: (2)把内存中的数据写出到文件InputStream此抽象类,是表示字节输入流的所有类的超类. ...

  5. 【例题 7-6 UVA - 140】Bandwidth

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力做就好. O(8!*26^2) [代码] /* 1.Shoud it use long long ? 2.Have you ev ...

  6. [RxJS] How To get the results of two HTTP requests made in sequence

    switchMap can chain two HTTP requests together, creating one request based on the results of the fir ...

  7. js进阶 13-8 jquery如何实现侧边栏

    js进阶 13-8 jquery如何实现侧边栏 一.总结 一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,sl ...

  8. Haproxy 为 mysql 做负载均衡

    .tar.gz cd haproxy- uname -r vim /etc/haproxy.cfg global #日志 log 127.0.0.1 local0 maxconn chroot /tm ...

  9. 8、for 、emumrate、range、if

    1.for循环用户按照顺序循环可迭代对象中的内容,PS:break.continueli = [11,22,33,44]for item in li: print item 2.enumrate 为可 ...

  10. Java 泛型-泛型类、泛型方法、泛型接口、通配符、上下限

    泛型: 一种程序设计语言的新特性,于Java而言,在JDK 1.5开始引入.泛型就是在设计程序的时候定义一些可变部分,在具体使用的时候再给可变部分指定具体的类型.使用泛型比使用Object变量再进行强 ...