无法从javascript自动播放HTML5视频

时间:2019-02-01 14:31:09

标签: javascript html

我有一个使用javascript加载和播放的html5视频,但是由于使用此方法,该视频将无法自动播放。如果我不加载并开始使用javascript,则视频并不总是加载,无论它是黑屏还是实际加载,似乎都是50/50的机会。有没有办法从javascript自动播放?

let addr = process.env.BASE_URL;
import JSON from `${addr}Data.json`;
$(document).ready(function() {
  var video = document.getElementById('video');
  var mp4 = document.getElementById('mp4');

  mp4.src = 'promo2.mp4';

  video.load();
  video.play();
});

2 个答案:

答案 0 :(得分:1)

我认为Chrome浏览器已阻止了javascript中的自动播放视频,或者至少已阻止了具有音频的自动播放视频。尝试使视频静音,然后自动播放。将这些HTML标签添加到video元素。

playsinline autoplay muted loop

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

答案 1 :(得分:0)

在JavaScript中将autoplay属性设置为true

请参见下面的代码段

$( 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>