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
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
How video is buffered is browser implementation-dependent and therefore may vary from browser to browser. Various browsers can use different factors to determine to keep or to discard a part of the buffer. Old segments, disk space, memory, and performance are typical factors. The only way to know is to “see” what the browser has … Read more
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
Surely you are looking for more than this: <div class=”container”> <video id=”video” width=”770″ height=”882″ onclick=”play();”> <source src=”https://stackoverflow.com/questions/10422105/video/Motion.mp4″ 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
Video playback is broken on standalone applications in IOS 8.0.2
Take a look at my jquery videoBG plugin http://syddev.com/jquery.videoBG/ Make any HTML5 video a site background… has an image fallback for browsers that don’t support html5 Really easy to use Let me know if you need any help.
Depending on what browsers you’re targeting, you could go for the object-fit property to solve this: object-fit: cover; or maybe fill is what you’re looking for. Still under consideration for IE.
Add poster=”placeholder.png” to the video tag. <video width=”470″ height=”255″ poster=”placeholder.png” controls> <source src=”https://stackoverflow.com/questions/20075875/video.mp4″ type=”video/mp4″> <source src=”video.ogg” type=”video/ogg”> <source src=”video.webm” type=”video/webm”> <object data=”https://stackoverflow.com/questions/20075875/video.mp4″ width=”470″ height=”255″> <embed src=”video.swf” width=”470″ height=”255″> </object> </video> Does that work?
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