diff --git a/bricks/videoplayer.js b/bricks/videoplayer.js index 6bf0f1f..bc29a2a 100644 --- a/bricks/videoplayer.js +++ b/bricks/videoplayer.js @@ -13,7 +13,7 @@ bricks.VideoPlayer = class extends bricks.VBox { autoplay:true or false */ constructor(opts) { - super(opts) + super(opts); this.set_css('video-container'); this.dom_element.innerHTML = `
@@ -45,7 +45,6 @@ bricks.VideoPlayer = class extends bricks.VBox {
` this.video = this.dom_element.querySelector('.video-element'); this.controls = this.dom_element.querySelector('.controls'); - this.hls = null; this.dashPlayer = null; @@ -60,8 +59,17 @@ bricks.VideoPlayer = class extends bricks.VBox { this.bind('domon', this.init.bind(this)); this.bind('domoff', this.destroy.bind(this)); + this.bind('click', this,show_controls.bind(this); + schedule_once(this.hide_controls.bind(this), 40); } + show_controls(){ + this.controls.style.display = ''; + schedule_once(this.hide_controls.bind(this), 40); + } + hide_controls(){ + this.controls.style.display = 'none'; + } destroy(){ if (this.hls) { this.hls.destroy(); @@ -162,10 +170,29 @@ bricks.VideoPlayer = class extends bricks.VBox { // 全屏 this.fullscreenBtn.addEventListener('click', () => { - if (this.dom_element.requestFullscreen) { - this.dom_element.requestFullscreen(); - } else if (this.dom_element.webkitRequestFullscreen) { - this.dom_element.webkitRequestFullscreen(); + var full_txt='⛶'; + var norm_txt = ` + + `; + if (this.dom_element == document.fullscreenElement){ + this.fullscreenBtn.textContet = full_txt; + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.webkitExitFullscreen) { // Safari + document.webkitExitFullscreen(); + } else if (document.msExitFullscreen) { // IE/Edge 旧版 + document.msExitFullscreen(); + } + } else { + this.fullscreenBtn.textContet = norm_txt; + if (this.dom_element.requestFullscreen) { + this.dom_element.requestFullscreen(); + } else if (this.dom_element.webkitRequestFullscreen) { + this.dom_element.webkitRequestFullscreen(); + } else if(this.dom_element.msRequestFullscreen){ + this.dom_element.msRequestFullscreen(); + } } });