I have an html5 video I am using javascript to load and play but since using this method the video will not autoplay. If I do not load and start using javascript the video doesn't always load it seems to be a 50/50 chance whether or not it is a black screen or it actually loads. Is there a way to autoplay from javascript?
$(document).ready(function() { var video = document.getElementById('video'); var mp4 = document.getElementById('mp4'); mp4.src = 'promo2.mp4'; video.load(); video.play(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divVideo" style="margin-top:30px;"> <video id="video" controls autoplay width="560"> <source id="mp4" type="video/mp4" /> </video> </div>
I believe that Chrome has blocked auto-playing videos from javascript, or at least has blocked auto-playing videos with audio. Try muting the video and then autoplay it. Add these HTML tags to the video element.
playsinline autoplay muted loop
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Set autoplay
property to true
in your javascript.
See the Snippet below:
$( document ).ready(function() { var video = document.getElementById('video'); var mp4 = document.getElementById('mp4'); mp4.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4'; video.autoplay = true; video.load(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divVideo" style="margin-top:30px;"> <video id="video" controls autoplay width="560"> <source id="mp4" type="video/mp4" /> </video> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.