Question

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

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

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

Answer 1

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

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

我有一个有用的想法，但在许多浏览器上看起来相当不错。使用风险自负，因为我在铬（但不是铬）上找到了，当我进入窗口时，我的光标消失了。

基本思想是跟踪我们在DOM中可以访问的事件 - 在这种情况下，我只是跟踪鼠标悬停，但您可能也想检查其他一些事件。当您将鼠标悬停在一个视频上时，它将浏览其他视频，复制其iframe节点，删除原始视频并替换它。这基本上通过删除它并将其重新添加来“停止”视频。如果你添加一些更智能的逻辑，你可以只对可能正在播放的视频（即你已经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的

3 个答案: