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

Question

我在一个带有视频背景的登陆页面上放置了一个英雄（hero）部件，我想要防止移动设备下载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函数中防止别人在移动设备上下载视频？

- nicozica

---

你能否分享代码块，这对我们会很有帮助。 - Channaveer Hakari

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

- Daan