如何制作Chrome允许视频自动播放?

时间:2018-05-16 14:49:48

标签: google-chrome video autoplay

我找到了其他答案,但没有一个对我有效。 Chrome不会自动播放。

当前代码:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/[...]
rel=0&amp;controls=0&amp;showinfo=0&autoplay=1" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>

在Firefox中自动播放,但在Chrome中不播放。没找到任何可靠的文档。

编辑(和解决方案):

基本上,Chrome需要将视频静音。如果静音,它将自动播放。

<video autoplay muted>
   [your sources here]
</video>

1 个答案:

答案 0 :(得分:2)

1方法。 将chrome:// flags /#autoplay-policy中的自动播放策略更改为&#34;不需要用户手势&#34; https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

2方法。 使用脚本

 <div id="player"></div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {
      videoId: '439frli5VbM', // YouTube Video ID
      width: 560, // Player width (in px)
      height: 316, // Player height (in px)
      playerVars: {
        autoplay: 1, // Auto-play the video on load
        controls: 1, // Show pause/play buttons in player
        showinfo: 0, // Hide the video title
        modestbranding: 1, // Hide the Youtube Logo
        loop: 1, // Run the video in a loop
        fs: 0, // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3, // Hide the Video Annotations
        autohide: 0 // Hide video controls when playing
      },
      events: {
        onReady: function(e) {
          e.target.mute();
        }
      }
    });
  }

</script>