This commit is contained in:
yumoqing 2025-02-20 21:00:23 +08:00
parent 9bc17fe7ec
commit aa5475b741

View File

@ -35,13 +35,22 @@ bricks.Video = class extends bricks.Layout {
*/ */
constructor(options){ constructor(options){
super(options); super(options);
this.video_body = new bricks.VideoBody(options); // this.video_body = new bricks.VideoBody(options);
this.add_widget(this.video_body); this.set_css('video-js');
this.set_css('vjs-big-play-centered');
this.set_css('vjs-fluid');
this.set_style('width', '100%');
this.set_style('height', '100%');
this.set_style('object-fit', 'contain');
this.cur_url = opts.url;
this.cur_vtype = opts.type;
schedule_once(this.create_player.bind(this), 0.1); schedule_once(this.create_player.bind(this), 0.1);
this.hidedbtn = new bricks.Button({label:'click me'}); }
this.hidedbtn.bind('click', this.play.bind(this)); create(){
this.hidedbtn.hide(); var e;
this.add_widget(this.hidedbtn); e = document.createElement('video');
this.dom_element = e;
e.controls = true;
} }
destroy_resource(params, event){ destroy_resource(params, event){
@ -131,7 +140,8 @@ bricks.Video = class extends bricks.Layout {
create_player(){ create_player(){
if(this.url){ if(this.url){
this.player = videojs(this.video_body.dom_element, { // this.player = videojs(this.video_body.dom_element, {
this.player = videojs(this.dom_element, {
controls:true, controls:true,
autoplay:this.autoplay, autoplay:this.autoplay,
muted:true, muted:true,
@ -142,9 +152,8 @@ bricks.Video = class extends bricks.Layout {
this.player.on('error',this.report_error.bind(this)); this.player.on('error',this.report_error.bind(this));
this.player.on('play', this.report_playok.bind(this)); this.player.on('play', this.report_playok.bind(this));
this.player.on('ended', this.report_ended.bind(this)); this.player.on('ended', this.report_ended.bind(this));
this._set_source(); this.set_url(this.opts.url);
this.player.ready(this.set_fullscreen.bind(this)); this.player.ready(this.set_fullscreen.bind(this));
console.log('=======', this.autoplay, '========');
if (this.autoplay){ if (this.autoplay){
this.auto_play(); this.auto_play();
} }
@ -155,35 +164,35 @@ bricks.Video = class extends bricks.Layout {
returnl returnl
} }
this.play_status = 'playend'; this.play_status = 'playend';
this.dispatch('play_end',{src:this.video_body.cur_url,type:this.video_body.cur_vtype}); this.dispatch('play_end',{src:this.cur_url,type:this.cur_vtype});
} }
report_playok(){ report_playok(){
if (this.play_status != ''){ if (this.play_status != ''){
return; return;
} }
this.play_status = 'playok'; this.play_status = 'playok';
console.log(this.video_body.cur_url, 'play ok'); console.log(this.cur_url, 'play ok');
if (this.autounmute && this.player.muted){ if (this.autounmute && this.player.muted){
schedule_once(this.dispatch_mute.bind(this), 1.5); schedule_once(this.dispatch_mute.bind(this), 1.5);
console.log('mute btn clicked'); console.log('mute btn clicked');
} else { } else {
console.log(this.autounmute, 'player.muted=', this.player.muted); console.log(this.autounmute, 'player.muted=', this.player.muted);
} }
this.dispatch('play_ok', {src:this.video_body.cur_url,type:this.video_body.cur_vtype}); this.dispatch('play_ok', {src:this.cur_url,type:this.cur_vtype});
} }
report_error(){ report_error(){
if (this.play_status != ''){ if (this.play_status != ''){
return; return;
} }
this.play_status = 'playfailed'; this.play_status = 'playfailed';
console.log(this.video_body.cur_url, 'play failed', this.err_cnt, 'times'); console.log(this.cur_url, 'play failed', this.err_cnt, 'times');
this.dispatch('play_failed', {'src':this.video_body.cur_url, type:this.video_body.cur_vtype}); this.dispatch('play_failed', {'src':this.cur_url, type:this.cur_vtype});
} }
_set_source(){ _set_source(){
if (this.player){ if (this.player){
this.player.src({ this.player.src({
src:this.video_body.cur_url, src:this.cur_url,
type:this.video_body.cur_vtype type:this.cur_vtype
}); });
this.play_status = ''; this.play_status = '';
} }
@ -202,8 +211,8 @@ bricks.Video = class extends bricks.Layout {
vtype = 'application/x-mpegURL'; vtype = 'application/x-mpegURL';
} }
if(this.player){ if(this.player){
this.video_body.cur_url = url; this.cur_url = url;
this.video_body.cur_vtype = vtype; this.cur_vtype = vtype;
this._set_source(); this._set_source();
this.play(); this.play();
} }