javascript - Prevent a video background from being downloaded on mobile browsers - Stack Overflow

admin管理员组

文章数量:1391934

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.

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

How can I prevent someone from downloading the video on mobile devices within my JavaScript function?

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.

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

How can I prevent someone from downloading the video on mobile devices within my JavaScript function?

• javascript
• html
• video
• mobile

Share Improve this question Follow edited Jul 24, 2015 at 14:35 GʀᴜᴍᴘʏCᴀᴛ 9,0482020 gold badges9090 silver badges160160 bronze badges asked Jul 24, 2015 at 14:13 nicozicanicozica 42366 silver badges1919 bronze badges 1

• could you please share the code block so that it will be helpful for us. – Channaveer Hakari Commented Dec 23, 2019 at 7:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Your HTML:

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

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

本文标签： javascriptPrevent a video background from being downloaded on mobile browsersStack Overflow