当前播放时如何停止其他视频？ JavaScript

Question

我有一个包含不同视频的网络应用程序（Youtube + DailyMotion）

我一直在寻找如何停止 Youtube iframe 视频，或在当前播放时停止其他 youtube DailyMotion 视频。

或者如何只启用全屏视频。我只想避免同时播放超过 1 个视频。

Answer 1

如果您知道视频 ID，则可以以编程方式呈现视频播放器：

加载 youtube API 并定义占位符 (#playList)

<script src='//www.youtube.com/player_api'></script>
<div id='playList'>
    <!--// placeholder -->
</div>

页面加载时：

var playList = [
    { videoId: 'aEHIgjoueeg', player: null, $el: null },
    { videoId: 'c5NcaVp2-5M', player: null, $el: null },
    { videoId: 'IA88AS6Wy_4', player: null, $el: null }
];
function onStateChange (e) {
    if (YT.PlayerState.PLAYING === e.data) {
        console.log(this, e);
        // stop others
        $.each(playList, function (i, item) {
            if (item.videoId === this.videoId) {
                return true;
            }
            if (item.player) {
                item.player.stopVideo();
            }
        }.bind(this));
    }
}
var $playList = $('#playList');
$.each(playList, function (i, item) {
    item.$el = $('<div id="'+ item.videoId +'"></div>');
    $playList.append(item.$el);
    item.player = new window.YT.Player(item.videoId, {
        width: 300, height: 200,
        videoId: item.videoId,
        playerVars: { autoplay: 0 },
        events: {
            onStateChange: onStateChange.bind(item)
        }
    });
});

onStateChange 内部：如果当前视频正在播放，则停止其他视频 http://jsfiddle.net/34hysaes/

Answer 2

您可以尝试编写与 youtube 和 dailymotion 的特定 API 交互的代码，但您可以只使用 JS 替换 iframe 节点或其源属性。这意味着视频也不会在后台继续加载，以防这是同一视频的其他来源。

http://jsfiddle.net/wesakm78/

function selectVideo(e) {
    document.getElementById("videoFrame").src = e.target.getAttribute("data-source");
}

document.getElementById("youtubeButton").addEventListener("click", selectVideo);
document.getElementById("dailyButton").addEventListener("click", selectVideo);

<button id="youtubeButton" data-source="https://www.youtube.com/embed/dQw4w9WgXcQ">YouTube</button>
<button id="dailyButton" data-source="//www.dailymotion.com/embed/video/xsdji">Dailymotion</button>

<iframe id="videoFrame" width="480" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Answer 3

我有一个可行的想法，但在许多浏览器上似乎很不稳定。使用风险自负，因为我发现在我的铬（但不是铬）上，当我进入窗口时，我的光标消失了。

基本思想是跟踪我们在 DOM 中确实可以访问的事件 - 在本例中，我只是跟踪鼠标悬停，但您可能还想检查其他一些事件。当您将鼠标悬停在一个视频上时，它会通过其他视频，复制它们的 iframe 节点，删除原始视频并替换它。这实质上是通过删除视频并将其重新添加来“停止”视频。如果您添加一些更智能的逻辑，您可以使其仅对可能正在播放的视频执行此操作（即您已经通过鼠标点击/点击的视频）。

document.addEventListener('DOMContentLoaded', function() {
  var windows = [];
  var getVids = function() {
    return document.querySelectorAll('.youtube');
  };
  var vids = getVids();

  [].forEach.call(vids, function(video) {
    // Build window list of iframes
    video.addEventListener('mouseover', function(ev) {
      [].forEach.call(vids, function(othervid) {
        if (othervid !== video) {
          var newvid = othervid.cloneNode(true);
          var parent = othervid.parentNode;
          parent.insertBefore(newvid, othervid);
          parent.removeChild(othervid);
          // Reset to new vid list
          vids = getVids();
        }
      });
    });
  });
});

我意识到这需要一些工作才能在您的实施中顺利运行，但希望这个概念足以让您开始。