WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

YouTube API

f:id:mmmmofu:20160915195116p:plain

YouTube APIを使用し、
再生、一時停止、1分前へ、1分先へ、音量アップ、音量ダウン、ミュートにする
ボタンを作る。

参考:

developers.google.com

www.tam-tam.co.jp

デモ

http://efu.sakura.ne.jp/web/youtubeapi/


<div id="sample"></div>
<div>
  <button id="play">再生</button>
  <button id="pause">一時停止</button>
  <button id="prev">1分前へ</button>
  <button id="next">1分先へ</button>
  <button id="volup">音量アップ</button>
  <button id="voldown">音量ダウン</button>
  <button id="mute">ミュート</button>
</div>
//IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//youtubeの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
    'sample',//埋め込む場所の指定
    {
      width: 640,//プレイヤーの幅
      height: 390,//プレイヤーの高さ
      videoId: 'VyzqHFdzBKg'//YouTubeのID
    }
  );
}

//ボタンを押した時の処理
$(function(){
  //再生
  $('#play').click(function(){
    ytPlayer.playVideo();
  });
  //一時停止
  $('#pause').click(function(){
    ytPlayer.pauseVideo()
  });
  //1分前へ
  $('#prev').click(function(){
    //現在の再生時間を取得
    var currentTime = ytPlayer.getCurrentTime();
    //シークバーの移動
    ytPlayer.seekTo(currentTime - 60);
  });
  //1分後へ
  $('#next').click(function(){
    //現在の再生時間を取得
    var currentTime = ytPlayer.getCurrentTime();
    //シークバーの移動
    ytPlayer.seekTo(currentTime + 60);
  });
  //音量アップ
  $('#volup').click(function(){
    //現在の音量を取得
    var currentVol = ytPlayer.getVolume();
    //音量を上げる
    ytPlayer.setVolume(currentVol + 10);
  });
  //音量ダウン
  $('#voldown').click(function(){
    //現在の音量を取得
    var currentVol = ytPlayer.getVolume();
    //音量を下げる
    ytPlayer.setVolume(currentVol - 10);
  });
  //ミュートしていたらミュート解除
  //ミュートしていなかったらミュート
  $('#mute').click(function(){
    //ミュートされているか
    if(ytPlayer.isMuted()){
      //ミュートの解除
      ytPlayer.unMute();
    } else {
      //ミュート
      ytPlayer.mute();
    }
  });
});

- 

以前書いたブログ

mmmmofu.hatenablog.com