I have the following code:
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".
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>
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
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/
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/