How do I get a video to Play automatically on orientation change?

Question

Im developing a mobile site and there is one thing i cant do. I think it is pretty simple but im pretty new at this. When in portrait, i can see the site perfectly (all is going great), but what i want to do is the following: I want the a video to start playing as soon as the orientation goes to landscape. Any help will be highly appreciated. Thanks a lot.

Answer 1

There seems to be two main issues that this question asks: how to detect orientation change in a browser and how to make the video play in response to that event.

This stackoverflow answer seems to address the first issue very well: https://stackoverflow.com/a/2307936/994464 Although that question refers to Android browsers specifically, that answer should be the most robust solution for all browsers.

Secondly, the video, which i assuming is html5 and not an embed, can be accessed from the dom and simply use the play method shown below in a snippet from the Mozilla Developer Network

var v = document.getElementsByTagName("video")[0];  
v.play();

Putting it all together:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
     var v = document.getElementsByTagName("video")[0];  
     v.play();
}, false);