播放另一个时暂停 YouTube iframe 嵌入 [英] Pause YouTube iframe embed when playing another

问题描述

我在一个页面上嵌入了多个 YouTube iFrame.如果其中一部电影已经在播放，然后用户决定开始播放另一部电影，是否可以停止播放第一部电影，从而一次只播放一部电影?

I have multiple YouTube iFrames embedded on a page. If one of the movies is already playing, and a user then decides to start playing a different movie, is it possible to stop playing the first movie so there is only ever one playing at a time?

我查看了iframe 嵌入的 YouTube 播放器 API 参考"https://developers.google.com/youtube/iframe_api_reference 但老实说，我就是不明白.我的开发人员技能非常有限......显然.

I have looked at the 'YouTube Player API Reference for iframe Embeds' https://developers.google.com/youtube/iframe_api_reference but if i'm honest I just don't understand it. My developer skills are very limited.... clearly.

我知道很可怜，但这就是我目前所拥有的(只是 iFrames)... http://jsfiddle.net/YGMUJ/

Pitiful I know, but this is all I have at the moment (just the iFrames)... http://jsfiddle.net/YGMUJ/

<iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

我认为我需要做的就是在视频 URL 的末尾添加&enablejsapi=1".

I thought all I needed to do was add '&enablejsapi=1' at the end of the video URLs.

任何帮助将不胜感激.
提前谢谢你.

Any help would be much appreciated.
Thank you in advance.

推荐答案

您实际上想要使用 iFrame Player API，而不是使用 iframe.根据您实际想要嵌入的视频数量，您可能希望让这个 javascript 更具动态性，但这个工作示例应该足以让您开始使用.

Instead of using iframes, you actually want to use the iFrame Player API. Depending on how many videos you actually wanted to embed, you might want to make this javascript more dynamic, but this working example should give you enough to get started.

基本上我在这里做的是初始化两个播放器，并在播放器状态更改为播放时暂停相反的视频.

Basically what I'm doing here is initializing the two players, and pausing the opposite video when a player state changes to play.

您可以在 http://jsfiddle.net/mattkoskela/Whxjx/

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

var player;
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player1', {
        height: '293',
        width: '520',
        videoId: 'zXV8GMSc5Vg',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player2 = new YT.Player('player2', {
        height: '293',
        width: '520',
        videoId: 'LTy0TzA_4DQ',
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        stopVideo(event.target.a.id);
    }
}

function stopVideo(player_id) {
    if (player_id == "player1") {
        player2.stopVideo();
    } else if (player_id == "player2") {
        player1.stopVideo();
    }
}

这篇关于播放另一个时暂停 YouTube iframe 嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！