HTML5 and Javascript to play videos only when visible
Using the isInViewport plugin and jQuery, here’s my code for the task $(‘video’).each(function(){ if ($(this).is(“:in-viewport”)) { $(this)[0].play(); } else { $(this)[0].pause(); } })
Using the isInViewport plugin and jQuery, here’s my code for the task $(‘video’).each(function(){ if ($(this).is(“:in-viewport”)) { $(this)[0].play(); } else { $(this)[0].pause(); } })
I too had the same issue. I changed the codec to H264-MPEG-4 AVC and the videos started working in HTML5/Chrome. Option selected in converter: H264-MPEG-4 AVC, Codec visible in VLC player: H264-MPEG-4 AVC (part 10) (avc1) Hope it helps…
Try if( window.FormData === undefined ) or if( window.FormData !== undefined ).
As @dandavis has said, “run it from http: not file”. I’m posting this as an answer for the sake of organization. For starters: Running you project from http means having a http server (such as apache or a simple node http-server) and running your project via http://localhost.
“onerror” is not a valid event type for <video> Use “error” instead. document.getElementsByTagName(‘video’)[0].addEventListener(‘error’, function(event) { … }, true); For a complete list of events for <video> go here: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Just to update this answer, I would not recommend using Miro Video Converter any more. It used to be my weapon of choice for creating HTML5 video for web, but the current version 3 of the program has issues with converting into ogg theora: the quality of the converted video is far too low and … Read more
As per new chrome update (From Google Chrome 47), getUserMedia() is no longer supported in chrome browser over http:// (Unsecure Origin) , It will work on https:// (Secure Origin) For development purpose, 1.localhost is treated as a secure origin over HTTP, so if you’re able to run your server from localhost, you should be able … Read more
On the W3C FAQ on HTML5 it states: Is there support for digital rights management (DRM) in HTML5 video? HTML5 doesn’t provide direct support, nor any barrier, to using DRM in video. It currently expects this to be handled by the particular codec/implementation. There are implementations which allow for DRM in HTML5 video. Is dealing … Read more
For those coming to this old question: only mp4 is required nowadays! http://caniuse.com/#feat=mpeg4
This Vimeo doc might help. This is working for us: You need a Vimeo Pro account. Get the video link from the Distribution tab when looking at the video settings in Vimeo: Add the video link to your HTML5 video tag: <video width=”320″ height=”240″ controls> <source type=”video/mp4″ src=”https://player.vimeo.com/external/*.hd.mp4?s=*&profile_id=*”> </video>