yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
yumoqing 2025-07-27 16:38:11 +08:00
parent ef417d825b
commit 3e8f9b1913
2 changed files with 85 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bricks/header.tmpl
View File

@ -26,6 +26,7 @@
<script src="{{entire_url('/bricks/3parties/marked.min.js')}}"></script> <script src="{{entire_url('/bricks/3parties/marked.min.js')}}"></script>
<script src="{{entire_url('/bricks/3parties/xterm.js')}}"></script> <script src="{{entire_url('/bricks/3parties/xterm.js')}}"></script>
<script src="{{entire_url('/bricks/3parties/xterm-addon-fit.js')}}"></script> <script src="{{entire_url('/bricks/3parties/xterm-addon-fit.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="{{entire_url('/bricks/3parties/video.min.js')}}"></script> <script src="{{entire_url('/bricks/3parties/video.min.js')}}"></script>
<!--- <!---
<link href="https://unpkg.com/video.js@6/dist/video-js.css" rel="stylesheet"> <link href="https://unpkg.com/video.js@6/dist/video-js.css" rel="stylesheet">

261
bricks/video.js
View File

@ -7,226 +7,82 @@ event: play_end video play finished
play_ok video start to play play_ok video start to play
*/ */
bricks.VideoBody = class extends bricks.Layout { var bricks = window.bricks || {};
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 { bricks.Video = class extends bricks.Layout {
/* constructor(opts) {
{ super(opts);
title: this.opts = opts || {};
vtype: this.set_csses('video-js', 'vjs-big-play-centered', 'vjs-fluid');
url: this.set_style('object-fit', 'contain');
fullscreen:
autoplay:
}
*/
constructor(options){
super(options);
// this.video_body = new bricks.VideoBody(options);
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('width', '100%');
this.set_style('height', '100%'); this.set_style('height', '100%');
this.set_style('object-fit', 'contain');
this.cur_url = opts.url; this.cur_url = opts.url;
this.cur_vtype = opts.type; this.cur_vtype = opts.type || this.guess_type(this.cur_url);
schedule_once(this.create_player.bind(this), 0.1); schedule_once(this.create_player.bind(this), 0.1);
} }
create(){
var e; create() {
e = document.createElement('video'); let e = document.createElement('video');
this.dom_element = e; this.dom_element = e;
e.controls = true; e.controls = true;
} }
destroy_resource(params, event){ create_player() {
var w = event.target.bricks_widget; this.player = videojs(this.dom_element, {
if (! w.parent){ controls: true,
bricks.debug('destroy resource .......'); autoplay: this.opts.autoplay || false,
this.player.pause(); preload: "auto",
this.player.dispose(); muted: true,
this.player = null; crossorigin: 'anonymous',
nativeTextTracks: false
});
this.player.on('play', () => this.dispatch('play_ok', { src: this.cur_url }));
this.player.on('ended', () => this.dispatch('play_end', { src: this.cur_url }));
this.player.on('error', () => this.dispatch('play_failed', { src: this.cur_url }));
this.player.ready(() => {
this.disable_captions();
if (this.opts.fullscreen && !this.player.isFullscreen()) {
this.player.requestFullscreen();
} }
this.set_source(this.cur_url, this.cur_vtype);
schedule_once(this.unmuted.bind(this), 1);
});
} }
disable_captions(){
this.player.nativeTextTracks = false; disable_captions() {
var tt = this.player.textTracks() let tt = this.player.textTracks();
bricks.debug('textTracks=', tt); for (let i = 0; i < tt.length; i++) {
if (tt){
for(var i=0;i<tt.length;i++){
tt[i].mode = 'disabled'; tt[i].mode = 'disabled';
} }
} }
}
findVideoButtonByClass(cls){
var e = this.dom_element;
return e.querySelector('.' + cls);
}
auto_play(){ set_source(url, vtype) {
return;
schedule_once(this._auto_play.bind(this), 0.5);
}
_auto_play(){
this.set_url(this.opts.url);
return;
var play_btn = this.findVideoButtonByClass('vjs-big-play-button');
if (!play_btn){
console.log('vjs-big-play-button not found');
return;
}
if (play_btn.style.display == 'none'){
console.log('playing .............already');
return;
}
console.log('video ready, auto_playing ....');
var clickevent = new MouseEvent('click', {
'bubbles': true, // 事件是否冒泡
'cancelable': true // 事件是否可取消
});
play_btn.dispatchEvent(clickevent);
/*
if (this.autounmute && this.player.muted){
schedule_once(this.dispatch_mute.bind(this), 1);
}
*/
}
play(){
console.log('Video:play() called....');
this.player.play();
// this.player.muted(false);
}
unmuted(){
this.player.muted(false);
}
set_fullscreen(){
if (this.fullscreen){
if (!this.player.isFullscreen()) {
this.player.requestFullscreen();
}
} else {
if (this.player.isFullscreen()) {
this.player.exitFullscreen();
}
}
}
dispatch_mute(){
var mute_btn = this.findVideoButtonByClass("vjs-mute-control.vjs-control.vjs-button");
if (!mute_btn){
var isMute = this.player.muted();
if (isMuted){
this.player.muted(False);
}
bricks.test_element = this;
console.log(this, 'there is not mute button found, isMuted=', isMuted);
return;
}
var clickevent = new MouseEvent('click', {
'bubbles': true, // 事件是否冒泡
'cancelable': true // 事件是否可取消
});
var isMuted = this.player.muted();
if (isMuted){
mute_btn.dispatchEvent(clickevent);
}
}
create_player(){
if(this.url){
// this.player = videojs(this.video_body.dom_element, {
this.player = videojs(this.dom_element, {
controls:true,
autoplay:this.autoplay,
muted:true,
crossorigin:"anonymous",
nativeTextTracks:false,
textTrackSettings: false
});
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));
this.set_url(this.opts.url);
this.player.ready(this.set_fullscreen.bind(this));
if (this.autoplay){
this.auto_play();
}
}
}
report_ended(){
if (this.play_status != 'playok'){
returnl
}
this.play_status = 'playend';
this.dispatch('play_end',{src:this.cur_url,type:this.cur_vtype});
}
report_playok(){
if (this.play_status != ''){
return;
}
this.play_status = 'playok';
console.log(this.cur_url, 'play ok');
if (this.autounmute && this.player.muted()){
schedule_once(this.dispatch_mute.bind(this), 2.5);
console.log('mute btn clicked');
} else {
console.log(this.autounmute, 'player.muted=', this.player.muted);
}
this.dispatch('play_ok', {src:this.cur_url,type:this.cur_vtype});
}
report_error(){
if (this.play_status != ''){
return;
}
this.play_status = 'playfailed';
console.log(this.cur_url, 'play failed', this.err_cnt, 'times');
this.dispatch('play_failed', {'src':this.cur_url, type:this.cur_vtype});
}
_set_source(){
if (this.player){
this.player.src({
src:this.cur_url,
type:this.cur_vtype
});
this.play_status = '';
}
}
set_source(url, vtype){
var t = url.toLowerCase();
if (t.endsWith('.m3u8')){
vtype = 'application/x-mpegURL';
} else if (t.endsWith('.mp4')){
vtype = 'video/mp4';
} else if (t.endsWith('.avi')){
vtype = 'video/avi';
} else if (t.endsWith('.webm')){
vtype = 'video/webm';
} else {
vtype = 'application/x-mpegURL';
}
if(this.player){
this.cur_url = url; this.cur_url = url;
this.cur_vtype = vtype; this.cur_vtype = vtype || this.guess_type(url);
this._set_source(); this.player.src({ src: this.cur_url, type: this.cur_vtype });
this.play();
} }
guess_type(url) {
let t = url.toLowerCase();
if (t.endsWith('.m3u8')) return 'application/x-mpegURL';
if (t.endsWith('.mp4')) return 'video/mp4';
if (t.endsWith('.avi')) return 'video/avi';
if (t.endsWith('.webm')) return 'video/webm';
return 'application/x-mpegURL';
}
play() {
if (this.player) this.player.play();
}
unmuted() {
if (this.player) {
this.player.muted(false);
this.player.volume(1.0);
} }
set_url(url){
this.set_source(url);
} }
} }
@ -244,6 +100,7 @@ bricks.Iptv = class extends bricks.VBox {
} }
async build_subwidgets(){ async build_subwidgets(){
console.log('build_subwidgets called'); console.log('build_subwidgets called');
if (!this.user_data){
var jc = new bricks.HttpJson(); var jc = new bricks.HttpJson();
this.deviceid = bricks.deviceid('iptv') this.deviceid = bricks.deviceid('iptv')
this.user_data = await jc.httpcall(this.iptv_data_url, { this.user_data = await jc.httpcall(this.iptv_data_url, {
@ -252,10 +109,10 @@ bricks.Iptv = class extends bricks.VBox {
}, },
method:'GET' method:'GET'
}); });
}
console.log('this.user_data =', this.user_data); console.log('this.user_data =', this.user_data);
this.video = new bricks.Video({ this.video = new bricks.Video({
autoplay:true, autoplay:true,
autounmute:this.autounmute,
url:this.user_data.url url:this.user_data.url
}); });
this.title_w = new bricks.Text({text:this.user_data.tv_name, wrap:false}); this.title_w = new bricks.Text({text:this.user_data.tv_name, wrap:false});