Does iPhone/iPad Safari require ‘Accept-Ranges’ header for video?

I found some Apple documentation that says that it does in fact need that for video. HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already … Read more

How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

After much faffing around a friend finally pointed me in the right direction. The events I was looking for are: webkitbeginfullscreen and webkitendfullscreen var player = document.getElementsByTagName(“video”)[0]; player.addEventListener(‘webkitbeginfullscreen’, onVideoBeginsFullScreen, false); player.addEventListener(‘webkitendfullscreen’, onVideoEndsFullScreen, false); With that I can safely capture when the user clicks over the fullscreen button on Safari for the iPads. Interestingly the same … Read more

HTML5 callbacks?

You can view a complete list of events in the spec here. For example: $(“video”).bind(“ended”, function() { alert(“I’m done!”); }); You can bind to the event on the element like anything else in jQuery…as for your comment question, whatever element you’re delivering for IE, yes, it would need a separate handler rigged up to whatever … Read more

Add text above HTML5 Video

Surely you are looking for more than this: <div class=”container”> <video id=”video” width=”770″ height=”882″ onclick=”play();”> <source src=”″ type=”video/mp4″ /> </video> <div class=”overlay”> <p>Content above your video</p> <form> <p>Content Below Your Video</p> <label for=”input”>Form Input Label</label> <input id=”input” name=”input” value=”” /> <button type=”submit”>Submit</button> </form> </div> </div> If you want to put the content on top of … Read more

How to set the thumbnail image on HTML5 video?

Add poster=”placeholder.png” to the video tag. <video width=”470″ height=”255″ poster=”placeholder.png” controls> <source src=”″ type=”video/mp4″> <source src=”video.ogg” type=”video/ogg”> <source src=”video.webm” type=”video/webm”> <object data=”″ width=”470″ height=”255″> <embed src=”video.swf” width=”470″ height=”255″> </object> </video> Does that work?

How to change the playing speed of videos in HTML5?

According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. Example: /* play video twice as fast */ document.querySelector(‘video’).defaultPlaybackRate = 2.0; document.querySelector(‘video’).play(); /* now play three times as fast just for the heck of it */ document.querySelector(‘video’).playbackRate = 3.0; The above works on Chrome 43+, Firefox 20+, IE … Read more