###前提・実現したいこと
[1]YoutubeAPIを使用し、三つの動画を同ページ内で切り替え
[2]すべての動画に、動画のタイトルを表示させる
[1]はこちらのサイトを参考に作成しました。
http://phpjavascriptroom.com/example3.php?f=bW9kdWxlL2luY2x1ZGUvc3RybS95b3V0dWJlaWZyYW1lcGxheWVyYXBpL2N1ZVZpZGVvQnlJZC5pbmM
ですが、playerVars:showinfo を'1'にしても、動画タイトルが最初に表示される動画のみにしかつきません。
どなたかわかる方、お教えいただけませんでしょうか。
###HTML
<div id="playerbox"><div id='player'></div></div> <ul id="playlist"> <li><a rel="9YEEl52u8XE">Sleeping Dog</a></li> <li><a rel="XfkXW49bXfo">Hiyoko of Tea</a></li> <li><a rel="j4zpzF0R1ow">The fireworks of Tokyo Disney lan</a></li> </ul> </div>
###JavaScript
var player; function fGetScript(){ $.ajax({ url:"http://www.youtube.com/player_api/", dataType:"script", success:function(data){ window.onYouTubeIframeAPIReady=function() { var first=$("#playlist li a").eq(0); first.css("font-weight","bold"); loadPlayer(first.attr("rel")); } }, error:function(xhr, status, thrown) { fGetScript(); } }); } fGetScript(); function loadPlayer(videoID) { if(!player){ player = new YT.Player( 'player',{ width: '800', height: '450', videoId: videoID, events: { 'onReady': onPlayerReady }, playerVars: { rel: 0, showinfo : 1, controls : 2 } }); }else{ player.cueVideoById(videoID); } } function onPlayerReady(event){ event.target.setVolume(50); } $("#playlist > li > a").click(function(){ loadPlayer($(this).attr("rel")); $(this).parent().parent().find("a").css("font-weight","normal"); $(this).css("font-weight","bold"); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/05 03:48