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
$(‘#play-pause-button’).click(function () { var mediaVideo = $(“#media-video”).get(0); if (mediaVideo.paused) { mediaVideo.play(); } else { mediaVideo.pause(); } }); I have done this in jQuery, which is simple and fast. To try it, you just need to use the ID of the video tag and your play/pause button. EDIT: In vanilla JavaScript: a video is not a … Read more
This is caused in many cases by the server not replying with an Accept-Ranges header. For an obscure, only-Google-developer-relevant reason (the FF folks don’t seem to be so offended by a server replying without an Accept-Ranges header), they refuse to implement seeking when such a header is not provided. You can add one very easily … Read more
You need to add playsinline autoplay muted loop because Chrome does not allow a video to autostart if it is not muted. Also, right now I don’t know why it is not working in all Android devices. I’m trying to look if it’s version specific, if I find something I’ll let you know. Chrome issue: … Read more
For your paste & copy pleasure the jQuery solution: <video width=”320″ height=”240″> <source src=”https://stackoverflow.com/questions/14517639/movie.mp4″ type=”video/mp4″> </video> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <script>/*<![CDATA[*/ $(document).ready(function(){ $(‘video’).on(‘ended’,function(){ console.log(‘Video has ended!’); }); }); /*]]>*/</script> Replace the ‘video’-part with the correct selector for your video. EDIT: Here is the solution without jQuery: <video width=”320″ height=”240″> <source src=”https://stackoverflow.com/questions/14517639/movie.mp4″ type=”video/mp4″> </video> <script>/*<![CDATA[*/ document.querySelector(‘video’).addEventListener(‘ended’,function(){ console.log(‘Video has … Read more
It’s an Apple bug. Bug was fixed in newer iOS versions. If you still experience it – file a bug report to Apple.
Use width and max-height on the <video> element: <div id=”player-overlay”> <video> <source src=”../static/video/10s.mp4″ /> <source src=”../static/video/10s.webm” type=”video/webm; codecs=”vp8, vorbis”” /> <source src=”../static/video/10s.ogv” type=”video/ogg; codecs=”theora, vorbis”” /> </video> </div> video { width: 100%; max-height: 100%; } http://jsfiddle.net/fHG69/ Also, you’re missing a semicolon after background-color. When absolutely positioning an element to fill the screen, I prefer to … Read more
I see two problems here: Mobile Safari will not figure out your video dimensions (or aspect ratio) for you. You have to specify the height and width in the element attributes or CSS, because it’s not going to download the video file header at all until you start playing. See this page, third section. Even … Read more
per the spec at https://wicg.github.io/picture-in-picture/#disable-pip, the attribute to control this is disablePictureInPicture <video controls disablePictureInPicture controlsList=”nodownload”> <source src=”https://www.w3schools.com/html/mov_bbb.ogg” type=”video/mp4″> <source src=”https://www.w3schools.com/html/mov_bbb.mp4″ type=”video/ogg”> </video> to achieve the same through javascript: <video id=”vid” controls muted> <source src=”https://www.w3schools.com/html/mov_bbb.mp4″> </video> <script> vid=document.getElementById(“vid”) vid.disablePictureInPicture = true </script>
MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams . It allows web apps to create a file from a live audio/video session. <video autoplay></video> <script language=”javascript” type=”text/javascript”> function onVideoFail(e) { console.log(‘webcam fail!’, e); }; function hasGetUserMedia() { // Note: Opera is unprefixed. return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } if (hasGetUserMedia()) { … Read more