38040


初めまして。  
動画の再生タイミングを制御する方法についてお聞かせして欲しいです。

現在youtube埋め込み動画をYoutube Iframe APIを用いて再生させているのですが、  
現状autoplayであるためにページの読み込みと同時に再生されてしまい、  
視聴者が動画の位置にたどり着いた時には再生途中であるという状態です。

視聴者が動画の位置についてたどり着いた時に再生するためのコードを教えていただきたいです。

おそらくjavascriptを用いてseekedされた時にイベントが発生するというような内容になるのかなと思っております。

よろしくお願いいたします。


CC BY-SA 3.0
2017-09-18T20:52:51.997
38022
2017-09-21T04:44:57.213
25459
question
javascript youtube-player-api youtube
Youtube埋め込み動画の再生タイミング制御について


Youtubeのiframe windowへ postMessageでコマンド（メッセージ）を送れば制御できます。  
<https://developers.google.com/youtube/iframe_api_reference?hl=ja#playVideo>  
以下、簡易なサンプルです。（developers.google.com/youtube/iframe_api_referenceのコードを使いました。）

[code]

    <!DOCTYPE html>
    <html>
    
    <body>
    <div style="height: 1000px;width: 100%">1</div>
    <div style="height: 1000px;width: 100%">2</div>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div style="height: 1000px;width: 100%">3<div id="player"></div></div>
    <div style="height: 1000px;width: 100%">4</div>
    <div style="height: 1000px;width: 100%">5</div>
    
    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
    
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    
        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            //event.target.playVideo();
        }
    
        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
        }
        function stopVideo() {
           // player.stopVideo();
        }
    
        function actions(action){
            //pw = $('#player')[0].contentWindow;
            pw = document.getElementById('player').contentWindow;
            pw.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
        }
    
        process_f = false;
    
        window.addEventListener( "scroll", function(){
            var y = window.pageYOffset;
            var h = window.innerHeight;
            var element = document.getElementById('player');
            var rect = element.getBoundingClientRect();
            var point_a = rect.top+y
    
            p1 = point_a-(h)-rect.height;
            p2 = point_a+(h)-rect.height;
            if(!(p1 > y) && !(p2 < y)){
                if(!process_f){
    //                player.playVideo();
                    actions('playVideo');
                }
                process_f = true;
            }else{
                if(process_f) {
    //                player.stopVideo();
                    actions('stopVideo');
                }
                process_f = false;
            }
        }) ;
    
    </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-09-19T10:08:59.433
38040
2017-09-21T04:44:57.213
2017-09-21T04:44:57.213
22793
22793
38022
answer