import { Laya } from "Laya" ; import { Video } from "laya/device/media/Video" ; import { Sprite } from "laya/display/Sprite" ; import { Stage } from "laya/display/Stage" ; import { Event } from "laya/events/Event" ; import { Rectangle } from "laya/maths/Rectangle" ; import { Loader } from "laya/net/Loader" ; import { Texture } from "laya/resource/Texture" ; import { Button } from "laya/ui/Button" ; import { Handler } from "laya/utils/Handler" ; import { Stat } from "laya/utils/Stat" ; import { Main } from "./../Main" ; export class InputDevice_Video { private BackgroundSkin : string = "res/inputDevice/videoPlayer/background.png" ; private TimeLineBoxSkin : string = "res/inputDevice/videoPlayer/time line-box.png" ; private TimeLineSkin : string = "res/inputDevice/videoPlayer/time line.png" ; private ColorTimelineSkin : string = "res/inputDevice/videoPlayer/color time line.png" ; private PauseButtonSkin : string = "res/inputDevice/videoPlayer/pause button.png" ; private PlayButtonSkin : string = "res/inputDevice/videoPlayer/play button.png" ; private NormalSoundControlSkin : string = "res/inputDevice/videoPlayer/normal sound control.png" ; private SoundBgControlSkin : string = "res/inputDevice/videoPlayer/sound bg.png" ; private MuteButtonSkin : string = "res/inputDevice/videoPlayer/mute.png" ; private VolumnLineSkin : string = "res/inputDevice/videoPlayer/light-blue.png" ; private VolumeSliderSkin : string = "res/inputDevice/videoPlayer/volumeSlider.png" ; private PlayHeadSliderSkin : string = "res/inputDevice/videoPlayer/playHeadSlider.png" ; private video : Video ; private togglePlayButton : Button ; private colorTimeline : Sprite ; private volumeControl : Sprite ; private playHeadSlider : Sprite ; private timelineBox : Sprite ; private volumeLine : Sprite ; private volumeScrollRect : Rectangle ; private playProgressScrollRect : Rectangle ; Main : typeof Main = null ; constructor ( maincls ) { this . Main = maincls ; Laya . init ( 650 , 350 ) ; Stat . show ( ) ; Laya . stage . alignV = Stage . ALIGN_MIDDLE ; Laya . stage . alignH = Stage . ALIGN_CENTER ; Laya . stage . scaleMode = Stage . SCALE_SHOWALL ; Laya . stage . bgColor = "#FFFFFF" ; Laya . loader . load ( [ this . BackgroundSkin , this . TimeLineBoxSkin , this . TimeLineSkin , this . ColorTimelineSkin , this . PauseButtonSkin , this . PlayButtonSkin , this . NormalSoundControlSkin , this . SoundBgControlSkin , this . MuteButtonSkin , this . VolumnLineSkin , this . VolumeSliderSkin , this . PlayHeadSliderSkin ] , Handler . create ( this , this . setupUI ) ) ; } private setupUI ( ) { this . showGUI ( ) ; this . createVideo ( ) ; } private showGUI ( ) { this . showBackground ( ) ; this . showTimelineControls ( ) ; this . showSoundControl ( ) ; } private showBackground ( ) { var background = new Sprite ( ) ; this . Main . box2D . addChild ( background ) ; background . loadImage ( this . BackgroundSkin ) ; background . y = 25 ; } private showTimelineControls ( ) { this . showTimelineBox ( ) ; this . showPlaybackControls ( ) ; this . showTimeline ( ) ; this . showColorTimeline ( ) ; this . showPlayHeadSlider ( ) ; } private showTimelineBox ( ) { this . timelineBox = new Sprite ( ) ; this . Main . box2D . addChild ( this . timelineBox ) ; this . timelineBox . loadImage ( this . TimeLineBoxSkin ) ; this . timelineBox . pos ( 108 , 280 ) ; } private showPlaybackControls ( ) { this . togglePlayButton = new Button ( ) ; this . togglePlayButton . skin = this . PlayButtonSkin ; this . Main . box2D . addChild ( this . togglePlayButton ) ; this . togglePlayButton . pos ( 110 , 290 ) ; this . togglePlayButton . on ( Event . CLICK , this , this . onTogglePlay ) ; } private showTimeline ( ) { var timeline = new Sprite ( ) ; this . Main . box2D . addChild ( timeline ) ; timeline . loadImage ( this . TimeLineSkin ) ; timeline . pos ( 143 , 295 ) ; } private showColorTimeline ( ) { var texture = Loader . getRes ( this . ColorTimelineSkin ) ; this . colorTimeline = new Sprite ( ) ; this . Main . box2D . addChild ( this . colorTimeline ) ; this . colorTimeline . graphics . drawTexture ( texture , 0 , 0 ) ; this . colorTimeline . size ( texture . width , texture . height ) ; this . colorTimeline . pos ( 143 , 296 ) ; this . playProgressScrollRect = new Rectangle ( 0 , 0 , 0 , 8 ) ; this . colorTimeline . scrollRect = this . playProgressScrollRect ; } private prevX : number ; private showPlayHeadSlider ( ) { this . playHeadSlider = new Sprite ( ) ; this . playHeadSlider . loadImage ( this . PlayHeadSliderSkin ) ; this . Main . box2D . addChild ( this . playHeadSlider ) ; this . playHeadSlider . pos ( 143 , 292 ) ; this . playHeadSlider . pivotX = this . playHeadSlider . width / 2 ; this . timelineBox . on ( Event . MOUSE_DOWN , this , function ( ) : void { if ( ! this . video . paused ) this . pause ( ) ; Laya . stage . on ( Event . MOUSE_MOVE , this , moveSlider ) ; Laya . stage . on ( Event . MOUSE_UP , this , endDrag ) ; this . prevX = Laya . stage . mouseX ; } ) ; function moveSlider ( ) { var dx = Laya . stage . mouseX - this . prevX ; this . playHeadSlider . x += dx ; this . prevX = Laya . stage . mouseX ; if ( this . playHeadSlider . x < 143 ) this . playHeadSlider . x = 143 ; else if ( this . playHeadSlider . x > 143 + this . colorTimeline . width ) this . playHeadSlider . x = 143 + this . colorTimeline . width ; this . video . currentTime = this . video . duration * ( this . playHeadSlider . x - 143 ) / this . colorTimeline . width ; console . log ( this . video . currentTime ) ; this . playProgressScrollRect . width = this . video . currentTime / this . video . duration * this . colorTimeline . width ; } function endDrag ( ) { Laya . stage . off ( Event . MOUSE_MOVE , this , moveSlider ) ; Laya . stage . off ( Event . MOUSE_UP , this , endDrag ) ; this . play ( ) ; } } private showSoundControl ( ) { this . showNormalSoundControl ( ) ; this . createVolumeControl ( ) ; this . createVolumeLine ( ) ; this . createVolumeSlider ( ) ; this . createMuteButton ( ) ; } private showNormalSoundControl ( ) { var soundContorl = new Sprite ( ) ; this . Main . box2D . addChild ( soundContorl ) ; soundContorl . loadImage ( this . NormalSoundControlSkin ) ; soundContorl . pos ( 68 , 280 ) ; soundContorl . on ( Event . CLICK , this , function ( ) : void { if ( this . volumeControl . parent ) Laya . stage . removeChild ( this . volumeControl ) ; else this . Main . box2D . addChild ( this . volumeControl ) ; } ) ; } private createVolumeControl ( ) { this . volumeControl = new Sprite ( ) ; this . volumeControl . loadImage ( this . SoundBgControlSkin ) ; this . volumeControl . pos ( 68 , 176 ) ; } private createVolumeLine ( ) { this . volumeLine = new Sprite ( ) ; this . volumeControl . addChild ( this . volumeLine ) ; this . volumeLine . loadImage ( this . VolumnLineSkin ) ; this . volumeLine . pos ( 15 , 12 ) ; this . volumeScrollRect = new Rectangle ( 0 , 0 , 7 , 55 ) ; this . volumeLine . scrollRect = this . volumeScrollRect ; } private prevY : number ; private createVolumeSlider ( ) { var volumeSlider = new Sprite ( ) ; this . volumeControl . addChild ( volumeSlider ) ; volumeSlider . loadImage ( this . VolumeSliderSkin ) ; volumeSlider . pos ( 12 , 8 ) ; this . volumeControl . on ( Event . MOUSE_DOWN , this , function ( ) : void { Laya . stage . on ( Event . MOUSE_MOVE , this , moveSlider ) ; Laya . stage . on ( Event . MOUSE_UP , this , endDrag ) ; this . prevY = Laya . stage . mouseY ; } ) ; function moveSlider ( ) { var dy = Laya . stage . mouseY - this . prevY ; this . prevY = Laya . stage . mouseY ; volumeSlider . y += dy ; if ( volumeSlider . y < 8 ) volumeSlider . y = 8 ; else if ( volumeSlider . y > 8 + 50 ) volumeSlider . y = 8 + 50 ; this . video . volume = 1 - ( volumeSlider . y - 8 ) / 50 ; this . volumeLine . y = volumeSlider . y - 8 + 12 ; this . volumeScrollRect . y = volumeSlider . y - 8 ; } function endDrag ( ) { Laya . stage . off ( Event . MOUSE_MOVE , this , moveSlider ) ; Laya . stage . off ( Event . MOUSE_UP , this , endDrag ) ; } } private createMuteButton ( ) { var muteButton = new Sprite ( ) ; this . volumeControl . addChild ( muteButton ) ; muteButton . loadImage ( this . MuteButtonSkin ) ; muteButton . y = - ( muteButton . height + 3 ) ; muteButton . on ( Event . CLICK , this , function ( ) : void { this . video . muted = ! this . video . muted ; } ) ; } private createVideo ( ) { this . video = new Video ( ) ; if ( this . video . canPlayType ( Video . MP4 ) == Video . SUPPORT_NO && this . video . canPlayType ( Video . OGG ) == Video . SUPPORT_NO ) { alert ( "当前浏览器不支持播放本视频" ) ; } this . video . on ( 'loadedmetadata' , this , this . onVideoReady ) ; this . video . on ( 'ended' , this , this . onVideoPlayEnded ) ; this . video . load ( "res/av/mov_bbb.mp4" ) ; this . Main . box2D . addChild ( this . video ) ; } private onTogglePlay ( e ) { if ( this . video . paused ) this . play ( ) ; else this . pause ( ) ; } private play ( ) { this . video . play ( ) ; this . togglePlayButton . skin = this . PauseButtonSkin ; Laya . timer . frameLoop ( 1 , this , this . loop ) ; } private pause ( ) { Laya . timer . clear ( this , this . loop ) ; this . video . pause ( ) ; this . togglePlayButton . skin = this . PlayButtonSkin ; } private onVideoPlayEnded ( e ) { this . togglePlayButton . skin = this . PlayButtonSkin ; Laya . timer . clear ( this , this . loop ) ; } private onVideoReady ( ) { if ( this . video . readyState == 0 ) return ; console . log ( "当前使用源：" + this . video . currentSrc ) ; this . video . width = this . video . videoWidth ; this . video . height = this . video . videoHeight ; this . video . x = ( Laya . stage . width - this . video . width ) / 2 ; this . video . y = 65 ; } private loop ( ) { this . playProgressScrollRect . width = this . video . currentTime / this . video . duration * this . colorTimeline . width ; this . playHeadSlider . x = 143 + this . playProgressScrollRect . width ; } }