Im 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 doesnt play, it looks like its a buffering issue as when I hover on the video (to show controls) the video is always 2seconds in but then stops and doesnt continue.
Note: I just visited the site again and autopplay 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?
Many Thanks nick
This question is related to
video
video-streaming
html5-video
autoplay
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 {_x000D_
padding: 20px 0;_x000D_
background-color: #efefef;_x000D_
}_x000D_
_x000D_
body {_x000D_
width: 400px;_x000D_
padding: 40px;_x000D_
margin: 0 auto;_x000D_
background: #fff;_x000D_
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);_x000D_
}_x000D_
_x000D_
video {_x000D_
width: 400px;_x000D_
display: block;_x000D_
}
_x000D_
<video onloadeddata="this.play();this.muted=false;" poster="https://durian.blender.org/wp-content/themes/durian/images/void.png" playsinline loop muted controls>_x000D_
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />_x000D_
Your browser does not support the video tag or the file format of this video._x000D_
</video>
_x000D_
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/
<video width="1000px" loop="true" autoplay="autoplay" controls muted></video>
worked for me
//You might want to add some scripts if your software doesn't support jQuery or giving any reference type error.
//Use above scripts only if the software you are working on doesn't support jQuery.
$(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; });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>
Source: Stackoverflow.com