YouTube Player APIで開始位置と再生時間を設定し再生する方法

HTML

<div id="player"></div>

JavaScript

//--- 非同期でIFrame Player Apiコードを読み込み ---
//scriptタグを生成
var tag = document.createElement('script');

//生成したscriptのソースを設定
tag.src = "https://www.youtube.com/iframe_api";

//先頭のscriptタグを取得
var firstScriptTag = document.getElementsByTagName('script')[0];

//先頭のscriptタグの前に生成したscriptタグを挿入
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


//IFrameを作成します。上記APIコードの読み込みが完了後、呼び出される
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        width:'100%',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
}

//上記で設定したプレーヤーの準備ができたときに実行される
function onPlayerReady(event) {
  player.loadVideoById('M7lc1UVf-VE', 10 , "large");
}

//プレーヤーの状態が変更される度に発生
function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.PLAYING) {
        var playTime=3000; //再生時間を3秒に設定

        //タイマー処理により再生中の動画を監視
        checkID=setTimeout(function(){
            player.stopVideo();
        }, playTime);

    }
}

上記の様な再生方法でバーチャメーカを実装しています。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です