1 import videojs from 'video.js'
3 function getPauseBezel () {
5 <div class="vjs-bezels-pause">
6 <div class="vjs-bezel" role="status" aria-label="Pause">
7 <div class="vjs-bezel-icon">
8 <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
9 <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
10 <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path>
18 function getPlayBezel () {
20 <div class="vjs-bezels-play">
21 <div class="vjs-bezel" role="status" aria-label="Play">
22 <div class="vjs-bezel-icon">
23 <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
24 <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
25 <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path>
33 const Component = videojs.getComponent('Component')
34 class PauseBezel extends Component {
35 container: HTMLDivElement
37 constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
38 super(player, options)
40 player.on('pause', (_: any) => {
41 if (player.seeking() || player.ended()) return
42 this.container.innerHTML = getPauseBezel()
46 player.on('play', (_: any) => {
47 if (player.seeking()) return
48 this.container.innerHTML = getPlayBezel()
54 this.container = super.createEl('div', {
55 className: 'vjs-bezels-content'
58 this.container.style.display = 'none'
64 this.container.style.display = 'inherit'
67 this.container.style.display = 'none'
68 }, 500) // matching the animation duration
72 videojs.registerComponent('PauseBezel', PauseBezel)