import { IDanmaMessage , Point , Rect } from '../interface/IDanmaMessage' ; import { IDanmaTrackInfo } from '../interface/IDanmaTrack' ; import { BaseMessage } from './BaseMessage' ; interface VideoMessageConfig { url : string ; width : number ; height : number ; } export default class VideoMessage extends BaseMessage { private VideoMessageConfig : VideoMessageConfig = { url : '' , width : 300 , height : 200 } ; private mIsPlay : boolean = false ; private mVideo : HTMLVideoElement = document . createElement ( 'video' ) ; constructor ( msg ) { super ( ) ; this . VideoMessageConfig = Object . assign ( { } , this . VideoMessageConfig , msg ) ; } onCreate ( callback ) { this . mVideo . addEventListener ( 'canplay' , ( ) => { callback ( true ) ; } ) ; this . mVideo . addEventListener ( 'error' , ( ) => { document . body . removeChild ( this . mVideo ) ; callback ( false ) ; } ) ; this . mVideo . src = this . VideoMessageConfig . url ; this . mVideo . style . position = 'fixed' ; this . mVideo . style . top = '-4000px' ; this . mVideo . style . left = '-4000px' ; this . mVideo . preload = 'auto' ; this . mVideo . loop = true ; document . body . appendChild ( this . mVideo as HTMLElement ) ; } onMeasure ( ctx , trackInfo ) { if ( ! this . mIsPlay ) { this . mIsPlay = true ; this . mVideo . play ( ) ; } return { width : this . VideoMessageConfig . width , height : this . VideoMessageConfig . height } ; } onLayout ( ctx , trackInfo ) { console . log ( this . size ) ; if ( ! this . isLayout ) { this . isLayout = true ; return { top : trackInfo . top , left : ctx . canvas . width } ; } this . position . left -= 3 ; return this . position ; } onDraw ( ctx , trackInfo ) { ctx . drawImage ( this . mVideo , this . position . left , this . position . top , this . size . width , this . size . height ) ; } onDestroyed ( ) { let result = this . position . left < - this . size . width ; if ( result ) { document . body . removeChild ( this . mVideo ) ; } return result ; } }