javascript - 防止在移动浏览器上下载视频背景

Question

我在带有视频背景的着陆页上有一个英雄，我想防止将 webm/mp4 文件下载到移动设备上。我见过一些解决方案涉及带有 display:none 属性的媒体查询。尽管它们的第一印象很好，但我使用连接到手机的 Chrome 调试工具验证了该文件仍在下载。

这是 HTML5 标记中显示的视频:

<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>

下面是我检测手机浏览器的方法:

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 函数中阻止他人在移动设备上下载视频？

Answer 1

您的 HTML:

<video preload="metadata" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="bgvid">
</video>

你的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