在php循环中单击链接时暂停youtube iframe嵌入

时间:2012-06-18 23:46:18

标签: php javascript youtube-api youtube-javascript-api

所以我花了很长时间,但我能够得到它,以便当你点击我页面上的链接时,它会暂停在youtube iframe中播放的视频。但是,在我的页面上,我有多个视频,并通过循环检索它们。当点击链接时,我将如何处理所有视频停止,无论它们在哪里。

现在链接仅在循环中有一个视频时有效,一旦我引入2,它就会停止工作。

这是我的javascript

/*
 * @author       Rob W (http://stackoverflow.com/a/7513356/938089
 * @description  Executes function on a framed YouTube video (see previous link)
 *               For a full list of possible functions, see:
 *               http://code.google.com/apis/youtube/js_api_reference.html
 * @param String frame_id The id of (the div containing) the frame
 * @param String func     Desired function to call, eg. "playVideo"
 * @param Array  args     (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
        "event": "command",
        "func": func,
        "args": args || [],
        "id": frame_id
    }), "*");
}
}

我的代码

<div id="work">
<? $rows = $db->fetch_all_array($work_sql);
foreach($rows as $record){
    $vimeo = "Vimeo";
    $youtube = "Youtube"; ?>
    <h3 onClick="javascript:void callPlayer('ytplayer','pauseVideo')">
        <a id="clickable" href="javascript:void callPlayer('ytplayer','pauseVideo')">
            <div class="workitem">
                <span class="mosaic-overlay">
                    <div class="details">
                        <? echo stripslashes ( "
                        <span class='title'>$record[title]
                        </span>
                    <br />
                        <span class='subtitle'>$record[subtitle]
                        </span>
                    </div>
                </span>
                <span class='mosaic-backdrop'>
                    <img src='img/work/$record[image]' />
                </span>
            </div>
        </a>
    </h3>
    <div class='player'>
        <div class='playertitle'>$record[title] - $record[subtitle]</div>
        <div class='video'>

                            <div id='ytplayer'><iframe width='531' height='325' src='http://www.youtube.com/embed/$record[code]?enablejsapi=1&rel=0&wmode=transparent&showinfo=0&showsearch=0&iv_load_policy=3' frameborder='0' allowfullscreen></iframe></div>

            </div>

        </div>");
} ?>

任何建议都会很棒

0 个答案:

没有答案