无法弄清楚如何在点击时暂停YouTube视频 [英] Can't Figure Out How to Pause YouTube Video on Click

问题描述

我的用户使用的是旧的嵌入方法，即利用YouTube给您的标签而不是iframe.我正在尝试找出当用户与其互动时如何检测播放器状态(暂停，播放等)时的功能，以便在用户单击下一张幻灯片时暂停播放视频.

My users are using the old embed method of utilizing the tag YouTube gives you instead of the iframe. I'm trying to figure out how to detect the player state (when it's paused, playing etc) when a user interacts with it so I can pause the video when the user clicks to the next slide.

当前使用Wordpress，我有一个metabox，可让他们粘贴到YouTube嵌入代码中，然后将该代码块输出到滑块上.我正在使用本地主机(例如: http://mysite.dev ).要知道的是，用户可能在滑块上有多个视频.

Currently using Wordpress I have a metabox that allows them to paste in the YouTube embed code and then I output that block of code onto the slider. I'm working on my localhost (example: http://mysite.dev). Something to know is that potentially the user could have multiple videos on the slider.

我一生都无法执行YouTube API.

For the life of me I can't get the YouTube API to execute.

1)这是粘贴到框中的youtube嵌入对象

1) This is the youtube embed object they are pasting into the box

<object width="475" height="271">
    <param name="movie" value="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US" type="application/x-shockwave-flash" width="475" height="271" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

2)该视频位于我用以下元素制作的滑块中:

2) This video is in a slider I made with a div of:

<div class="videoContainer">
   [there youtube embed code outputs here - see point 1]
</div>

我正在使用JQuery，并且尝试像这样调用API:

I'm using JQuery and I've tried calling the API like so:

function onYouTubePlayerReady(playerId) {
    // using the class and the tag as selector because there could be 
    // multiple videos *and* the user might not put an ID in the object tag
    ytplayer = $('.videoContainer object'); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

我在jQuery(document).ready(function($){});中包含一个名为stopCycle的函数；代码块，当用户单击到下一张幻灯片时，我需要调用此函数.

I have a function called stopCycle contained within a jQuery(document).ready(function($) {}); code block and it's this function that I need to call when the user clicks to the next slide.

这是我的问题:

1. 我需要调用任何外部JavaScript文件吗?
2. 在我的JQuery文档就绪块中，如何调用YouTube api来检查视频是否正在播放?
3. 代码中还有其他我想念的东西吗?还是需要查看的东西?

我想知道让它们仅输入YouTube URL，然后使用JQuery SWFObject输出视频是否会更好.我不知道该怎么做，就是循环播放每张幻灯片的视频(共5张).那么，如果每个滑块都有一个视频，我该怎么做?

I'm wondering if it would be better to have them only enter the YouTube URL and then I'll output the video using JQuery SWFObject. What I don't know how to do is loop out the video for each slide (total of 5). So if they had a video for each slider how would I do that?

我知道...这里完全充满了问题.

I know... totally loaded full of questions here.

推荐答案

如果您使用的是Youtube API，则应该可以像这样暂停视频:

If you're using the Youtube API, you should be able to pause the video like this:

var ytplayer = document.getElementById("myytplayer");
pauseVideo = function(){
    if (ytplayer){
        ytplayer.pauseVideo();
    }
}

<a href="javascript:void(0);" onclick="pauseVideo();">Pause</a>

有关详细信息，请参见此处:
http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

See here for details:
http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

编辑

如果嵌入式播放器没有ID，则可以尝试执行以下操作:

If the embedded player does not have an ID, you can try something like this:

function onYouTubePlayerReady(playerId) {
    $("#" + playerId)[0].addEventListener('onStateChange', "(function(state) { return playerState(state, '" + playerId + "'); })");
}

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}

这篇关于无法弄清楚如何在点击时暂停YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！