html5-video

How to set the thumbnail image on HTML5 video?

by

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?

Correct mime type for .mp4

by

According to RFC 4337 § 2, video/mp4 is indeed the correct Content-Type for MPEG-4 video. Generally, you can find official MIME definitions by searching for the file extension and “IETF” or “RFC”. The RFC (Request for Comments) articles published by the IETF (Internet Engineering Taskforce) define many Internet standards, including MIME types.

How to change the playing speed of videos in HTML5?

by

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

In Chrome 55, prevent showing Download button for HTML 5 video [duplicate]

by

Google has added a new feature since the last answer was posted here. You can now add the controlList attribute as shown here: <video width=”512″ height=”380″ controls controlsList=”nodownload”> <source data-src=”https://stackoverflow.com/questions/41115801/mov_bbb.ogg” type=”video/mp4″> </video> You can find all options of the controllist attribute here: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Prevent HTML5 video from being downloaded (right-click saved)?

by

You can’t. That’s because that’s what browsers were designed to do: Serve content. But you can make it harder to download. Convenient “Solution” I’d just upload my video to a third-party video site, like YouTube or Vimeo. They have good video management tools, optimizes playback to the device, and they make efforts in preventing their … Read more

Stop/Close webcam stream which is opened by navigator.mediaDevices.getUserMedia [closed]

by

EDIT Since this answer has been originally posted the browser API has changed. .stop() is no longer available on the stream that gets passed to the callback. The developer will have to access the tracks that make up the stream (audio or video) and stop each of them individually. More info here: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active Example (from … Read more

How to handle “Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.” on Desktop with Chrome 66?

by

To make the autoplay on html 5 elements work after the chrome 66 update you just need to add the muted property to the video element. So your current video HTML <video title=”Advertisement” webkit-playsinline=”true” playsinline=”true” style=”background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;” src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4″ autoplay=””></video> Just needs muted=”muted” <video title=”Advertisement” style=”background-color: rgb(0, 0, … Read more

Detect when an HTML5 video finishes

by

You can add an event listener with ‘ended’ as first param Like this : <video src=”https://stackoverflow.com/questions/2741493/video.ogv” id=”myVideo”> video not supported </video> <script type=”text/javascript”> document.getElementById(‘myVideo’).addEventListener(‘ended’,myHandler,false); function myHandler(e) { // What you want to do after the event } </script>

tech