(This bug still exists in Chrome 38.0.2125.111, OS X 10.10) This may be a Chrome bug & you may solve it without any dummy ?time-suffix trick, just helping Chrome releasing sockets faster: I had the same bug on a RevealJs HTML presentation, with 20+ videos (one per slide, autoplayed on slide focus). As a side … Read more
Live Demo: https://www.webrtc-experiment.com/DetectRTC/ If user didn’t allow webcam and/or microphone, then media-devices will be having “NULL” value for the “label” attribute. Above page will show this message: “Please invoke getUserMedia once.” PS. You can type “DetectRTC.MediaDevices” in the Chrome Console developers tool. Note: It works only in Chrome. Firefox isn’t supporting similar API yet. (Updated: … Read more
EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years. I got this working by using a PNG instead of a JPG. Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the … Read more
Create a div container with rounded corners and overflow:hidden. Then place the video in it. <style> .video-mask{ width: 350px; border-radius: 10px; overflow: hidden; } </style> <div class=”video-mask”> <video></video> </div>
The progress event is fired when some data has been downloaded, up to three times per second. The browser provides a list of ranges of available media through the buffered property; a thorough guide to this is available on Media buffering, seeking, and time ranges on MDN. Single load start If the user doesn’t skip … Read more
I did this by inspecting the player progress every x milliseconds, e.g. 50. If the player hasn’t advanced as much as it was expected to, then we are buffering. This is quite reliable, since I’ve found that other events such as waiting or stalled are not fired in all cases of the video buffering. Note … Read more
I’d remove the autoplay attribute, since if the browser encounters it, it autoplays! autoplay is a HTML boolean attribute, but be aware that the values true and false are not allowed. To represent a false value, you must omit the attribute. The values “true” and “false” are not allowed on boolean attributes. To represent a … Read more
HTML: <video id=”video-active” class=”video-active” width=”640″ height=”390″ controls=”controls”> <source src=”https://stackoverflow.com/questions/6380956/myvideo.mp4″ type=”video/mp4″> </video> <div id=”current”>0:00</div> <div id=”duration”>0:00</div> JavaScript: $(document).ready(function(){ $(“#video-active”).on( “timeupdate”, function(event){ onTrackedVideoFrame(this.currentTime, this.duration); }); }); function onTrackedVideoFrame(currentTime, duration){ $(“#current”).text(currentTime); //Change #current to currentTime $(“#duration”).text(duration) } Notes: Every 15 to 250ms, or whenever the MediaController’s media controller position changes, whichever happens least often, the user agent must … Read more
Just came across this question and although it is a little old I am posting this for future readers (who; like me, probably come from Google). So as of today this is the event list for html5 media (according to W3C): onabort : Script to be run on abort oncanplay : Script to be run … Read more
Assuming you’re good with mixing JS into your HTML, you can leverage one of the events, such as loadstart: <video onloadstart=”this.volume=0.5″ …>