前回のデモ(ver 7.10.2)からVideo.jsを8.23.4にアップデートしたらvideojs.extend()がdeprecateしていたので改善した。ついでに最近Youtubeのスキンがアップデートしてうらやましかったのでできるだけ似せてみた
See the Pen Untitled by mkiuchi (@mkiuchi) on CodePen.
カスタムコンポーネントの作り方（Video.js 8.x）
Video.js 7.x のカスタムコンポーネントはvideojs.extend()を呼び出して作成していた
var skipFwd = videojs.extend(Component, {
constructor: function(player, options) {
Component.apply(this, arguments)
},
createEl: function() {
return videojs.createEl('div', {
className: 'vjs-skip vjs-skip-fwd'
})
}
})
videojs.registerComponent('skipFwd', skipFwd);
で、8.x では Component を継承してカスタムクラスを宣言する方法に変更になった
var Component = videojs.getComponent('Component')
class SkipFwd extends Component {
constructor(player, options={}){
super(player, options)
}
createEl() {
return videojs.createEl('div', {
className: 'vjs-skip vjs-skip-fwd'
})
}
}
videojs.registerComponent('skipFwd', SkipFwd);
Youtubeに似せてスタイリング
controlbarを2 rowに
まず親クラスをflexにして、オーバーフローしたクラスはwrapするようにする
.video-js .vjs-control-bar {
/* 背景色を透明にする(Youtubeスタイル) */
background-color: rgba(0, 0, 0, 0);
bottom: 0;
height: auto;
font-size: 140%;
padding: 3px;
/* コントールバーを2段にするため親をflexにする */
display: flex;
flex-wrap: wrap;
}
1段目のシークバーをwidth:100%で作れば、残りのクラスは2段目に配置されるって寸法
.video-js .vjs-progress-control {
height: 1.5em;
width: 100%;
}
アイコンフォントをMaterial Iconsにする
以下のような方法でいけるっぽい
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
</head>
.video-js
.vjs-play-control.vjs-playing
.vjs-icon-placeholder {
/* ボタン: 一時停止中（表示アイコンは play） */
font-family: "Material Symbols Rounded";
content: "play_arrow";
color: white;
}
下段真ん中のフィラー
flexのgrow, shrink, basisの指定でいけるっぽい
.video-js .vjs-custom-control-spacer {
/* スペーサー */
display: flex;
flex: 1 1 auto;
}
そのほかもろもろ
background-colorをそれっぽく似せたり角を丸くしたりとかいろいろ。全部CSSの調整でいける。
ストリームの指定は素のままのVideo.jsだけだと（やっぱり）できないっぽくて、プラグインを使う必要があるみたいだけど、そこまで困ってないので今回は割愛。
おわりです
わりとさくっとできるのはBrightCoveの開発陣が優秀だから！