在隐藏 <DIV> 中暂停/恢复 YouTube答案

【问题标题】：Pause/Resume YouTube in Hidden <DIV>在隐藏 <DIV> 中暂停/恢复 YouTube
【发布时间】：2020-04-14 17:25:21
【问题描述】：

感谢 Mihail Minkov 帮助我为 YouTube API 打下了良好的基础。由于我显示的是播放列表而不是单个视频，因此不得不调整你给我的内容。

守则 HTML

    <body class="center">
        <div class="navbar">
            <a href="/index.html">Home</a>
            <a href="/main/application.html">Application</a>
            <a href="/main/games.html">Games</a>
            <a href="/main/leadership.html">Leadership</a>
            <a href="#Social" class="active">Social Media</a>
            <a href="#Social" class="active">Social Media</a>
        </div>
        <div class="top">
            <input type="image" src="/media_files/social_media/youtube.png" alt="YouTube" style="width:100px" onclick="img(1); pauseVideo();">
            <input type="image" src="/media_files/social_media/twitter.png" alt="Twitter" style="width:100px" onclick="img(0); pauseVideo();">
        </div>
        <div id="player"></div>
        <div id="twitter" hidden>
            <a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
    </body>

JavaScript

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

    function img(x) {
        if (x == 0) {
            document.getElementById('player').style.display = 'none';
            document.getElementById('twitter').style.display = 'block';
        }
        else {
            document.getElementById('player').style.display = 'block';
            document.getElementById('twitter').style.display = 'none';
        }
        return;
    }

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '600',
            width: '900',
            playerVars: {
                listType: 'playlist',
                list: 'PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e'
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }

    function pauseVideo() {
        player.pauseVideo();
    }

    function playVideo() {
        player.playVideo();
    }

这是当我在 YouTube<div> 和 Twitter<div> 问题之间切换时播放/暂停的修复。

【问题讨论】：

标签： javascript html youtube-javascript-api

【解决方案1】：

您所说的关于 ID 的内容无效。 ID 用于识别唯一元素。如果你把 ID 放在两个单独的元素上，它只会得到其中一个。它还会在控制台中显示警告。

另外，<div align="center"> 已过时。您应该使用像 <div style="text-align: center;"> 这样的内联样式，或者定义一个类 text-center 并将其应用于 div，如 <div class="text-center">。

此外，根据您所展示的内容，您拥有静态代码，但使用 YouTube JavaScript API，您只需要 <div id="player"></div> 元素并使用 JavaScript 初始化所有内容。你可以看到this example here。

如果我必须修改您的示例，我可能会执行以下操作：

HTML

<div style="text-align: center;">
    <input type="image" src="/media_files/social_media/youtube.png" alt="YouTube" style="width:100px" onclick="img(1); playVideo();">
    <input type="image" src="/media_files/social_media/twitter.png" alt="Twitter" style="width:100px" onclick="img(0); stopVideo();">
</div>
<div id="player"></div>
<div id="tw" style="text-align: center;" hidden>
    <a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

JavaScript

<script>
  var tag = document.createElement('script');

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

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      playerVars: 
      {
        listType:'playlist',
        list: 'PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e'
      }
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function playVideo() {
    player.playVideo();
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

我混合了您正在尝试做的事情和 Youtube Player API 文档中的示例。不确定它是否能解决您的问题，但我认为您应该检查一下。

【讨论】：

感谢您的帮助，上面的代码一开始不起作用，但是，我得到了它的工作。现在我试图让嵌入保持居中。 YouTube 播放器从页面中间（中心）开始，当我转到 twitter 提要时，播放器暂停，当我返回 YouTube 嵌入时，它与左侧对齐。这是我正在运行的单独文件。我明天会实现它，看看我拥有的 css 文件是否会保持居中。
尝试将<div id="player"></div> 放在居中的元素内。你可以做类似<div style="margin: 20px auto; max-width: 1200px;"><div id="player"></div></div> 的事情。不过，我建议使用响应式嵌入样式。