비디오 js 컨트롤 게이트에 사용자 정의 아이콘과 관련 이벤트 추가
14090 단어 videojs
코드
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<style>
/* step-backward 48 backward 49 forward 50 step-forward 51 */
.video-js .vjs-custom-control .vjs-icon-placeholder:before{
font-family: 'Font Awesome 5 Free';
font-weight: 600;
content: '\f049';
}
style>
(function (vjs) {
var customPlugin = function (options) {
var player = this;
// ,
if (!player.el()) {
return;
}
var video = player.player().el().getElementsByTagName('video')[0];
var customButtom = videojs.getComponent("Button");
var pipButton = videojs.extend(customButtom, {
constructor: function (player, options) {
customButtom.call(this, player, options);
this.controlText(" ");
},
handleClick: function () {
console.log(options) //{ name: 'customName' }
},
buildCSSClass: function () {
return "vjs-custom-control vjs-control vjs-button";
}
});
videojs.registerComponent("customButtom", pipButton);
player.on('loadstart', function () {
var customButtomBtn = player.controlBar.addChild('customButtom', {});
player.controlBar.el().insertBefore(customButtomBtn.el(), player.controlBar.fullscreenToggle.el());
});
};
vjs.registerPlugin('customPlugin', customPlugin);
})(window.videojs);
// ...
var src = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';
videojs("liveVideo", {
language: 'zh-CN',
// playbackRates: [0.25, 0.5, 1, 1.5, 2],
sources: [{
src: src,
type: 'application/x-mpegURL'
}],
plugins: {
// buton
customPlugin: { name: 'customName' }
}
}, function onPlayerReady() {
var w = $("#video").width();
var h = $("#video").height();
$("#liveVideo").css({ "width": w, "height": h });
this.poster('./init.gif')
this.play();
})