所以我花了很长时间,但我能够得到它,以便当你点击我页面上的链接时,它会暂停在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>");
} ?>
任何建议都会很棒