html5视频无法在没有控件的情况下在Android上播放

时间:2016-12-16 14:20:46

标签: android html5 video

Goodday,

我对网站上使用的视频资源有疑问。我在这里做了一个小提琴:

https://jsfiddle.net/cgzLkqqc/

HTML

<div id="video_container">
  <video poster="" width="500" id="showReelVid" loop preload>
    <source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
    Your browser does not support HTML5 video :(.
  </video>
</div>

的Javascript

var showReelVid = document.getElementById("showReelVid"); 

showReelVid.play();

现在这可以在网络上正常运行,但是如果没有为视频标签添加控件,它似乎无法在Android手机上运行。有没有人知道我在这里缺少什么因为我看到它在使用没有控件的全屏视频的其他网站上有效。

干杯。

1 个答案:

答案 0 :(得分:0)

只允许将muted属性设置为true的视频元素在Android和iOS设备上自动播放。

以下示例将自动播放:

<div id="video_container">
    <video poster="" width="500" id="showReelVid" muted autoplay loop preload>
        <source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
        Your browser does not support HTML5 video :(.
    </video>
</div>

https://jsfiddle.net/16j6851z/

如果您需要音频,请点击(或使用其他用户输入)播放视频:

<强> HTML

<div id="video_container">
  <video poster="" width="500" id="showReelVid" loop preload>
    <source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4"> Your browser does not support HTML5 video :(.
  </video>
</div>

<强> JS

var showReelVid = document.getElementById("showReelVid");
showReelVid.onclick = function() {
  showReelVid.play();
};

https://jsfiddle.net/p8cmv1vc/