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

Question

我目前正在为一个自行车站点开发一个项目，那里有一小部分健身歌曲。其中一些歌曲带有指向 YouTube 视频的链接，因此您可以听到这首歌。

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

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

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

该网站必须加载至少 10 个 YouTube 视频，并且所有视频都应该有一个自定义播放/停止按钮。那么任何人都可以帮助我吗？ :)

谢谢

-托马斯

Answer 1

<?
$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 />

您需要下载http://www.longtailvideo.com/players/jw-flv-player/ 并更改jwplayer.js 和player.swf（可选）位置。您还需要创建一个crossdomain.xml 文件并将其放在您域的根文件夹中。

希望对你有帮助:)

实例@http://x.co/ZEpd