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

Question

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

几个小时以来，我一直在寻找如何停止Youtube iframe视频，或在播放current时停止其他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)
        }
    });
});

Inside 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中可以访问的事件——在这种情况下，我只是在跟踪mouseover，但您可能也需要检查其他事件。当你用鼠标悬停在一个视频上时，它会遍历其他视频，重复它们的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();
        }
      });
    });
  });
});

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