Question

我的用户正在使用旧的嵌入方法来利用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（$）{}）中;代码块，这是我在用户点击下一张幻灯片时需要调用的函数。

所以这是我的问题：

我是否需要调用任何外部JavaScript文件？
在我的JQuery文档准备块中，如何调用YouTube API查看视频是否正在播放？
我的代码中还有其他什么东西，或者你需要看到的东西？

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

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

Answer 1

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

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

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

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

回答你的问题：

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

Answer 2

如果您使用的是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);
}

Answer 3

<?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”类

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

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

3 个答案: