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

【问题标题】：Prevent a video background from being downloaded on mobile browsers防止在移动浏览器上下载视频背景
【发布时间】：2015-10-15 06:16:40
【问题描述】：

我在带有视频背景的着陆页上有一个英雄，我想防止 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 函数中将视频下载到移动设备上？

【问题讨论】：

能否请您分享代码块，以便对我们有所帮助。

标签： javascript html video mobile

【解决方案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

【讨论】：