Question

我尝试为自动播放视频制作替代方案。它在桌面上工作正常但仍然需要点击移动设备。至少在我的三星Galaxy Express和Chrome上我试过了。想法是按钮显示：如果自动播放运行良好，则为无。
所以我有用JS触发的播放/暂停按钮的Html视频。为了进行自动播放，我模拟了点击功能点击onLoad似乎有点发生，因为它在加载页面时看起来像一个暂停按钮。但是在点击之前视频没有播放。
我知道手机不支持HTML5视频自动播放。我也知道有类似的问题。但是知道我想了解JS的情况。并且当然不会介意自动播放移动设备的解决方案。

这是我的代码。

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Js Philosophy</title>
<script type="text/javascript">
function ClickButton()
{
document.getElementById('play').click();
}
</script>
</head>
<body onload="ClickButton()">
<script type="text/javascript">

  function vidplay() {
     var video = document.getElementById("Video1");
     var button = document.getElementById("play");
     if (video.paused) {
        video.play();
        button.textContent = "||";
     } else {
        video.pause();
        button.textContent = ">";
     }
  }
  </script>

        <div >

        <video id="Video1" width="100%" poster="/video/thumb1.jpg">
           <source src="/video/peakvideo.mp4" type="video/mp4" />
            <source src="/video/peakvideo2.mp4" type="video/mp4" />
             <source src="/video/peakvideo.webm" type="video/webm" />
             <source src="/video/peakvideo.ogv" type="video/ogv" />
             not supported
        </video>

        <div id="buttonbar" class="">
            <button id="play" onclick="vidplay()">&gt;</button>
        </div>
            </div>
            <div class="main">Ur stuff beginsss here under</div>
</div>
</body>
</html>

Answer 1

您无需模仿点击。只需在加载DOM后运行您的函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Js Philosophy</title>

  <script type="text/javascript">
    function vidplay() {
      var video = document.getElementById("Video1");
      var button = document.getElementById("play");
      if (video.paused) {
         video.play();
         button.textContent = "||";
      } else {
         video.pause();
         button.textContent = ">";
      }
    }

    document.addEventListener("DOMContentLoaded", function(event) {
      vidplay();
    });
  </script>
</head>
<body>
  <div>
    <video id="Video1" width="100%" poster="/video/thumb1.jpg">
      <source src="/video/peakvideo.mp4" type="video/mp4" />
      <source src="/video/peakvideo2.mp4" type="video/mp4" />
      <source src="/video/peakvideo.webm" type="video/webm" />
      <source src="/video/peakvideo.ogv" type="video/ogv" />
      not supported
    </video>

    <div id="buttonbar" class="">
      <button id="play" onclick="vidplay()">&gt;</button>
    </div>
  </div>

  <div class="main">Ur stuff beginsss here under</div>
</body>
</html>

您还有无效的标记。最后一个结束div。

<强>更新

找到documentation。这是在iOS上被禁止的。还发现重复：

Can you autoplay HTML5 videos on the iPad?

Autoplay an Audio File on Mobile Safari

How can I autoplay media in iOS >= 4.2.1 Mobile Safari?

模拟点击onLoad无法在移动设备上运行

1 个答案: