How to resume embedded YouTube video?

问题

I used //www.youtube.com/embed/JDcaMVwCr3c?wmode=opaque&showinfo=0&autoplay=1&controls=0&modestbranding=1&vq=&rel=0 url to embed a video in my site.

Now, if a user visits the site, the video will be played, but if the user doesn't watch the full video and reload page or leave the site and come back again after some time then the video is now playing from the beginning.

I would like to resume the video from the point which the user has left it. In the same way as the YouTube site does.

Is this something that YouTube provides with an API?

回答1:

Please refer to the following example with comment.

<html>
<head>
</head>
<body>
    <div id="ytplayer"></div>
    <script>
        // Load the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // Replace the 'ytplayer' element with an <iframe> and
        // YouTube player after the API code downloads.
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('ytplayer', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',  // Youtube video ID
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange,
                }

            });

        }

        function onPlayerStateChange() {
            createCookie('ply_time', player.getCurrentTime(), 1);  // Stats like buffer, Pause and play store time in Cookes 

        }

        function onPlayerReady() {
            player.seekTo(readCookie('ply_time'));  // On ready get ccokies  and start vide from that.
        }

        document.unload = function() {                              // On docucment unload set cookie
            createCookie('ply_time', player.getCurrentTime(), 1);
        }

        window.onbeforeunload = function() {              // On Window unload set cookie
            createCookie('ply_time', player.getCurrentTime(), 1);
        }


        /* 
         * Start:-  function to create , read and erase Cookie 
         */

        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else
                var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ')
                    c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0)
                    return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        function eraseCookie(name) {
            createCookie(name, "", -1);
        }

        /* 
         * End:-  function to create , read and erase Cookie 
         */

    </script>    
</body>

来源：https://stackoverflow.com/questions/39469284/how-to-resume-embedded-youtube-video

标签

javascript

php

video

youtube

youtube-iframe-api