添加自定义控件以寻找到控制栏

Question

我有一个用例，我需要使用自定义按钮在视频中向前和向后搜索。我附上了我的播放器的屏幕截图（链接如下），包括底部的控件（-10 -5 +5 +10）。它的工作原理是，当点击时，视频会寻找到正确的位置。

我的播放器图片：http://tinyurl.com/k93xnya

经过数小时的研究，我无法弄清楚如何在控制栏上做同样的事情？我需要它们作为控制栏选项，以便它们可以在全屏模式下使用。

任何帮助或指导将不胜感激。谢谢

Answer 1

对于我的一个插件，我使用这种方法在播放/暂停切换的每一侧插入一个“上一个”和“下一个”按钮。

-首先我们使用addChild()创建/添加新控件到控制栏

-然后我使用一个函数来找到播放按钮的位置，因为那是我的参考点

-一旦我知道播放按钮的位置，我就可以在它之前插入“上一个”按钮

-一旦我知道播放按钮的新位置，我就可以在它之后（在下一个兄弟之前）插入“下一个”按钮。

this.playlist.advancePlaylistButton = this.controlBar.addChild('advancePlaylist');
this.playlist.regressPlaylistButton = this.controlBar.addChild('regressPlaylist');

var playToggleLocation = 0;

var playLocation = function() {
    var controlBarChildren = this.controlBar.el().childNodes;
    var loc = -1;
    for ( var x = 0; x < controlBarChildren.length; x++ ) {
        if ( controlBarChildren[x].className.indexOf('vjs-play-control') != -1) {
            loc = x;
            break;
        }
    }
    return loc;
};


playToggleLocation = playLocation();
this.controlBar.el().insertBefore( this.playlist.regressPlaylistButton.el(), this.controlBar.el().childNodes[playToggleLocation] );

this.controlBar.el().insertBefore( this.playlist.advancePlaylistButton.el(), this.controlBar.el().childNodes[playToggleLocation+1] );

Answer 2

看来您正在使用 videojs。向 videojs 控制栏添加自定义按钮可能很棘手。您可以找到关于主题 here、here 和 here 的文章。您可能需要开发自己的plugin 以获得更好的结果。

您还可以考虑为您的 HTML5 媒体播放器构建自己的 controls 集。更多关于全屏使用 HTML5 媒体元素here。