html5 video标签屏蔽右键视频另存为的js代码

要实现html5 video标签屏蔽右键视频另存为，我们可以使用Javascript代码来解决。具体的实现过程如下：

1. 创建一个video标签

首先，我们需要在HTML中创建一个video标签，并指定要加载的视频文件路径。

<video id="myVideo" controls preload="metadata">
   <source src="example.mp4" type="video/mp4">
   <source src="example.webm" type="video/webm">
   <source src="example.ogg" type="video/ogg">
</video>

2. 添加JS代码

接下来，我们需要使用Javascript添加一些事件监听器来屏蔽右键菜单和屏幕截图操作。

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

myVideo.addEventListener("contextmenu", function (e) {
   e.preventDefault();
});

myVideo.addEventListener('keydown', function (e) {
   if (e.keyCode === 44 || e.keyCode === 45 || e.keyCode === 91 || e.keyCode === 93 || e.keyCode === 123) {
      e.preventDefault();
      return false;
   }
});

myVideo.addEventListener("dragstart", function (e) {
   e.preventDefault();
});

在这个代码中，我们首先通过getElementById()方法获取到video标签的DOM对象。然后，我们使用addEventListener()方法分别添加了三个事件监听器：contextmenu、keydown和dragstart。

contextmenu事件监听器：当用户右键点击video标签时，preventDefault()方法会阻止默认的右键菜单弹出，这就能防止用户另存为视频。
keydown事件监听器：当用户按下一些快捷键时，如Ctrl+S、Shift+PrintScreen、F12等时，preventDefault()方法也会阻止默认的操作，这就能防止用户截屏或其他操作。
dragstart事件监听器：当用户尝试拖动视频时，preventDefault()方法也会阻止默认的操作，这就能防止用户拖动视频到其他地方。

示例1：屏蔽video标签右键菜单

<!DOCTYPE html>
<html>
<head>
    <title>禁止右键保存视频</title>
    <meta charset="utf-8">
    <script>
        window.onload = function() {
            var video = document.getElementById('myVideo');
            video.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            },false);
        }
    </script>
</head>
<body>
 <video id="myVideo" src="sample.mp4" width="640" height="480" controls></video>
</body>
</html>

在这个示例中，我们在window.onload事件中添加了一个事件监听器。当用户右键点击video标签时，preventDefault()方法将阻止默认的右键菜单弹出。

示例2：屏蔽video标签右键菜单、快捷键和拖拽操作

<!DOCTYPE html>
<html>
<head>
    <title>禁止右键保存视频</title>
    <meta charset="utf-8">
    <script>
        window.onload = function() {
            var video = document.getElementById('myVideo');
            video.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            },false);

            video.addEventListener('keydown', function(e) {
                if (e.keyCode === 44 || e.keyCode === 45 || e.keyCode === 91 || e.keyCode === 93 || e.keyCode === 123) {
                    e.preventDefault();
                    return false;
                }
            },false);

            video.addEventListener('dragstart', function(e) {
                e.preventDefault();
            },false);
        }
    </script>
</head>
<body>
 <video id="myVideo" src="sample.mp4" width="640" height="480" controls></video>
</body>
</html>

在这个示例中，我们在window.onload事件中添加了三个事件监听器，分别是对应的contextmenu、keydown和dragstart事件。这些监听器都使用preventDefault()方法阻止了对应事件的默认行为，来达到屏蔽右键菜单、快捷键和拖拽操作的目的。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html5 video标签屏蔽右键视频另存为的js代码 - Python技术站

html5 video标签屏蔽右键视频另存为的js代码

1. 创建一个video标签

2. 添加JS代码

示例1：屏蔽video标签右键菜单

示例2：屏蔽video标签右键菜单、快捷键和拖拽操作

相关文章