禁止下载HTML5视频 - 隐藏下载按钮和防复制技巧 - 常规

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charSet="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-transform" /> 
    <meta http-equiv="Cache-Control" content="no-siteapp" /> 
    <meta name="referrer" content="never">
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>果果互联-在线观看</title>
    <link rel="stylesheet" href="css/style.css">
	<style>
	body {margin:0;}
<p>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}</p>
<pre><code>li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

&lt;/style&gt;
</code></pre>
</head>
<body>
    <section id="main">
        <video id="player" src="http://sp.guodns.xyz/92sp.php" controls controlsList="nodownload" webkit-playsinline playsinline></video>
    </section>
    <section id="buttons">
        <button id="switch">自动切换</button>
        <button id="next">下一位</button>
        <a href="http://idc.cn"><button id="next">购买源码</button></a>
    </section>
    <script>
<pre><code>(function (window, document) {
    
    if (top != self) {
        window.top.location.replace(self.location.href);
    }
    var get = function (id) {
        return document.getElementById(id);
    }
    var bind = function (element, event, callback) {
        return element.addEventListener(event, callback);
    }
    var auto = true;
    var player = get('player');
    var randomm = function () {
        player.src = 'http://sp.guodns.xyz/92sp.php';
        player.play();
    }
    bind(get('next'), 'click', randomm);
    bind(player, 'error', function () {
        randomm();
    });
    bind(get('switch'), 'click', function () {
        auto = !auto;
        this.innerText = '自动: ' + (auto ? '开' : '关');
    });
    bind(player, 'ended', function () {
        if (auto) randomm();
    });
})(window, document);
&lt;/script&gt;
&lt;script&gt;
    document.addEventListener('contextmenu', event =&gt; event.preventDefault());
    document.addEventListener('keydown', event =&gt; {
        if (event.keyCode == 123 || (event.ctrlKey &amp;&amp; event.shiftKey &amp;&amp; event.keyCode == 73)) {
            event.preventDefault();
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>
由于HTML5视频标签本身并没有提供禁止下载的属性，所以需要采用其他方式来实现禁止下载。以下是一种实现方式：
<ol>
<li>在视频标签中添加controlsList=&quot;nodownload&quot;属性，禁止下载按钮：</li>
</ol>
<p><video id="player" src="http://sp.guodns.xyz/92sp.php" controls controlsList="nodownload" webkit-playsinline playsinline></video></p>
<ol start="2">
<li>使用JavaScript禁用鼠标右键和键盘快捷键来防止用户通过复制链接或截图等方式下载视频：</li>
</ol>
<script>
    document.addEventListener('contextmenu', event => event.preventDefault());
    document.addEventListener('keydown', event => {
        if (event.keyCode == 123 || (event.ctrlKey && event.shiftKey && event.keyCode == 73)) {
            event.preventDefault();
        }
    });
</script>
<p>将以上代码添加到HTML文件中即可实现禁止下载和复制的效果。</p>