import UaUtil from '@/util/UaUtil' ; import { Component , Vue } from 'vue-property-decorator' ; export default abstract class BaseVide extends Vue { protected video : HTMLVideoElement | null = null ; protected lastSubtitleState : TextTrackMode = 'disabled' ; public mounted ( ) { this . video = this . $refs . video as HTMLVideoElement ; this . video . addEventListener ( 'timeupdate' , this . onTimeupdate . bind ( this ) ) ; this . video . addEventListener ( 'waiting' , this . onWaiting . bind ( this ) ) ; this . video . addEventListener ( 'loadeddata' , this . onLoadeddata . bind ( this ) ) ; this . video . addEventListener ( 'canplay' , this . onCanplay . bind ( this ) ) ; this . video . addEventListener ( 'ended' , this . onEnded . bind ( this ) ) ; this . video . addEventListener ( 'play' , this . onPlay . bind ( this ) ) ; this . video . addEventListener ( 'pause' , this . onPause . bind ( this ) ) ; this . video . addEventListener ( 'ratechange' , this . onRatechange . bind ( this ) ) ; this . video . addEventListener ( 'volumechange' , this . onVolumechange . bind ( this ) ) ; this . initVideoSetting ( ) ; } /**
     * video 再生初期設定
     */ protected abstract initVideoSetting ( ) ; /**
     * video ソース設定
     */ protected setSrc ( src ) { if ( this . video === null ) { return ; } this . video . src = src ; } /**
     * video の 読み込み
     */ protected load ( ) { if ( this . video === null ) { return ; } this . video . load ( ) ; } /**
     * 読み込んだ video の破棄
     */ protected unload ( ) { if ( this . video === null ) { return ; } this . video . pause ( ) ; this . video . removeAttribute ( 'src' ) ; this . video . load ( ) ; } /**
     * 時刻更新
     */ protected onTimeupdate ( ) { this . $emit ( 'timeupdate' ) ; } /**
     * 読み込み中
     */ protected onWaiting ( ) { this . $emit ( 'waiting' ) ; } /**
     * 読み込み完了
     */ protected onLoadeddata ( ) { this . $emit ( 'loadeddata' ) ; } /**
     * 再生可能
     */ protected onCanplay ( ) { this . $emit ( 'canplay' ) ; } /**
     * 終了
     */ protected onEnded ( ) { this . $emit ( 'ended' ) ; } /**
     * 再生
     */ protected onPlay ( ) { this . $emit ( 'play' ) ; } /**
     * 停止
     */ protected onPause ( ) { this . $emit ( 'pause' ) ; } /**
     * 再生速度変化
     */ protected onRatechange ( ) { this . $emit ( 'ratechange' ) ; } /**
     * 音量変化
     */ protected onVolumechange ( ) { this . $emit ( 'volumechange' ) ; } public beforeDestroy ( ) { this . unload ( ) ; } /**
     * 動画再生
     */ public async play ( ) { if ( this . video === null ) { return ; } await this . video . play ( ) ; } /**
     * 動画停止
     */ public pause ( ) { if ( this . video === null ) { return ; } this . video . pause ( ) ; } /**
     * 停止中か
     */ public paused ( ) { return this . video === null ? true : this . video . paused ; } /**
     * 再生速度を返す
     */ public getPlaybackRate ( ) { return this . video === null ? 1.0 : this . video . playbackRate ; } /**
     * 再生速度を設定する
     */ public setPlaybackRate ( rate ) { if ( this . video === null ) { return ; } this . video . playbackRate = rate ; } return public getDuration ( ) { return this . video === null || this . video . duration === Infinity || isNaN ( this . video . duration ) ? 0 : this . video . duration ; } return public getCurrentTime ( ) { return this . video === null || this . video . currentTime === Infinity || isNaN ( this . video . currentTime ) ? 0 : this . video . currentTime ; } param time public setCurrentTime ( time ) { if ( this . video === null ) { return ; } this . video . currentTime = time ; this . fixSubtitleState ( ) ; } return public getVolume ( ) { return this . video === null || this . video . muted ? 0 : this . video . volume ; } /**
     * mute 切り替え
     */ public switchMute ( ) { if ( this . video === null ) { return ; } this . video . muted = ! this . video . muted ; } param volume public setVolume ( volume ) { if ( this . video === null ) { return ; } this . video . volume = volume ; } /**
     * video 要素にフルスクリーンリクエスト
     */ public requestFullscreen ( ) { if ( this . video === null ) { return false ; } if ( UaUtil . isAndroid ( ) ) { this . video . requestFullscreen ( { navigationUI : 'hide' } ) ; return true ; } else if ( typeof this . video . requestFullscreen === 'function' ) { this . video . requestFullscreen ( ) ; return true ; } else if ( ( this . video as any ) . mozRequestFullScreen ) { ( this . video as any ) . mozRequestFullScreen ( ) ; return true ; } else if ( ( this . video as any ) . webkitRequestFullScreen ) { ( this . video as any ) . webkitRequestFullScreen ( ) ; return true ; } else if ( ( this . video as any ) . webkitEnterFullscreen ) { ( this . video as any ) . webkitEnterFullscreen ( ) ; return true ; } else if ( ( this . video as any ) . msRequestFullscreen ) { ( this . video as any ) . msRequestFullscreen ( ) ; return true ; } return false ; } /**
     * pip 切り替え
     */ public requestPictureInPicture ( ) { if ( this . video === null || typeof ( this . video as any ) . requestPictureInPicture !== 'function' ) { return ; } try { if ( ! ( document as any ) . pictureInPictureElement ) { ( this . $refs . video as any ) . requestPictureInPicture ( ) ; } else { ( this . video as any ) . requestPictureInPicture ( ) ; } } catch ( err ) { console . error ( err ) ; } } return public isEnabledSubtitles ( ) { return this . video !== null && this . video . textTracks . length > 0 ; } return public isShowingSubtitle ( ) { return this . video !== null && this . video . textTracks . length > 0 && this . video . textTracks [ 0 ] . mode === 'showing' ; } /**
     * 字幕を表示させる
     */ public showSubtitle ( ) { if ( this . video === null || this . video . textTracks . length === 0 ) { return ; } this . video . textTracks [ 0 ] . mode = 'showing' ; this . lastSubtitleState = this . video . textTracks [ 0 ] . mode ; } /**
     * 字幕を非表示にする
     */ public disabledSubtitle ( ) { if ( this . video === null || this . video . textTracks . length === 0 ) { return ; } this . video . textTracks [ 0 ] . mode = 'disabled' ; this . lastSubtitleState = this . video . textTracks [ 0 ] . mode ; } /**
     * ユーザが最後に指定した字幕の表示状態と実際の状態がずれている場合に修正する
     */ public fixSubtitleState ( ) { if ( this . video === null || this . video . textTracks . length === 0 ) { return ; } if ( this . video . textTracks [ 0 ] . mode !== this . lastSubtitleState ) { if ( this . lastSubtitleState === 'showing' ) { this . showSubtitle ( ) ; } else { this . disabledSubtitle ( ) ; } } } }