勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法

  JavaScript

YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaScriptのイベント(関数)を実行させたい。調べたところYouTubeのIFrame Player APIというものを利用することで対応できる模様。以下にサンプルページとソースコードをメモ。

 

IFrame Player API

リファレンス

https://developers.google.com/youtube/iframe_api_reference?hl=ja

 

サンプルページ

https://taitan916.info/sample/youtube/end_hook/

再生終了時にアラートが表示される。尚、早送りしてもOK。

 

実装方法

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>YouTubeの再生終了時にJavaScriptを実行するサンプル</title>
</head>
<body>

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

    <script>
    //iframeAPIの読み込み
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;

    //YouTubeプレイヤーの生成
    function onYouTubeIframeAPIReady(){
        player = new YT.Player(
            "player",
            {
                height: '360',
                width: '640',
                videoId: '2y4FpKh7L8w',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            }
        );
    }

    //プレイヤーの再生
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    var end_flg = false;

    //プレーヤーの状態が変化した際に呼び出される関数
    function onPlayerStateChange(event){
        var ytStatus = event.data;

        //再生終了時
        if( ytStatus == YT.PlayerState.ENDED && !end_flg ){
            end_flg = true;
            alert('再生が終了しました。');
        }
    }
    </script>
</body>
</html>

解説等

onYouTubeIframeAPIReady部分でYouTubeプレイヤーを生成しつつ、events部分でWPのアクションフックみたいに各関数を紐づける形。

再生終了時の「if( ytStatus == YT.PlayerState.ENDED && !end_flg )」の部分だけど再生終了の都度実行される。つまり「再生終了→シークバーで戻す→再生終了」といったケースだと2回実行される。そのためend_flgで制御する形を取った。

 

所感

パラメータを指定することでコントローラを非表示にもできるようなので、今回のソースコードと組み合わせると「シークバーでの早送りは防ぎつつ、動画再生終了時にイベントを実行させる」ということができると思われる。プロモーション関連のページ等で使えそう。

 - JavaScript

  関連記事

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...

Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...