Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4"> 
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">   </video>
The video:
displays well in both Chrome and Firefox
In Firefox it plays as expected
In Chrome it displays but not "autostarts". This is the problem.
If I click on it (in Chrome) it plays ok
Tried
<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>
Nothing worked in Chrome
Then I also tried changing the codec, as recommended in https://en.wikipedia.org/wiki/HTML5_video, but it also did not work:
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
So now I am at a dead end. Thanks for any pointers! Much appreciated.
                A little hack (add after </video>): <script> document.getElementById('myvideo').play();  </script> (don't forget to add id="myvideo" to  <video>)
– Sasindu Mendis
                Jan 13, 2016 at 11:07
                @SasinduMendis it appears this will only work after user interaction with the page (e.g. click). Any sooner and play() will be blocked by Chrome with a message in the console.
– Pim Schaaf
                Jun 9, 2018 at 5:47
                If you want to use the autoplay attribute the video must have: a longer duration of 7 seconds, audio must be enabled, the tab must be active and the video must have a minimum size of 200x140px
– gmarsi
                May 15, 2019 at 21:14
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:
After some research I have found that it doesn't work on Chrome sometimes because in responsive you can activate the data saver, and it blocks any video to autostart.
                Thank you for the info about the Data Saver, this was my issue. Have you found a way to overcome this? That is, if the data saver is still on, can the video autoplay somehow, maybe via JS?
– Gru
                Nov 6, 2018 at 17:59
                @AlexanderKim I'm not talking about embedded videos. I was refering to youtube itself. When I open a youtube video there is autoplay. Maybe there is an exception for youtube?
– maxeh
                May 12, 2019 at 13:14
Try this when i tried giving muted , check this demo in  codpen 
    <video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
script
function toggleMute() {
  var video=document.getElementById("videoId");
  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
$(document).ready(function(){
  setTimeout(toggleMute,3000);
edited attribute content
autoplay muted playsinline
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
                Unmuting on timeout won't work anymore, you'll get an error: Unmuting failed and the element was paused instead because the user didn't interact with the document before
– Alexander Kim
                May 9, 2019 at 6:14
                If the muted video is inserted dynamically into the DOM it doesn't autoplay for me in chrome after the page refresh because of "DOMException: play() failed because the user didn't interact with the document first". However, in such scenario you need to set the muted attribute to true manually after element insertion as described here stackoverflow.com/a/51189390/320761
– Lukasz Frankowski
                Feb 12, 2020 at 16:08
This may not have been the case at the time the question was asked, but as of Chrome 66, autoplay is blocked.
http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/
  
Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.
So it looks like your problem would be solved if you put the .webm first in your list of sources. Hope that helps.
                Chrome 87.0.4280.88 (Official Build) (x86_64) here and my webm is first inline. Commenting out the other <source>s made the webm fire. #strangebehavior
– Ben Racicot
                Dec 14, 2020 at 14:35
Try this:
<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>
And put this js after that:
window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
These are the attributes I used to get video to autoplay on Chrome - onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop
Example:
<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>
This question are greatly described here

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
TL;DR You are still always able to autoplay muted videos
Also, if you're want to autoplay videos on iOS add playsInline attribute, because by default iOS tries to fullscreen videos

https://webkit.org/blog/6784/new-video-policies-for-ios/
Here is it: http://www.htmlcssvqs.com/8ed/examples/chapter-17/webm-video-with-autoplay-loop.html
You have to add the tags: autoplay="autoplay" loop="loop" or just "autoplay" and "loop".