bugfix
This commit is contained in:
parent
ef417d825b
commit
3e8f9b1913
@ -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">
|
||||||
|
|||||||
311
bricks/video.js
311
bricks/video.js
@ -7,227 +7,83 @@ 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:
|
|
||||||
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('height', '100%');
|
|
||||||
this.set_style('object-fit', 'contain');
|
this.set_style('object-fit', 'contain');
|
||||||
this.cur_url = opts.url;
|
this.set_style('width', '100%');
|
||||||
this.cur_vtype = opts.type;
|
this.set_style('height', '100%');
|
||||||
schedule_once(this.create_player.bind(this), 0.1);
|
this.cur_url = opts.url;
|
||||||
}
|
this.cur_vtype = opts.type || this.guess_type(this.cur_url);
|
||||||
create(){
|
schedule_once(this.create_player.bind(this), 0.1);
|
||||||
var e;
|
}
|
||||||
e = document.createElement('video');
|
|
||||||
this.dom_element = e;
|
create() {
|
||||||
e.controls = true;
|
let e = document.createElement('video');
|
||||||
}
|
this.dom_element = e;
|
||||||
|
e.controls = true;
|
||||||
destroy_resource(params, event){
|
}
|
||||||
var w = event.target.bricks_widget;
|
|
||||||
if (! w.parent){
|
create_player() {
|
||||||
bricks.debug('destroy resource .......');
|
this.player = videojs(this.dom_element, {
|
||||||
this.player.pause();
|
controls: true,
|
||||||
this.player.dispose();
|
autoplay: this.opts.autoplay || false,
|
||||||
this.player = null;
|
preload: "auto",
|
||||||
}
|
muted: true,
|
||||||
}
|
crossorigin: 'anonymous',
|
||||||
disable_captions(){
|
nativeTextTracks: false
|
||||||
this.player.nativeTextTracks = false;
|
});
|
||||||
var tt = this.player.textTracks()
|
|
||||||
bricks.debug('textTracks=', tt);
|
this.player.on('play', () => this.dispatch('play_ok', { src: this.cur_url }));
|
||||||
if (tt){
|
this.player.on('ended', () => this.dispatch('play_end', { src: this.cur_url }));
|
||||||
for(var i=0;i<tt.length;i++){
|
this.player.on('error', () => this.dispatch('play_failed', { src: this.cur_url }));
|
||||||
tt[i].mode = 'disabled';
|
|
||||||
}
|
this.player.ready(() => {
|
||||||
}
|
this.disable_captions();
|
||||||
}
|
if (this.opts.fullscreen && !this.player.isFullscreen()) {
|
||||||
findVideoButtonByClass(cls){
|
this.player.requestFullscreen();
|
||||||
var e = this.dom_element;
|
}
|
||||||
return e.querySelector('.' + cls);
|
this.set_source(this.cur_url, this.cur_vtype);
|
||||||
}
|
schedule_once(this.unmuted.bind(this), 1);
|
||||||
|
});
|
||||||
auto_play(){
|
}
|
||||||
return;
|
|
||||||
schedule_once(this._auto_play.bind(this), 0.5);
|
disable_captions() {
|
||||||
}
|
let tt = this.player.textTracks();
|
||||||
_auto_play(){
|
for (let i = 0; i < tt.length; i++) {
|
||||||
this.set_url(this.opts.url);
|
tt[i].mode = 'disabled';
|
||||||
return;
|
}
|
||||||
var play_btn = this.findVideoButtonByClass('vjs-big-play-button');
|
}
|
||||||
if (!play_btn){
|
|
||||||
console.log('vjs-big-play-button not found');
|
set_source(url, vtype) {
|
||||||
return;
|
this.cur_url = url;
|
||||||
}
|
this.cur_vtype = vtype || this.guess_type(url);
|
||||||
if (play_btn.style.display == 'none'){
|
this.player.src({ src: this.cur_url, type: this.cur_vtype });
|
||||||
console.log('playing .............already');
|
}
|
||||||
return;
|
|
||||||
}
|
guess_type(url) {
|
||||||
console.log('video ready, auto_playing ....');
|
let t = url.toLowerCase();
|
||||||
var clickevent = new MouseEvent('click', {
|
if (t.endsWith('.m3u8')) return 'application/x-mpegURL';
|
||||||
'bubbles': true, // 事件是否冒泡
|
if (t.endsWith('.mp4')) return 'video/mp4';
|
||||||
'cancelable': true // 事件是否可取消
|
if (t.endsWith('.avi')) return 'video/avi';
|
||||||
});
|
if (t.endsWith('.webm')) return 'video/webm';
|
||||||
play_btn.dispatchEvent(clickevent);
|
return 'application/x-mpegURL';
|
||||||
/*
|
}
|
||||||
if (this.autounmute && this.player.muted){
|
|
||||||
schedule_once(this.dispatch_mute.bind(this), 1);
|
play() {
|
||||||
}
|
if (this.player) this.player.play();
|
||||||
*/
|
}
|
||||||
}
|
|
||||||
|
unmuted() {
|
||||||
play(){
|
if (this.player) {
|
||||||
console.log('Video:play() called....');
|
this.player.muted(false);
|
||||||
this.player.play();
|
this.player.volume(1.0);
|
||||||
// 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_vtype = vtype;
|
|
||||||
this._set_source();
|
|
||||||
this.play();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
set_url(url){
|
|
||||||
this.set_source(url);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
bricks.Iptv = class extends bricks.VBox {
|
bricks.Iptv = class extends bricks.VBox {
|
||||||
@ -244,18 +100,19 @@ bricks.Iptv = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
async build_subwidgets(){
|
async build_subwidgets(){
|
||||||
console.log('build_subwidgets called');
|
console.log('build_subwidgets called');
|
||||||
var jc = new bricks.HttpJson();
|
if (!this.user_data){
|
||||||
this.deviceid = bricks.deviceid('iptv')
|
var jc = new bricks.HttpJson();
|
||||||
this.user_data = await jc.httpcall(this.iptv_data_url, {
|
this.deviceid = bricks.deviceid('iptv')
|
||||||
params:{
|
this.user_data = await jc.httpcall(this.iptv_data_url, {
|
||||||
deviceid:this.deviceid
|
params:{
|
||||||
},
|
deviceid:this.deviceid
|
||||||
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});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user