有没有办法让嵌入式 Youtube 视频只播放一次?

Is there a way for Embeded Youtube videos to play only once?

我希望我的 YouTube 视频只能播放一次。这可能吗?我正在使用 iframe,但无法在网上找到任何东西。如果能提供任何帮助,我将不胜感激!

如果您将播放器控件设置为 0 应该是可能的。您可以在 this website. 上找到它的示例 它不会让它播放一次,但会让用户无法在任何其他时间干扰视频比停止它的方式。

是的,你能做到。阅读 iframe api 它有很多有用的函数和变量。

我不知道如果 iframe 元素是在 html 中制作的,但您可以通过 Javascript 制作它,就像 API 展示的那样。

这是您正在寻找的示例,iframe 似乎在堆栈代码段中不起作用。这是一个演示:https://jsfiddle.net/215mekhd/

您还可以使用隐藏控制器:playerVars: { 'controls': 0 }, 在第二个 YT.Player 参数的设置对象中。

   
      // 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);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player_id', {
          height: '390',
          width: '640',
          videoId: 'fUXdrl9ch_Q',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      
      function onPlayerStateChange(event) {
        if (event.data == 0) {
          player.destroy();
        }
      }
     
    
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player_id">this will be replaced with a video</div>

  </body>
</html>

进行嵌入时,只需在视频 ID 后添加“&autoplay=1”(视频中的字母顺序 url);现在您添加了“&mute=1”,因为 YouTube 不允许视频自动播放(如果它们现在没有静音)。此外,除非您循环播放,否则您的视频默认只会播放一次

这是没有任何调整的嵌入代码:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FJ3Bo2_x_PE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

现在具有自动播放和静音属性:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FJ3Bo2_x_PE?&autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

您可以查看此 codepen 以了解实际效果