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();
    }
},

我的理解

老师按下播放按钮
togglePlay()被称为
this.isPlaying = false因此playVideo()被称为
视频开始为老师播放
YouTube api会触发onStateChange活动
将其发送到状态为1的emittStateChange()函数（播放）
此状态通过推送器发送给学生receiveStateChange() 功能
for case = 1 this.isPlaying()设置为false
调用切换播放来启动学生视频
学生视频开始缓冲，触发youtube api 再次onStateChange事件
状态3（缓冲）然后通过pusher
暂停教师视频等待学生

问题：

当教师视频停止时，触发onStateChange事件再次 在学生视频完成缓冲 之前发送给学生。
这会停止学生视频，现在两个视频都已暂停。

我想要的是什么：

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

Answer 1

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

除了教师方面的旁路，如果他们认为需要，他们可以随时停止/暂停所有玩家的视频。

YouTube API＆amp; Websockets确保两个视频同步（视频1在视频2缓冲时暂停）

1 个答案: