html5视频-添加自定义控件以查找到控制栏

Question

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

我的球员照片：http://tinyurl.com/k93xnya

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

如有任何帮助或指导，我们将不胜感激。感谢

Answer 1

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

-首先，我们使用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控制栏中添加自定义按钮可能很棘手。你可以在这里、这里和这里找到关于这个主题的文章。您可能需要开发自己的插件以获得更好的结果。

你也可以考虑为你的HTML5媒体播放器构建自己的控件集。更多关于使用HTML5媒体元素进行全屏显示的信息，请点击此处。