无法弄清楚如何在点击时暂停YouTube视频

时间:2011-10-20 17:16:07

标签: jquery wordpress youtube-api youtube-javascript-api

我的用户正在使用旧的嵌入方法来利用YouTube提供的标签而不是iframe。我试图找出当用户与之交互时如何检测播放器状态(当它暂停,播放等)时,我可以在用户点击下一张幻灯片时暂停视频。

目前使用Wordpress我有一个元框,允许他们粘贴在YouTube嵌入代码中,然后我将该代码块输出到滑块上。我正在使用我的localhost(例如: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. 我的代码中还有其他什么东西,或者你需要看到的东西?
  4. 我想知道让他们只输入YouTube网址然后我会使用JQuery SWFObject输出视频会更好。我不知道怎么做是为每张幻灯片循环播放视频(共5张)。所以,如果他们有每个滑块的视频,我该怎么做?

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

3 个答案:

答案 0 :(得分:0)

从我看到的你有一个错误:

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

然后你可以使用任何api调用here,一切都应该正常工作

你不能使用jQuery选择器的原因是因为期望<embed>元素。 jQuery返回的是与选择器匹配的所有元素的数组。

回答你的问题:

  • 1)除非你的js在外部文件中,否则不会。
  • 2)获取当前视频ytplayer .getVideoUrl()
  • 3)如前所述
  • 4/5)您可以使用以下设置播放列表:ytplayer .cuePlaylist

答案 1 :(得分: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);
}

答案 2 :(得分:0)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mml.mig33">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Mig33">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.Mig33.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

这将重置所有视频的 src,您可以将其修改为仅定位一个

(activity as AppCompatActivity?)!!.setSupportActionBar(binding.toolbar)

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

注意:不要忘记在点击事件时触发这个