首页 > 解决方案 > 如何让 chrome 允许视频自动播放?

问题描述

我找到了其他答案,但没有一个对我有用。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>

标签: google-chromevideoautoplay

解决方案


1 方法。将 chrome://flags/#autoplay-policy 中的自动播放策略更改为“不需要用户手势” 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>

推荐阅读