3

This is my first question on Stack Overflow - please be gentle. ;)

I am working on an HTML5 website and have decided to implement HTML5 video at the top of the Home page. I've got the video working fine, but the HTML code relies on "Autoplay" being enabled on the video - which is a "no go" on iOS (and, I would assume, other mobile devices):

<div class="bg1">
  <div id="overlay"></div>
    <video autoplay loop class="fillWidth">
    <source src="video/filename.mp4" type="video/mp4"/>
    <source src="video/filename.ogg" type="video/ogg"/>
    <source src="video/filename.webm" type="video/webm"/>
    <img src="/images/bg1.jpg" title="Your browser does not support the <video> tag" />
    </video>
</div>

Notes:
1) The "Overlay" div contains a transparent PNG that sits above the video (with transparent areas that the video shows through).
2) The "fillWidth" class stretches the video to fit the width of the browser.
3) I have an image fallback for older browsers, which has been tested and works great.

So here's the problem: when I pull this test site up on my iPhone/iPad, the video window shows up but the "Play" icon has a slash through it (since iOS doesn't like the autoplay functionality I've set for the video).

So what I'd like to know is: is there a way to "comment out" these 6 lines of code (perhaps using JavaScript?) when the website is being viewed on a mobile device, but leave it in for desktop users?

EDIT:
The video is in the background of a div, so user controls are hidden intentionally. Also: I am not great at writing custom Javascript, so I really need things spelled out for me if you know a JS workaround. (Sorry about that.)

fireboy63
  • 57
  • 1
  • 6
  • I imagine you could modify the code generated at this site http://detectmobilebrowsers.com/ to do a simple if statement to decide whether or not to display the video. – Marshall Tigerus Aug 07 '13 at 20:03
  • have you thought about using modernizr it's great for stuff like that. Also have you tried adding the controls tag so that the user is able to play it manually. – Charles380 Aug 07 '13 at 20:05
  • @MarshallTigerus I looked at that code, but I don't know how to write custom JS "if" statements, so it's a little out of reach for me. – fireboy63 Aug 07 '13 at 20:58
  • @Charles380 I looked at Modernizer, but didn't really know how to implement what I was looking to do. I will try Ross' suggestion below, though, since it's relative to your answer. – fireboy63 Aug 07 '13 at 21:01

3 Answers3

2

How about this ?

<div class="bg1" id="videos">
  <div id="overlay"></div>
</div>

<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/g);
var videos = document.getElementById('videos');

if(!isMobile) {
    // User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
    videos.innerHTML += '<video autoplay loop class="fillWidth">' +
    '<source src="video/videonamehere.mp4" type="video/mp4"/>' +
    '<source src="video/videonamehere.ogg" type="video/ogg"/>' +
    '<source src="video/videonamehere.webm" type="video/webm"/>' +
    '</video>';
} else {
    videos.innerHTML += '<img src="/images/fallback.jpg" title="Your browser does not support the <video> tag">';
}
</script>

Here is a jsFiddle Demo

Welcome to stackoverflow :~)

Ross
  • 3,305
  • 1
  • 17
  • 18
  • 1
    http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – Charles380 Aug 07 '13 at 20:10
  • @Ross: I feel like your solution works best for me, but I am having an issue getting it (the non-Modernizr version, that is) to work for me, and I wonder if it has to do with my code structure. I have updated the code (and question) above; can you take a look and tell me where things might snag up? – fireboy63 Aug 07 '13 at 21:29
  • @fireboy63 I edited my answer, this approach should work for you. Do you have jQuery included in your HTML page? – Ross Aug 07 '13 at 21:36
  • @Ross Great! This hides the video code from rendering on mobile devices -- but now on the desktop version of the site, the video is not showing up. I don't have jQuery included, but I could easily do so - is it needed for your solution to work? (I can't imagine it is.) – fireboy63 Aug 07 '13 at 22:12
  • @fireboy63 I updated the answer and gave you a pure JS solution. I updated the jsFiddle too. This new approach will work without jQuery. – Ross Aug 08 '13 at 00:10
  • 1
    @Ross TREMENDOUS. Your solution was extremely helpful (everything works perfectly now), and is something I'm sure I will be able to retrofit and use on other projects, as well. Thank you *so* much for the help and the warm welcome to Stack Overflow. :) – fireboy63 Aug 09 '13 at 00:13
1

You need to choose a programming language to code with so you can have it recognize the type of user-agent and display the correct code for the user-agent type. PHP is a very nice language for this. Below is a snippet of PHP that I use to recognize if the user-agent represents a mobile device, and if it is it executes specific php code. This is just an example of what PHP can look like when handling this type of scenerio.

if (preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/smb3\(z105\)/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
   include 'C:\Inetpub\wwwroot\mywebsite\subdir\index.php';
  goto done;
}
The Debi
  • 157
  • 6
  • This is pretty much what I recommended doing. If you are doing web programming, you need to learn some of the very useful web languages besides HTML. Good work The Debi – Marshall Tigerus Aug 07 '13 at 21:02
0

I would use a javascript library called modernizr, which allows you to determine if parts of the new html5 are supported by your browser, and will even re-write code for browsers that don't support some of the new html5 features

Modernizr Link

Charles380
  • 1,249
  • 8
  • 18