HTML5 Video Autoplay not working correctly

问题:

Im using this code:

<video width="440px" loop="true" autoplay="true" controls>
<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>

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.

Page can bee seen here: http://www.tuscorlloyds.com (video is in slider top right)

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

回答1:

Try autoplay="autoplay" instead of the "true" value. That's the documented way to enable autoplay. That sounds weirdly redundant, I know.

回答2:

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/

回答3:

Working solution October 2018, for videos including audio channel

 $(document).ready(function() {
     $('video').prop('muted',true).play()
 });

回答4:

As I observed, that autoplay attribute has been removed, HTML5 is not supporting Autoplay option anymore, even if you check the official HTML5 documentation, you will not find anything related to autoplay, as they have removed it from the documentation.

Reference: W3Schools. (2018, 09 07). HTML5 Video. Retrieved from www.w3schools.com: https://www.w3schools.com/html/html5_video.asp

There alternative solutions by using javascript.