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

Question

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

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

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

Answer 1

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

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 2

我有一个可行的想法，但在许多浏览器上似乎很古怪。使用风险自负，因为我在我的铬上找到了（但不是 chrome），当我输入 window.

时，我的光标消失了

基本思路是跟踪我们在 DOM 中确实有权访问的事件 - 在这种情况下，我只是跟踪鼠标悬停，但您可能还想检查其他一些事件。当您将鼠标悬停在一个视频上时，它会遍历其他视频，复制它们的 iframe 节点，删除原始视频并替换它。这实质上是 'stops' 视频，方法是将其删除并重新添加。如果您添加一些更智能的逻辑，您可以让它只对可能正在播放的视频（即您已经 moused/tapped 的视频执行此操作）已经）。

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();
        }
      });
    });
  });
});

我知道这需要一些工作才能在您的实施中顺利运行，但希望这个概念足以让您入门。

Answer 3

如果您知道视频 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/

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

How stop the other videos when current is playing ? JavaScript

javascript

youtube-api