Vimeoのビデオはロードされません

Question

ページに統合されたVimeoビデオを使用して、ページがロードされるとすぐに再生して、最初のビデオが終了すると2番目のビデオが開始されます。私のコードでは、ビデオIDの配列がありますが、私の問題はビデオが読み込まれないことです。

<div id="headervideo"></div> 
<script src="https://player.vimeo.com/api/player.js"></script> 

<script> 
//==================== 
document.addEventListener("DOMContentLoaded", function(event) { 
    var videos = ['240512614', '227735391']; // videos ids 
    var options = { 
     width: 640, 
     loop: true 
    }; 
    var player = new Vimeo.Player('headervideo', options); 
     playMovie(player, videos) 
})//end function 

//==================== 
var playMovie = function(player, videos) { 
    if(!videos.length){ 
     return false; 
    } 

     var video = videos.shift(); 
     alert (video) 
    player.loadVideo(videos).then(function(id) { 
      alert("the video successfully loaded ") 
     player.getEnded().then(function(ended) { 
      playMovie(player, videos) 
     }).catch(function(error) { 
      console.warn(error) 
     }); 
    }).catch(function(error) { 
     console.warn(error); 
    }); 
}//end function 
//==================== 
</script> 

Answer 1

あなたの最初の問題は、あなたがオプションオブジェクトでビデオを指定せずにVimeo.Playerを作成（または関連する要素のHTML属性として）することはできません

new Vimeo.Player('headervideo', options); 

です。

var video = videos.shift(); 
var options = { 
    width: 640, 
    loop: true, 
    id: video 
} 

か：：

ので、どちらかを指定

var options = { 
    width: 640, 
    loop: true, 
    id: videos[0] 
} 

は、あなたがビデオをロードできるようになります。

しかし、これはあなたの現在再生中のビデオが終了するのを待つのではなく、ただちにビデオをすぐに交換するという2番目の問題を提起します。 getEnded()は同期ブロック機能ではありません。

代わりに、endedイベントでリッスンします。そしてまたendedイベント

document.addEventListener("DOMContentLoaded", function(event) { 
    window.videos = ['240512614', '227735391']; // videos ids 
    var video = videos.shift(); 
    var options = { 
     width: 640, 
     loop: false, 
     id: video 

    }; 
    window.player = new Vimeo.Player('headervideo', options); 
    window.player.on('ended', playNext); 
    window.player.play(); 
})//end function 

//==================== 
var playNext= function() { 
    alert('foo'); 
    if(!window.videos.length){ 
     return false; 
    } 

    var video = window.videos.shift(); 
    alert (video); 
    player.loadVideo(video).then(function(id) { 
     alert("the video "+id+" successfully loaded "); 
     player.play(); 
    }).catch(function(error) { 
     console.warn(error) 
    }); 
}//end function