Try autoplay="autoplay"
instead of the "true"
value. That's the documented way to enable autoplay. That sounds weirdly redundant, I know.
HTML5 Video Autoplay not working correctly
-
31-05-2022 - |
سؤال
I'm using this code:
<video width="440px" loop="true" autoplay="true" controls>
<source src="http://www.example.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.example.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.example.com/CorporateVideo.webm" type="video/webm" />
</video>
I want the video to autoplay but when the page loads the video doesn't play. It looks like it's a buffering issue, as when I hover on the video (to show controls) the video is always 2 seconds in but then stops and doesn't continue.
Note: I just visited the site again and autoplay seemed to work, but when I try again the same issue is happening, is this a buffering issue? Anything I can do to stop this?
المحلول
نصائح أخرى
Chrome does not allow autoplay if the video is not muted. Try using this:
<video width="440px" loop="true" autoplay="autoplay" controls muted>
<source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.tuscorlloyds.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.tuscorlloyds.com/CorporateVideo.webm" type="video/webm" />
</video>
Mobile browsers generally ignore this attribute to prevent consuming data until user explicitly starts the download.
UPDATE: newer version of mobile browser on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel:
Some additional info: https://webkit.org/blog/6784/new-video-policies-for-ios/
Working solution October 2018, for videos including audio channel
$(document).ready(function() {
$('video').prop('muted',true).play()
});
Have a look at another of mine, more in-depth answer: https://stackoverflow.com/a/57723549/3049675
html {
padding: 20px 0;
background-color: #efefef;
}
body {
width: 400px;
padding: 40px;
margin: 0 auto;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
video {
width: 400px;
display: block;
}
<video onloadeddata="this.play();this.muted=false;" poster="https://durian.blender.org/wp-content/themes/durian/images/void.png" playsinline loop muted controls>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
Your browser does not support the video tag or the file format of this video.
</video>
You might want to add some scripts if your software doesn't support jQuery or giving any reference type error.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Use above scripts only if the software you are working on doesn't support jQuery.
<script>
$(document).ready(function() {
//Change the location of your mp3 or any music file.
var source = "../Assets/music.mp3";
var audio = new Audio();
audio.src = source;
audio.autoplay = true;
});
</script>