YouTube API和Websockets确保两个视频同步(视频1在视频2缓冲时暂停)

Question

背景

我正在尝试将视频集成到幻灯片演示应用程序中.我已禁用学生端的控件,并且有一个播放/暂停按钮连接到YouTube API,以便在单击时通过推送器触发事件​​,并且视频将在教师屏幕和学生屏幕上启动.

难点

当其中一个用户的互联网连接速度较慢时,就会出现问题.如果教师的互联网速度比学生快,那么视频将不同步.

我的方法

我有一个功能,它使用YouTube API来控制视频的播放和暂停.

/**
 *
 */
togglePlay: function(){
    var videoId = this.videoId;
    if (this.isPlaying) {
        this.players[videoId].pauseVideo(); // Pauses the video
        this.isPlaying = false;
    } else {
        this.players[videoId].playVideo(); // Starts the video
        this.isPlaying = true;
    }
},

在视频对象内部,我添加了一个onStateChange事件监听器,在视频播放/暂停/缓冲时触发.该事件将发送到此功能.

/**
 *
 */
emittStateChange: function(e){
    switch(e.data) {
        // if the teachers video is...
        case 1: // playing
            pusher.channel4.trigger('client-youtube-triggered', {
                videoId: youtube.videoId,
                status: 1, // start the students video
            });
        break;
        case 2: // paused
            pusher.channel4.trigger('client-youtube-triggered', {
                videoId: youtube.videoId,
                status: 2, // pause the students video
            });
        break;
        case 3: // buffering
            pusher.channel4.trigger('client-youtube-triggered', {
                videoId: youtube.videoId,
                status: 2, // pause the students video
            });
    }
},

因此,当教师按下播放时,视频开始并且将游戏事件强制性地发送到上述功能.此功能向学生浏览器发送推送事件,状态为1表示播放视频.此功能接收此事件:

/**
 * 
 */
receiveStateChange: function(data){
    this.videoId = data.videoId;
    switch(data.status) {
        // if the teachers video is...
        case 1: // playing
            this.isPlaying = false;
            this.togglePlay();
        break;
        case 2: // paused
            this.isPlaying = true;
            this.togglePlay();
        break;
        case 2: // buffering
            this.isPlaying = true;
            this.togglePlay();
    }
},

我的理解

1. 老师按播放按钮
2. togglePlay() 叫做
3. this.isPlaying = false所以playVideo()被称为
4. 视频开始为老师播放
5. 然后YouTube api会触发一个onStateChange事件
6. 这被发送到emittStateChange()状态为1 的功能(播放)
7. 此状态通过推送器发送到学生receiveStateChange() 功能
8. for case = 1 this.isPlaying()设置为false
9. 调用切换播放来启动学生视频
10. 学生视频开始缓冲,再次触发youtube api onStateChange事件
11. 然后通过推动器将状态3(缓冲)发送回教师
12. 这会暂停教师视频等待学生

问题:

1. 当教师视频停止时,在学生视频完成缓冲并发送给学生之前,再次触发onStateChange事件.
2. 这会停止学生视频,现在两个视频都暂停了.

我想要的是:

当学生视频缓冲时,我只想暂停教师视频直到学生正在播放然后播放两者.我只是不明白我应该如何打破这个在两个视频暂停时结束的循环.

Answer 1

我确信您一次可以发送多个事件。
因此，您可以向老师发送有关哪个学生正在“缓冲”的信息以及任何其他相关信息。
然后，在教师方面，设置一个条件语句来评估该消息。因此，在该功能中，如果存在这种情况，教师玩家将不会向学生发送控制指令。

教师方面也有一个旁路，如果他们认为有必要，他们可以随时停止/暂停所有播放器上的视频。