javascript - 使用 API 計算觀看的 YouTube 影片百分比

我正在製作一個包含影片和線上練習的線上課程，希望人們能夠登入並追蹤他們的進度。

有沒有辦法可以測量某人觀看 YouTube 嵌入影片的百分比，並在他們觀看超過 80% 時標記為完成？

到目前為止，我最好的想法是在玩家的狀態變為 PLAYING 時使用 getCurrentTime()，然後每隔大約五秒再次使用，將差值加到某種總數中。然而，如果有人看了第一分鐘五次，他們最終會得到一個被多計次的影片，即使他們並沒有完整觀看整個影片。

有沒有比上述通過計算觀看影片所花費的時間來計算影片觀看百分比的方法更優雅的解決方案？

答案＃1

像這樣的東西怎麼樣：

        var i; //Global variable so that you can reset interval easily

        function onYouTubePlayerReady(playerid) 
        {
            ytp = document.getElementById("ytvideo"); //get player on page
            ytp.d = ytp.getDuration(); //get video duration
            i = setInterval(checkPlayer, 5000); //check status

        }

        function onplayerReset() 
        {
            clearInterval(i);
        }

        function checkPlayer()
        {
            var p = ytp.getCurrentTime(); //get video position
            var d = ytp.d; //get video duration
            var c = p/d*100; //calculate % complete
            c = Math.round(c); //round to a whole number
            var t = document.getElementById('videotitle').innerHTML;

            if(ytp.isReset) { c = 0; }
            ytp.c=c;

            if(!ytp.completed) 
            {   
               if(c>=80) { _gaq.push(['_trackEvent', 'Video Status', t,'Complete']); ytp.completed=true; } // or do something else
            }

         }

答案＃2

我正在使用 AngularJS 的 Angular YouTube 嵌入模組（可在此處找到 https://github.com/brandly/angular-youtube-embed）。但這個解決方案對於純 Javascript/YouTube API 調用來說也同樣適用。我只是不想重新寫我的解決方案。

基本概念是將整個影片的長度切成任意大小的片段。在這個範例解決方案中，我把影片分成一系列 10 秒的片段。每隔 5 秒，計時器會檢查播放器中對應該片段的當前時間。重要的是，你測試的頻率應該比每個片段所代表的長度更頻繁。

getPctCompleted() 方法將給你視頻總長度的完成比例，無論用戶是否跳到視頻的結尾。

但是，高級用戶總是能夠偽造這個。因此，這其實並不能“證明”某人看過任何東西。它和來自用戶的任何其他輸入一樣是不可信的輸入。

       $scope.analyzer = {};
       $scope.timeElapsed = 0;
       $scope.videoLength = 0;

       $scope.$on('youtube.player.playing', function($event, player) {
           $scope.videoLength = player.getDuration();
           $scope.player = player;
           //start polling
           setInterval(function() {
                $scope.timeElapsed = $scope.player.getCurrentTime();
                $scope.analyzer[parseInt($scope.timeElapsed / 10)] = true;
                $scope.$apply();
           }, 5000);
       });

       $scope.getPctCompleted = function() {
           return Object.keys($scope.analyzer).length / (parseInt($scope.videoLength / 10));
       };