html5-video

I need to know when the user presses the escape key when watching an HTML5 video in fullscreen mode. Unfortunately any configured listeners on the document don't apply since when the user is watching an HTML5 video in fullscreen mode the system focus is on the native video player rather than the browser. An alternative is listening for when focus reverts back from the native video player to the browser, but I'm unsure as to how I would capture this. document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false); The above successfully logs to the console when I press

I'm trying to write a piece of Javascript that switches between two videos at timed intervals (don't ask). To make matters worse, each video has to start at specific place (about ten seconds, and again, don't ask.) I got the basics working by just using the YUI Async library to fire to switch the videos at intervals: YUI().use('async-queue', function (Y) { // AsyncQueue is available and ready for use. var cumulativeTime = 0; var q = new Y.AsyncQueue() for (var x = 0; x < settings.length; x++) { cumulativeTime = cumulativeTime + (settings[x].step * 1000) q.add( { fn: runVideo, args: settings[x]

With Chrome 53 and iOS 10 both out now, there are now Android and iOS devices that are capable of automatically playing videos that are silent and have the autoplay attribute. I'd like to know how to detect this with JavaScript. For Chrome 53, the <video> must have the autoplay and muted attributes (yes, the muted attribute is required even if the video file doesn't have any audio tracks). For iOS 10, the <video> must have the autoplay attribute and, for non-iPad iOS 10 devices, the playsinline attribute too (yes, it must be playsinline ; webkit-playsinline won't work). So a <video> will

For some reason I'm unable to set the image size when using an <img> tag inside an html5 video element. It is always defaulting back to 0 x 0 pixels . The reason I'm using this img is as a fallback for ancient browsers where the video tag just will not work. Here's my code NOTE I have deliberately removed "myVideo.mp4" to mimic the fallback : <video id="welcome" height="1080" width="1920" preload="auto" loop autoplay> <source type="video/mp4" src="@Url.Content("~/_video/myVideo.mp4")" /> <img src="@Url.Content("~/_video/posterframe.jpg")" height="1080" width="1920"/> </video> This produces the

I just noticed that videos on my personal site aren't playing in safari. I've tried two computers and clicking play does nothing. They work fine in Chrome, Opera, and Firefox, but not in safari. Is it a codec/encoding issue? Link: http://imwillryan.com/uiuc-timelapse.html Code: <video controls preload="none" poster="assets/video/poster_uiuc-timelapse.jpg" data-setup="{}"> <source src="assets/video/uiuc-timelapse.mp4" type="video/mp4" /> <source src="assets/video/uiuc-timelapse.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="assets/video/uiuc-timelapse.webm" type='video/webm;

Im looking to preload a number of small video files on my website when it first loads. This is so they can be auto-played and used when a user clicks to enter a section of the website. I need the transitions to be seamless so ideally the whole video file should be preloaded to avoid any delays. Ive tried a few different plugins like html5preloader, and also some other JS techniques to load the video files to the page but hide them to try and force the browser to load the videos before i use them. Neither have really made much difference to just swapping out the video src when i require to play