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. IOIOI卡片占卜(Atcoder-IOIOI カード占い)（最短路）

    题目描述: K 理事長は占いが好きで,いつも様々な占いをしている．今日は,表の面に ‘I’ が,裏の面に ‘O’ が書か れたカードを使って今年の IOI での日本選手団の出来を占うことにした． 占い ...

  2. sql server还原数据库代码

    RESTORE DATABASE ExaminationsystemFROM DISK = 'C:\Users\admin\Desktop\20140324.bak'with replace,MOVE ...

  3. CTF加密题型解析：RSA算法的CTF解法之一

    RSA介绍 根据加密原理,可以将大部分的加密算法分为两大类:对称加密算法和非对称加密算法.对称加密算法的加密和解密采用的是同一套算法规则.而非对称加密算法加密时用的是公钥(公开给所有人),解密时用的是 ...

  4. 【2017 Multi-University Training Contest - Team 6】Kirinriki

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6103 [题意] 给出一串字符串,从中选出两个不重叠的字符串,使得两个字符串的距离和 <= m 的最 ...

  5. 洛谷—— P1434 滑雪

    https://www.luogu.org/problem/show?pid=1434#sub 题目描述 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜 ...

  6. Android圆环控件

    Android圆环控件 近期在做一个功能.界面效果要求例如以下: 看到这个界面,我首先想到了曾经在做phone模块的时候,我们定制的来电界面InCallTouchUi,界面效果是相似的. 来电控件使用 ...

  7. 黑马day01 xml 的解析方式

    XML编程:利用java程序去增删改查(CRUD)xml中的数据 解析思想: dom解析 sax解析 基于这两种解析思想市面上就有了非常多的解析api sun jaxp既有dom方式也有sax方式,而 ...

  8. 如何使用 PyCharm 将代码上传到远程服务器上（详细图解）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶测试说明 1.通过Windows电脑上的PyCharm,将代码上传到虚拟机Ubuntu系统中 需要在虚拟机中安装Ubuntu的 ...

  9. 【习题 3-11 UVA - 1588】Kickdown

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟一下就好 一位一位地往右移动. [代码] #include <bits/stdc++.h> using namesp ...

  10. [Angular] Setup automated deployment with Angular, Travis and Firebase

    Automate all the things!! Automation is crucial for increasing the quality and productivity. In this ...