2

我的用户正在使用旧的嵌入方法来利用 YouTube 为您提供的标签，而不是 iframe。我试图弄清楚当用户与其交互时如何检测播放器状态（当它被暂停、播放等），以便当用户点击下一张幻灯片时我可以暂停视频。

目前使用 Wordpress，我有一个元框，允许他们粘贴 YouTube 嵌入代码，然后我将该代码块输出到滑块上。我正在我的本地主机上工作（例如：http://mysite.dev）。需要知道的是，用户可能在滑块上有多个视频。

对于我的生活，我无法让 YouTube API 执行。

1）这是他们粘贴到框中的 youtube 嵌入对象

<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）这个视频在我用一个div制作的滑块中：

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

我正在使用 JQuery，我尝试像这样调用 API：

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

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

所以这是我的问题：

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

我想知道让他们只输入 YouTube URL 是否会更好，然后我将使用 JQuery SWFObject 输出视频。我不知道该怎么做是循环播放每张幻灯片的视频（总共 5 个）。因此，如果他们有每个滑块的视频，我会怎么做？

我知道……这里满是问题。

4

3 回答 3

0

从我看到你有一个错误：

ytplayer = $('.videoContainer object'); 
//should be
ytplayer = document.getElementById("myytplayer");

然后你可以在这里使用任何api调用，一切都应该正常工作。

您不能为此使用 jQuery 选择器的原因是因为需要一个<embed>元素。jQuery 返回的是与选择器匹配的所有元素的数组。

要回答您的问题：

  • 1）除非你有你的 js 在外部文件中
  • 2) 获取当前视频ytplayer .getVideoUrl()
  • 3) 如前所述
  • 4/5）您可以使用以下方法设置播放列表：ytplayer .cuePlaylist
于 2011-10-20T17:24:12.300 回答
0

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

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

编辑

如果嵌入式播放器没有 ID，您可以尝试以下操作：

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

function playerState(state, playerId) {
    console.log(state);
    console.log(playerId);
}
于 2011-10-20T18:00:44.863 回答
0 
$('iframe').each(function(i,e){
    let iframeSrc = $(e).attr('src');
    $(e).attr('src',iframeSrc);
});

这将为所有视频重置 src，您可以将其修改为仅针对一个

let iframeSrc = $('.youtube_video').attr('src');
$('.youtube_video').attr('src',iframeSrc);

将“.youtube_video”类替换为您的实际 iframe 类

注意：不要忘记在点击事件上触发它

于 2021-07-03T05:04:22.470 回答