107 lines
2.6 KiB
JavaScript
Executable File
107 lines
2.6 KiB
JavaScript
Executable File
var bricks = window.bricks || {};
|
|
/*
|
|
we use videojs for video play
|
|
https://videojs.com
|
|
event: play_end video play finished
|
|
play_failed video play failed
|
|
play_ok video start to play
|
|
|
|
*/
|
|
bricks.VideoBody = class extends bricks.Layout {
|
|
constructor(opts){
|
|
super(opts||{});
|
|
this.set_css('video-js');
|
|
this.set_css('vjs-big-play-centered');
|
|
this.set_css('vjs-fluid');
|
|
this.cur_url = opts.url;
|
|
this.cur_vtype = opts.type;
|
|
}
|
|
create(){
|
|
var e;
|
|
e = document.createElement('video');
|
|
this.dom_element = e;
|
|
e.controls = true;
|
|
}
|
|
}
|
|
bricks.Video = class extends bricks.Layout {
|
|
/*
|
|
{
|
|
vtype:
|
|
url:
|
|
autoplay:
|
|
}
|
|
*/
|
|
constructor(options){
|
|
super(options);
|
|
this.video_body = new bricks.VideoBody(options);
|
|
this.add_widget(this.video_body);
|
|
schedule_once(this.create_player.bind(this), 0.1);
|
|
this.hidedbtn = new bricks.Button({text:'click me'});
|
|
this.hidedbtn.hide();
|
|
this.add_widget(this.hidedbtn);
|
|
this.hidedbtn.bind('click', this.play.bind(this));
|
|
}
|
|
destroy_resource(params, event){
|
|
var w = event.target.bricks_widget;
|
|
if (! w.parent){
|
|
bricks.debug('destroy resource .......');
|
|
this.player.pause();
|
|
this.player.dispose();
|
|
this.player = null;
|
|
}
|
|
}
|
|
disable_captions(){
|
|
this.player.nativeTextTracks = false;
|
|
var tt = this.player.textTracks()
|
|
bricks.debug('textTracks=', tt);
|
|
if (tt){
|
|
for(var i=0;i<tt.length;i++){
|
|
tt[i].mode = 'disabled';
|
|
}
|
|
}
|
|
}
|
|
auto_play(){
|
|
this.hidedbtn.dispatch('click');
|
|
schedule_once(this.disable_captions.bind(this), 2);
|
|
this.player.on('error',this.report_error.bind(this));
|
|
this.player.on('play', this.report_playok.bind(this));
|
|
this.player.on('ended', this.report_ended.bind(this));
|
|
}
|
|
play(){
|
|
this.player.play();
|
|
}
|
|
create_player(){
|
|
this.player = videojs(this.video_body.dom_element, {
|
|
controls:true,
|
|
textTrackSettings: false
|
|
});
|
|
|
|
this.player.ready(this.auto_play.bind(this));
|
|
this._set_source();
|
|
}
|
|
report_ended(){
|
|
this.dispatch('play_end',{src:this.video_body.cur_url,type:this.video_body.cur_vtype});
|
|
}
|
|
report_playok(){
|
|
console.log(this.video_body.cur_url, 'play ok');
|
|
this.dispatch('play_ok', {src:this.video_body.cur_url,type:this.video_body.cur_vtype});
|
|
}
|
|
report_error(){
|
|
console.log(this.video_body.cur_url, 'play failed', this.err_cnt, 'times');
|
|
this.dispatch('play_failed', {'src':this.video_body.cur_url, type:this.video_body.cur_vtype});
|
|
}
|
|
_set_source(){
|
|
this.player.src({
|
|
src:this.video_body.cur_url,
|
|
type:this.video_body.cur_vtype
|
|
});
|
|
}
|
|
set_source(url, vtype){
|
|
this.video_body.cur_url = url;
|
|
this.video_body.cur_vtype = vtype;
|
|
this._set_source();
|
|
}
|
|
}
|
|
|
|
bricks.Factory.register('Video', bricks.Video);
|