Я смотрю новый API для плагинов videojs: https://github.com/videojs/video.js/blob/master/docs/plugins.md
Есть ли способ добавить элементы в панель управления? Я хочу добавить "твит", "как" и другие различные кнопки.
Я взломал попытку сделать это до конца.
Я просмотрел новые образцы плагина. Ни один из них не изменяет панель управления.
Спасибо!
Мне кажется, что кодовая база в настоящий момент немного потрясла, и, возможно, в ближайшее время появится более последовательный шаблон плагина, но в то же время - если вы не обнаружили, как добавлять элементы в панель управления, я приведу тривиальный пример.
Все, что я собираюсь сделать, это добавить компонент к основному объекту videojs и указать панели управления включить этот компонент в качестве одного из его дочерних элементов.
Одним из моих любимых аспектов видео js является библиотека значков, заимствованная из FontAwesome. Этот пример будет использовать значок-твиттер, но не стесняйтесь использовать пользовательский css/html в соответствии с вашими потребностями.
<!doctype html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.1.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1.0/video.js"></script>
<!-- For the twitter icon. -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style>
.vjs-control.vjs-tweet-button:before {
font-family: FontAwesome;
content: "\f081";
}
</style>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
<source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm">
</video>
<script>
videojs.Tweet = videojs.Button.extend({
/** @constructor */
init: function(player, options){
videojs.Button.call(this, player, options);
this.on('click', this.onClick);
}
});
videojs.Tweet.prototype.onClick = function() {
alert("TWEET!");
};
// Note that we're not doing this in prototype.createEl() because
// it won't be called by Component.init (due to name obfuscation).
var createTweetButton = function() {
var props = {
className: 'vjs-tweet-button vjs-control',
innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>',
role: 'button',
'aria-live': 'polite', // let the screen reader user know that the text of the button may change
tabIndex: 0
};
return videojs.Component.prototype.createEl(null, props);
};
var tweet;
videojs.plugin('tweet', function() {
var options = { 'el' : createTweetButton() };
tweet = new videojs.Tweet(this, options);
this.controlBar.el().appendChild(tweet.el());
});
var vid = videojs("example_video_1", {
plugins : { tweet : {} }
});
</script>
</body>
</html>
Очевидно, вы можете играть с типом добавляемого компонента, стилем и функциональностью, но это должно по крайней мере показать вам, как начать.
Я просто хотел добавить немного обновления к этому вопросу. Теперь вы можете использовать addChild для большинства компонентов в Video.js. Я обновил код ctangney ниже.
<script>
/** Tweet Button **/
videojs.Tweet = videojs.Button.extend({
/** @constructor */
init: function(player, options){
videojs.Button.call(this, player, options);
this.on('click', this.onClick);
}
});
videojs.Tweet.prototype.createEl = function() {
var props = {
className: 'vjs-tweet-button vjs-control',
innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>',
role: 'button',
'aria-live': 'polite', // let the screen reader user know that the text of the button may change
tabIndex: 0
};
return videojs.Button.prototype.createEl(null, props);
};
videojs.Tweet.prototype.onClick = function() {
alert("TWEET!");
};
/** Video.js Plugin Code **/
videojs.plugin('tweet', function( options ) {
options = options || {};
this.controlBar.addChild('tweet', options );
});
/** Set Up Video.js Player **/
var vid = videojs("example_video_1", {
plugins : { tweet : {} }
});
</script>
Кажется, что в настоящее время у сообщества VideoJS нет плагинов, применимых к последней версии 4.0 - так как мне нужна кнопка для изменения между различными качествами видео, я скоро буду погружаться в это.
Для быстрого ввода: вы можете подключиться к подключаемым модулям VideoJS 4.0 с помощью этой документации: https://github.com/videojs/video.js/blob/master/docs/plugins.md
Поскольку мне нужно было какое-то исследование, чтобы найти эту страницу wiki, я подумал, что должен поделиться ею.
Я тоже искал это и нашел это: https://github.com/jDavidnet/video-js-plugins Я не могу заставить его работать, но если вы можете понять, что вы получили то, что вам нужно. Когда вы это сделаете, пожалуйста, поделитесь со мной?
Основываясь на коде b.kelly, вы также можете расширить функциональность, удалив ненужные кнопки, например, код ниже удалит некоторые из наиболее распространенных кнопок
var vid = videojs("example_video_1", {
plugins : { tweet : {} },
children: {
controlBar: {
children: {
volumeControl: false,
muteToggle: false,
playToggle: false,
}
}
}
});