用于嵌入式YouTube视频的自定义播放按钮

我目前正在为一个自行车网站做一个项目，在那里他们有一个锻炼歌曲的小列表。这些歌曲中有一些链接到YouTube视频，所以你可以听到这首歌

我必须这样做，所以在歌曲的概述中，有一个小的播放按钮，当点击它时，播放选定的youtube视频。但是视频应该是隐藏的，所以你只能听到音乐

单击后，该按钮将变为暂停或停止按钮，因此您可以再次停止音乐

但我可以在youtube或其他媒体上找到指导原则。 所以我希望我能在这里得到一些帮助

该网站必须加载至少10个YouTube视频，并且所有视频都应该有一个自定义的播放/停止按钮。有人能帮我吗？：）

谢谢

-托马斯

<?
$yt_video = "http://www.youtube.com/watch?v=AfgdUfDgCq8";

$jw = <<< EOF

<script type='text/javascript' src='jwplayer.js'></script>
<div id='mediaspace' style="display:none;visibility:hidden;">This text will be replaced</div>

<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'http://player.longtailvideo.com/player.swf',
    'file': '{$yt_video}',
    'controlbar': 'bottom',
    'width': '1',
    'height': '1',
    'autostart': 'true'
  });
</script>
EOF;

echo $jw;

?>
<a href="#" onclick="javascript:document.getElementById('mediaspace').sendEvent('PLAY');return false;">play/pause toggle</a><br />
<a href="#" onclick="javascript:document.getElementById('mediaspace').sendEvent('LOAD', 'http://www.youtube.com/watch?v=ZNXUXujoX4M'); return false;">Video 1</a><br />
<a href="#" onclick="javascript:document.getElementById('mediaspace').sendEvent('LOAD', 'http://www.youtube.com/watch?v=gE5tOEU7ymU'); return false;">Video 2</a><br />
<a href="#" onclick="javascript:document.getElementById('mediaspace').sendEvent('LOAD', 'http://politicos.biz/stack/playlist.xml'); return false;">Load Playlist</a><br />
<a href="#" onclick="javascript:document.getElementById('mediaspace').sendEvent('NEXT'); return false;">Next Video on Playlist</a><br />
<a href="#" onclick="javascript:document.getElementById('mediaspace').sendEvent('PREV'); return false;">Previous Video on Playlist</a><br />

您需要下载并更改

jwplayer.js

和

player.swf

（可选）位置。您还需要创建一个文件并将其放置在域的根文件夹中

我希望它能帮助你：）

活生生的例子@

似乎表明，要做到这一点并不容易。YouTube API是否允许这样做看起来确实有办法定制播放/停止按钮。只是想不出我该如何让它与不止一个youtube视频一起工作。要隐藏它们，只需使用style=“display:none；”。