Question

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

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

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

非常感谢任何帮助或指导。感谢

Answer 1

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

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

Answer 2

对于我的一个插件，我使用这种方法插入一个＆＃34;之前的＆＃34;和＆＃34; next＆＃34;播放/暂停切换两侧的按钮。

- 首先我们使用addChild()

创建/添加新控件到控件栏

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

- 一旦我知道播放按钮的位置，我就可以插入＆＃34;之前的＆＃34;它之前的按钮

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

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] );

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

2 个答案: