要实现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技术站
微信扫一扫 
支付宝扫一扫 