Question

我想在页面上使用集成的Vimeo视频，并在页面加载后立即开始播放，第一个视频完成后，第二个视频开始播放。在我的代码中，我有一个视频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

你的第一个问题在于

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

如果没有在options对象中指定视频（或作为关联元素的html属性），则无法创建Vimeo.Player。

所以，指定：

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

或：

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

将允许您加载视频。

但这会引发您的第二个问题，即playMovie不会等待您当前播放的视频完成，而是立即将视频换出。 getEnded()不是同步阻止函数。

您要做的就是听ended事件。并且还会转动loop: true，因为这会禁用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

Vimeo视频无法加载

1 个答案: