[video] HTML5 Video Autoplay not working correctly

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

The answer is


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


_x000D_
_x000D_
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_
_x000D_
_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>

Examples related to video

How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66? How to make a movie out of images in python HTML5 Video autoplay on iPhone How do we download a blob url video Twitter - How to embed native video from someone else's tweet into a New Tweet or a DM How to embed new Youtube's live video permanent URL? How to disable auto-play for local video in iframe Writing an mp4 video using python opencv How to extract 1 screenshot for a video with ffmpeg at a given time? Bootstrap 3 - Responsive mp4-video

Examples related to video-streaming

What steps are needed to stream RTSP from FFmpeg? How to process images of a video, frame by frame, in video streaming using OpenCV and Python How to play .mp4 video in videoview in android? HTML5 Video Autoplay not working correctly Live-stream video from one android phone to another over WiFi Recording video feed from an IP camera over a network Play infinitely looping video on-load in HTML5 TCP vs UDP on video stream HTML5 live streaming Video streaming over websockets using JavaScript

Examples related to html5-video

How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66? In Chrome 55, prevent showing Download button for HTML 5 video HTML 5 Video "autoplay" not automatically starting in CHROME How to open .mov format video in HTML video Tag? What is a blob URL and why it is used? .mp4 file not playing in chrome HTML5 video won't play in Chrome only use video as background for div HTML5 Video tag not working in Safari , iPhone and iPad Video 100% width and height

Examples related to autoplay

HTML5 Video autoplay on iPhone How to disable auto-play for local video in iframe Autoplay an audio with HTML5 embed tag while the player is invisible Disable html5 video autoplay HTML5 Video Autoplay not working correctly Very Simple Image Slider/Slideshow with left and right button. No autoplay