Question

我目前正在为自行车网站开展一个项目，他们有一小部分健身歌曲。其中一些歌曲有一个YouTube视频的链接，因此您可以听到这首歌。

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

单击时，按钮会变为暂停或停止按钮，因此您可以再次停止播放音乐。

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

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

由于

-Thomas

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

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

1 个答案: