勉強したことのメモ

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

  関連記事

Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法

Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...

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

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

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...