防止在移动浏览器上下载视频背景 [英] Prevent a video background from being downloaded on mobile browsers
问题描述
我在具有视频背景的着陆页上有一个英雄,并希望阻止在移动设备上下载webm / mp4文件。我见过一些涉及 display:none
属性的媒体查询的解决方案。虽然他们在第一印象时表现不错,但我使用连接到手机的Chrome调试工具验证了该文件仍在下载。
I have a hero on a landing page with a video background and want to prevent the webm/mp4 file from being downloaded on mobile devices. I've seen some solutions that involve media queries with display:none
attribute. Even though they're fine at first impression, I verified, using Chrome debug tool connected to my phone, that the file is still being downloaded.
以下是视频中显示的内容HTML5标记:
Here's the video presented in the HTML5 markup:
<video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
以下是我用来检测移动浏览器的方法:
The following is the method I use to detect mobile browsers:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
// If mobile, then we do all this
}
else {
// If not mobile then do this
}
} // detectmob
我如何防止某人从我的JavaScript函数中的移动设备上下载视频?
How can I prevent someone from downloading the video on mobile devices within my JavaScript function?
推荐答案
您的HTML:
<video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid">
</video>
您的javascript:
Your javascript:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
// If mobile, then we do all this
}
else {
// If not mobile then do this
document.getElementById("bgvid").innerHTML = '<source src="video.webm" type="video/webm"><source src="video.mp4" type="video/mp4">';
}
} // detectmob
这篇关于防止在移动浏览器上下载视频背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!