export default function YBPlayer ({container, src, title, poster, formats, barrages, barrageShow, barrageGap, barrageConfig, controls, playShow=true, progressShow=true, timeShow = true, volumeShow=true, settingShow=true, fullscreenShow=true, fullscreen = false, autoplay, mirror, pictureInPicture, nextBtnShow, prevBtnShow, muted, loop, preload, settings, initialTime, duration, volume, longpressPlaybackRate, playbackRate, objectFit, crossOrigin, segments, isLive, flvConfig, enableLongpressPlaybackRate, enableDoubleToggle, enableBlob }){ if(!(this instanceof YBPlayer)){ //如果this不是指向MyClass throw new TypeError("TypeError: Class constructor YBPlayer cannot be invoked without 'new'") } this.container = typeof container == 'string' ? document.getElementById(container) : container this.src = src || '' this.title = title || '' this.poster = poster || '' this.formats = formats || 'auto' this.barrages = barrages this.barrageShow = barrageShow this.barrageGap = barrageGap || 5 this.barrageConfig = barrageConfig this.controls = controls this.playShow = playShow this.progressShow = progressShow this.timeShow = timeShow this.volumeShow = volumeShow this.settingShow = settingShow this.fullscreenShow = fullscreenShow this.fullscreen = fullscreen this.autoplay = autoplay this.mirror = mirror this.pictureInPicture = pictureInPicture this.nextBtnShow = nextBtnShow this.prevBtnShow = prevBtnShow this.muted = muted this.loop = loop this.preload = preload || 'auto' this.settings = settings || 'all' this.initialTime = initialTime || 0 this.duration = duration || 0 this.volume = volume || 1 this.longpressPlaybackRate = longpressPlaybackRate || 3 this.playbackRate = playbackRate || 1 this.objectFit = objectFit || 'contain' this.crossOrigin = crossOrigin || '' this.segments = segments this.isLive = isLive this.flvConfig = flvConfig || {} this.enableLongpressPlaybackRate = enableLongpressPlaybackRate this.enableDoubleToggle = enableDoubleToggle this.enableBlob = enableBlob this.video = null this.hls = null this.flv = null this.barrage = null this._eventCallback = {} this._wrapperEl = null this._videoEl = null this._posterEl = null this._videoBackground = 'inherit' this._headersEl = null this._controlsEl = null this._barrageEl = null this._settingEl = null this._playbackRateEl = null this._slotsEl = null this._controlSlotsEl = null this._longPlaybackRateEl = null this._isDrag = false this._controlsTimer = null this._seizingTimer = null this._clickTime = 0,//点击次数 this._touchstartX = 0,//触摸开始x轴位置 this._touchstartY = 0,//触摸开始y轴位置 this._touchmoveX = 0,//触摸滑动x轴距离 this._touchmoveY = 0,//触摸滑动y轴距离 this._touchTime = 0//触摸时间 this._mousedown = false this._init() } Object.defineProperty(YBPlayer.prototype,'_init',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._init is not a constructor") } if ( this.container && typeof this.container != 'undefined' ) { try{ this.container.style.position = 'relative'; this.container.style.overflow = 'hidden'; //监听全屏事件 this.container.addEventListener('fullscreenerror', this._fullscreenerror.bind(this)); this.container.addEventListener('mozfullscreenerror', this._fullscreenerror.bind(this)); this.container.addEventListener('msfullscreenerror', this._fullscreenerror.bind(this)); this.container.addEventListener('webkitfullscreenerror', this._fullscreenerror.bind(this)); this.container.addEventListener('fullscreenchange', this._fullscreenchanged.bind(this)); this.container.addEventListener('mozfullscreenchange', this._fullscreenchanged.bind(this)); this.container.addEventListener('msfullscreenchange', this._fullscreenchanged.bind(this)); this.container.addEventListener('webkitfullscreenchange', this._fullscreenchanged.bind(this)); this._wrapperEl = document.createElement('DIV') this._wrapperEl.setAttribute('class', 'ybplayer-video-wrapper') this.container.appendChild(this._wrapperEl) // this._wrapperEl.onclick = () => { // if ( this._playbackRateEl ) { // this._hidePlaybackRate() // } else if ( this._settingEl ) { // this._hideSetting() // } else if ( this._controlsEl ) { // if ( this._controlsEl.classList.value.indexOf('ybplayer-controls-show') > -1 ) { // this._hideControls() // } else { // this._showControls() // } // } // } const resetTouch = () => { this._touchstartX = 0 this._touchstartY = 0 this._touchmoveX = 0 this._touchmoveY = 0 this._touchTime = 0 this._clickTime = 0 } const threshold = 50 const singleTouchTime = 150//双击间隔时间 const touchstart = (e) => { if ( this._touchTimer ) {//清楚定时任务 window.clearTimeout(this._touchTimer) this._touchTimer = null } if ( this._longTimer ) {//清楚定时任务 window.clearTimeout(this._longTimer) this._longTimer = null } const touch = e.touches[0] this._touchstartX = touch.pageX this._touchstartY = touch.pageY this._clickTime++ if ( this._clickTime == 1 ) {//第一次点击 this._touchTimer = window.setTimeout(() => { this._touchTime = singleTouchTime }, singleTouchTime) this._longTimer = window.setTimeout(() => { this._touchTime = 500 if ( this._touchmoveX <= threshold && this._touchmoveY <= threshold && this.enableLongpressPlaybackRate ) { //长按事件 this._isLongTouch = 1 this._showLongPlaybackRate() } resetTouch() }, 500) } } const touchmove = (e) => { if ( this._clickTime > 0 ) { const touch = e.touches[0] this._touchmoveX = Math.abs(touch.pageX - this._touchstartX) this._touchmoveY = Math.abs(touch.pageY - this._touchstartY) } } const touchend = (e) => { if ( this._touchTimer ) {//清楚按下定时任务 window.clearTimeout(this._touchTimer); this._touchTimer = null } if ( this._longTimer ) {//清楚长按定时任务 window.clearTimeout(this._longTimer) this._longTimer = null } this._hideLongPlaybackRate() //点击次数为零或者触摸时间超过单击时间,或者滑动距离超过阙值 if ( this._clickTime == 0 || this._touchTime > singleTouchTime || this._touchmoveX > threshold || this._touchmoveY > threshold ) { resetTouch() return } if ( this._clickTime == 1 ) {//第一次点击 this._touchTimer = window.setTimeout(() => { //单击事件 if ( this._playbackRateEl ) { this._hidePlaybackRate() } else if ( this._settingEl ) { this._hideSetting() } else if ( this._controlsEl ) { if ( this._controlsEl.classList.value.indexOf('ybplayer-controls-show') > -1 ) { this._hideControls() } else { this._showControls() } } resetTouch() }, singleTouchTime) } if ( this._clickTime == 2 ) {//第二次点击 //双击事件 if ( this.enableDoubleToggle ) this.toggle() resetTouch() } } this._wrapperEl.ontouchstart = touchstart this._wrapperEl.ontouchmove = touchmove this._wrapperEl.ontouchend = touchend this._wrapperEl.onmousedown = (e) => { if ( 'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch) ) return//设备支持触屏则不触发mousedown this._mousedown = true touchstart({touches: [{pageX: e.pageX, pageY: e.pageY}]}) } this._wrapperEl.onmousemove = (e) => { if ( !this._mousedown ) return touchmove({touches: [{pageX: e.pageX, pageY: e.pageY}]}) } this._wrapperEl.onmouseup = (e) => { this._mousedown = false touchend({touches: [{pageX: e.pageX, pageY: e.pageY}]}) } this._initVideo(); this._initSlots(); this._setVideoUrl(); if ( this.fullscreen ) this._initHeaders(); if ( this.controls ) this._initControls(); }catch(e){ throw new Error(e.toString()); } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroy',{ value:function(destroyContainer = true){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroy is not a constructor") } this._destroyHls() this._destroyFlv(); this._destroyControls(); this._destroyHeaders(); this._destroyBarrage(); this._destroyVideo(); this._destroySlots(); if ( this._wrapperEl ) { this._wrapperEl.onclick = null; this._wrapperEl.remove(); this._wrapperEl = null; } if ( this.container && destroyContainer ) { this.container.removeEventListener('fullscreenerror', this._fullscreenerror.bind(this)); this.container.removeEventListener('mozfullscreenerror', this._fullscreenerror.bind(this)); this.container.removeEventListener('msfullscreenerror', this._fullscreenerror.bind(this)); this.container.removeEventListener('webkitfullscreenerror', this._fullscreenerror.bind(this)); this.container.removeEventListener('fullscreenchange', this._fullscreenchanged.bind(this)); this.container.removeEventListener('mozfullscreenchange', this._fullscreenchanged.bind(this)); this.container.removeEventListener('msfullscreenchange', this._fullscreenchanged.bind(this)); this.container.removeEventListener('webkitfullscreenchange', this._fullscreenchanged.bind(this)); this.container = null; } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_initVideo',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._initVideo is not a constructor") } this._videoEl = document.createElement('DIV'); this._videoEl.setAttribute('class', 'ybplayer-video-content'); this._wrapperEl.appendChild(this._videoEl); this.video = document.createElement('VIDEO'); this.video.setAttribute('style', 'width: 100%;height:100%;flex:1;opacity:0;object-fit:' + this.objectFit + ';'); this.video.setAttribute('preload', this.preload); this.video.setAttribute('volume', this.volume); this.video.setAttribute('x-webkit-airplay', 'allow'); this.video.setAttribute('webkit-playsinline', true); this.video.setAttribute('playsinline', true); this.video.setAttribute('x5-video-player-type', 'h5'); this.video.setAttribute('x5-video-play', true); this.crossOrigin && this.video.setAttribute('crossOrigin', this.crossOrigin); this.video.innerHTML = '您的浏览器不支持 video 标签。'; this._videoEl.appendChild(this.video); this._showPoster() this.video.muted = this.muted; this.video.defaultMuted = this.muted; this.video.playbackRate = this.playbackRate; this.video.defaultPlaybackRate = this.playbackRate; this.video.autoplay = this.autoplay; this.video.loop = this.loop; this.video.oncanplay = () => { this._eventCallback.canplay && this._eventCallback.canplay({ duration: this.video.duration, width: this.video.videoWidth,//视频宽度 height: this.video.videoHeight//视频高度 }); } this.video.oncanplaythrough = () => { this._eventCallback.canplaythrough && this._eventCallback.canplaythrough({ duration: this.video.duration, width: this.video.videoWidth,//视频宽度 height: this.video.videoHeight//视频高度 }); } this.video.onloadeddata = () => { this._eventCallback.loadeddata && this._eventCallback.loadeddata({ duration: this.video.duration, width: this.video.videoWidth,//视频宽度 height: this.video.videoHeight//视频高度 }); this.video.currentTime = this.initialTime; this.video.style.opacity = 1 } this.video.onloadedmetadata = () => { this._eventCallback.loadedmetadata && this._eventCallback.loadedmetadata({ duration: this.video.duration, width: this.video.videoWidth,//视频宽度 height: this.video.videoHeight//视频高度 }); if ( this.barrageShow ) this._initBarrage(); } this.video.onloadstart = () => { this._eventCallback.loadstart && this._eventCallback.loadstart(); } this.video.onplay = () => { this._hidePoster() this._eventCallback.play && this._eventCallback.play() this.barrage && this.barrage.play(); this._setControlsView('play') if ( this.duration && this.video.currentTime >= this.duration && !this.isLive ) this.seek(0) if ( this.flv ) this.flv.play() } this.video.onpause = () => { this._eventCallback.pause && this._eventCallback.pause(); this.barrage && this.barrage.pause(); this._setControlsView('play') if ( this.flv ) this.flv.pause() } this.video.onended = () => { this._eventCallback.ended && this._eventCallback.ended(); } this.video.onseeking = () => { this._eventCallback.seeking && this._eventCallback.seeking({ currentTime: this.video.currentTime }); } this.video.onseeked = () => { this._eventCallback.seeked && this._eventCallback.seeked({ currentTime: this.video.currentTime }); this.barrage && this.barrage.seek(this.video.currentTime); } this.video.ontimeupdate = () => { this._eventCallback.timeupdate && this._eventCallback.timeupdate({ currentTime: this.video.currentTime }) if ( this.duration && this.video.currentTime >= this.duration && !this.isLive ) { if ( this.loop ) { this.seek(0) } else { this.pause(); this._eventCallback.ended && this._eventCallback.ended(); } } if ( this._seizingTimer ) { window.clearTimeout(this._seizingTimer) this._seizingTimer = null } this._seizingTimer = window.setTimeout(() => { if ( this.video && this.video.src && !this.video.paused ) this._eventCallback.seizing && this._eventCallback.seizing() }, 5000) this._setControlsView('timeUpdate') } this.video.ondurationchange = () => { this._eventCallback.durationchange && this._eventCallback.durationchange({ duration: this.video.duration }) } this.video.onwaiting = () => { this._eventCallback.waiting && this._eventCallback.waiting({ currentTime: this.video.currentTime }); this.barrage && this.barrage.pause(); } this.video.onplaying = () => { this._eventCallback.playing && this._eventCallback.playing({ currentTime: this.video.currentTime }) this.barrage && this.barrage.play(); } this.video.onprogress = () => { this._eventCallback.progress && this._eventCallback.progress({ buffered: this.video.buffered }) } this.video.onabort = () => { this._eventCallback.abort && this._eventCallback.abort(); } this.video.onerror = (e) => { this._eventCallback.error && this._eventCallback.error(this._deepClone(e)); } this.video.onvolumechange = () => { this._eventCallback.volumechange && this._eventCallback.volumechange({ volume: this.video.volume }); this._setControlsView('volume') } this.video.onratechange = () => { this._eventCallback.ratechange && this._eventCallback.ratechange({ playbackRate: this.video.playbackRate }); if ( this._playbackRateEl && this._querySelector('ybplayer-setting') ) { for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting')[i].getElementsByClassName('ybplayer-setting-text')[0].style.color = this.playbackRate == this._querySelectorAll('ybplayer-setting')[i].getAttribute('data-rate') ? '#2ca2f9' : '#333'; } } this.barrage && this.barrage.setConfig({ playbackRate: this.video.playbackRate }); } this.video.onenterpictureinpicture = () => { this._eventCallback.enterpictureinpicture && this._eventCallback.enterpictureinpicture() this.pictureInPicture = true this._setSettingView('pictureInPicture'); } this.video.onleavepictureinpicture = () => { this._eventCallback.leavepictureinpicture && this._eventCallback.leavepictureinpicture() this.pictureInPicture = false this._setSettingView('pictureInPicture'); } this._barrageEl = document.createElement('DIV'); this._barrageEl.setAttribute('class', 'ybplayer-video-barrage'); this._barrageEl.setAttribute('style', 'margin:' + this.barrageGap + 'px 0;'); this._wrapperEl.appendChild(this._barrageEl); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyVideo',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyVideo is not a constructor") } if ( this.video ) { this.video.pause(); this.video.removeAttribute('src') this.video.load() this.video.oncanplay = null; this.video.onloadedmetadata = null; this.video.onplay = null; this.video.onpause = null; this.video.onended = null; this.video.onseeking = null; this.video.onseeked = null; this.video.ontimeupdate = null; this.video.ondurationchange = null; this.video.onwaiting = null; this.video.onplaying = null; this.video.onprogress = null; this.video.onabort = null; this.video.onerror = null; this.video.onvolumechange = null; this.video.onratechange = null; this.video.onenterpictureinpicture = null; this.video.onleavepictureinpicture = null; this.video.remove(); this.video = null; } this._hidePoster() this._hideLongPlaybackRate() if ( this._videoEl ) { this._videoEl.remove(); this._videoEl = null; } if ( this._barrageEl ) { this._barrageEl.remove(); this._barrageEl = null; } if ( this._seizingTimer ) { window.clearTimeout(this._seizingTimer) this._seizingTimer = null } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_showPoster',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._showPoster is not a constructor") } if ( this._videoEl && this.poster && this.video.paused ) { let img = new Image(); img.onload = () => { if ( this.video.paused ) { this._posterEl = document.createElement('DIV'); this._posterEl.setAttribute('class', 'ybplayer-video-poster'); this._posterEl.setAttribute('style', `background-size: ${this.objectFit};background-image: url(${this.poster})`); this._videoEl.appendChild(this._posterEl); } img = null } img.onerror = () => { img = null } img.src = this.poster; } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_hidePoster',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._hidePoster is not a constructor") } if ( this._posterEl ) { this._posterEl.onerror = null this._posterEl.onload = null this._posterEl.remove() this._posterEl = null } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_initHeaders',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._initHeaders is not a constructor") } if ( this.container && this.title ) { this._destroyHeaders() this._headersEl = document.createElement('DIV'); this._headersEl.setAttribute('class', 'ybplayer-headers'); this._headersEl.innerHTML = `
${this.title} `; this.container.appendChild(this._headersEl); this._querySelector('ybplayer-icon-back').onclick = () => { this.exitFullscreen() } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyHeaders',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyHeaders is not a constructor") } if ( this._headersEl ) { this._querySelector('ybplayer-icon-back').onclick = null this._headersEl.remove(); this._headersEl = null; } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_initControls',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._initControls is not a constructor") } if ( this.container ) { this._controlsEl = document.createElement('DIV'); this._controlsEl.setAttribute('class', 'ybplayer-controls'); this._controlsEl.innerHTML = `
${this.prevBtnShow ? ` ` : ''}
${this.playShow ? ` ` : ''}
${this.nextBtnShow ? ` ` : ''}
${this.timeShow ? ` 00:00 / 00:00 ` : ''}
${this.fullscreenShow ? ` ` : ''}
${this.settingShow ? ` ` : ''}
${this.volumeShow ? ` ` : ''}
`; this.container.appendChild(this._controlsEl); this._controlsEl.onmousedown = () => { this._clear_controlsTimer() } this._controlsEl.onmouseleave = () => { this._start_controlsTimer() } if ( this.playShow ) { this._querySelector('ybplayer-icon-play').onclick = () => { this.toggle() } } if ( this.volumeShow ) { this._querySelector('ybplayer-icon-volume').onclick = () => { this.setConfig('muted', !this.muted) } } if ( this.settingShow ) { this._querySelector('ybplayer-icon-setting').onclick = () => { this._showSetting() } } if ( this.fullscreenShow ) { this._querySelector('ybplayer-icon-fullscreen').onclick = () => { this.switchFullscreen() } } if ( this.prevBtnShow ) { this._querySelector('ybplayer-icon-play-prev').onclick = () => { this._eventCallback.prevBtnClick && this._eventCallback.prevBtnClick(); } } if ( this.nextBtnShow ) { this._querySelector('ybplayer-icon-play-next').onclick = () => { this._eventCallback.nextBtnClick && this._eventCallback.nextBtnClick(); } } this._initProgress() this._showControls(); } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyControls',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyControls is not a constructor") } if ( this._controlsEl ) { this._destroyProgress() this._controlsEl.onmousedown = null this._controlsEl.onmouseleave = null if ( this.playShow && this._querySelector('ybplayer-icon-volume') ) this._querySelector('ybplayer-icon-play').onclick = null if ( this.volumeShow && this._querySelector('ybplayer-icon-volume') ) this._querySelector('ybplayer-icon-volume').onclick = null if ( this.settingShow && this._querySelector('ybplayer-icon-setting') ) this._querySelector('ybplayer-icon-setting').onclick = null if ( this.fullscreenShow && this._querySelector('ybplayer-icon-fullscreen') ) this._querySelector('ybplayer-icon-fullscreen').onclick = null if ( this.prevBtnShow && this._querySelector('ybplayer-icon-play-prev') ) this._querySelector('ybplayer-icon-play-prev').onclick = null if ( this.nextBtnShow && this._querySelector('ybplayer-icon-play-next') ) this._querySelector('ybplayer-icon-play-next').onclick = null this._controlsEl.remove(); this._controlsEl = null } if ( this._settingEl ) { for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting').onclick = null } this._settingEl.remove(); this._settingEl = null; } if ( this._playbackRateEl ) { for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting')[i].onclick = null } this._playbackRateEl.remove(); this._playbackRateEl = null; } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_showControls',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._showControls is not a constructor") } this._clear_controlsTimer() if ( this._controlsEl ) { this._controlsEl.setAttribute('class', 'ybplayer-controls ybplayer-controls-show'); if ( this._controlSlotsEl ) this._controlSlotsEl.style.visibility = 'visible'; if ( this._headersEl ) this._headersEl.setAttribute('class', 'ybplayer-headers ybplayer-headers-show'); this._eventCallback.controlsChange && this._eventCallback.controlsChange({ controls: true }); this._start_controlsTimer() } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_hideControls',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._hideControls is not a constructor") } this._clear_controlsTimer() if ( this._controlsEl ) { this._controlsEl.setAttribute('class', 'ybplayer-controls ybplayer-controls-hide') if ( this._headersEl ) this._headersEl.setAttribute('class', 'ybplayer-headers ybplayer-headers-hide'); if ( this._controlSlotsEl ) this._controlSlotsEl.style.visibility = 'hidden'; this._eventCallback.controlsChange && this._eventCallback.controlsChange({ controls: false }); } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setControlsView',{ value:function(value){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setControlsView is not a constructor") } if ( !this.controls ) return if ( value == 'play' && this._querySelector('ybplayer-icon-play') ) { if ( this.playShow ) { this._querySelector('ybplayer-icon-play').innerHTML = ``; } else { this._querySelector('ybplayer-icon-play').innerHTML = ''; } } else if ( value == 'timeUpdate' ) { if ( !this._isDrag ) { if ( this.timeShow || this.progressShow ) { var currentTime = this.video ? this.video.currentTime && this.video.currentTime != 'Infinity' ? this.video.currentTime : 0 : 0; var duration = this.isLive ? this.duration : this.video ? (this.duration || (this.video.duration && this.video.duration != 'Infinity' ? this.video.duration : 0) ) : 0; var rate = duration > 0 ? currentTime / duration : 0 if ( this.progressShow ) { if ( this._querySelector('ybplayer-slider-focus') ) { this._querySelector('ybplayer-slider-focus').style.width = (rate * 100) + '%' } if ( this._querySelector('ybplayer-slider') ) { this._querySelector('ybplayer-slider').value = rate * 100 } } if ( this._querySelector('ybplayer-controls-time') && this.timeShow ) { this._querySelector('ybplayer-controls-time').innerHTML = this.isLive ? this._timesFormat(parseInt(duration) + parseInt(currentTime)) : `${this._timesFormat(currentTime)} / ${this._timesFormat(duration)}` } } else { this._querySelector('ybplayer-controls-time').innerHTML = '' } } } else if ( value == 'volume' && this._querySelector('ybplayer-icon-volume') ) { if ( this.volumeShow ) { this._querySelector('ybplayer-icon-volume').style.marginLeft = '25px'; this._querySelector('ybplayer-icon-volume').innerHTML = '' this._querySelector('ybplayer-icon-volume').onclick = () => { this.setConfig('muted', !this.muted) } } else { this._querySelector('ybplayer-icon-volume').style.marginLeft = ''; this._querySelector('ybplayer-icon-volume').innerHTML = ''; this._querySelector('ybplayer-icon-volume').onclick = null } } else if ( value == 'setting' && this._querySelector('ybplayer-icon-setting') ) { if ( this.settingShow ) { this._querySelector('ybplayer-icon-setting').style.marginLeft = '25px'; this._querySelector('ybplayer-icon-setting').innerHTML = ''; this._querySelector('ybplayer-icon-setting').onclick = () => { this._showSetting() } } else { this._querySelector('ybplayer-icon-setting').style.marginLeft = ''; this._querySelector('ybplayer-icon-setting').innerHTML = ''; this._querySelector('ybplayer-icon-setting').onclick = null; } } else if ( value == 'fullscreen' && this._querySelector('ybplayer-icon-fullscreen') ) { if ( this.fullscreenShow ) { this._querySelector('ybplayer-icon-fullscreen').style.marginLeft = '25px'; this._querySelector('ybplayer-icon-fullscreen').innerHTML = ''; this._querySelector('ybplayer-icon-fullscreen').onclick = () => { this.switchFullscreen() } } else { this._querySelector('ybplayer-icon-fullscreen').style.marginLeft = ''; this._querySelector('ybplayer-icon-fullscreen').innerHTML = ''; this._querySelector('ybplayer-icon-fullscreen').onclick = null; } } else if ( value == 'prevBtn' && this._querySelector('ybplayer-icon-play-prev') ) { if ( this.prevBtnShow ) { this._querySelector('ybplayer-icon-play-prev').style.marginRight = '10px'; this._querySelector('ybplayer-icon-play-prev').innerHTML = ''; this._querySelector('ybplayer-icon-play-prev').onclick = () => { this._eventCallback.prevBtnClick && this._eventCallback.prevBtnClick() } } else { this._querySelector('ybplayer-icon-play-prev').style.marginRight = ''; this._querySelector('ybplayer-icon-play-prev').innerHTML = ''; this._querySelector('ybplayer-icon-play-prev').onclick = null; } } else if ( value == 'nextBtn' && this._querySelector('ybplayer-icon-play-next') ) { if ( this.nextBtnShow ) { this._querySelector('ybplayer-icon-play-next').style.marginLeft = '10px'; this._querySelector('ybplayer-icon-play-next').innerHTML = ''; this._querySelector('ybplayer-icon-play-next').onclick = () => { this._eventCallback.nextBtnClick && this._eventCallback.nextBtnClick() } } else { this._querySelector('ybplayer-icon-play-next').style.marginLeft = ''; this._querySelector('ybplayer-icon-play-next').innerHTML = ''; this._querySelector('ybplayer-icon-play-next').onclick = null; } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_initProgress',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._initProgress is not a constructor") } if ( this._querySelector('ybplayer-controls-progress') && this.progressShow && !this.isLive ) { this._querySelector('ybplayer-controls-progress').innerHTML = `
` this._querySelector('ybplayer-slider').onchange = (e) => { this._isDrag = false this.video && this.seek((this._querySelector('ybplayer-slider').value / 100) * (this.duration || this.video.duration)); this._start_controlsTimer(); } this._querySelector('ybplayer-slider').oninput = (e) => { this._isDrag = true if ( this._querySelector('ybplayer-slider-focus') ) this._querySelector('ybplayer-slider-focus').style.width = this._querySelector('ybplayer-slider').value + '%' this._clear_controlsTimer(); } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyProgress',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyProgress is not a constructor") } if ( this._querySelector('ybplayer-controls-progress') ) { if ( this._querySelector('ybplayer-slider') ) this._querySelector('ybplayer-slider').onchange = null if ( this._querySelector('ybplayer-slider') ) this._querySelector('ybplayer-slider').oninput = null this._querySelector('ybplayer-controls-progress').innerHTML = '' } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_showLongPlaybackRate',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._showLongPlaybackRate is not a constructor") } if ( this._wrapperEl && this.video && !this.video.paused ) { this.video.playbackRate = this.longpressPlaybackRate this._longPlaybackRateEl = document.createElement('DIV') this._longPlaybackRateEl.setAttribute('style', 'position:absolute;top:20px;left:50%;transform:translateX(-50%);padding:8px 13px;border-radius:5px;background-color:rgba(0,0,0,.5);color:#fff;font-size:13px;') this._longPlaybackRateEl.innerHTML = ` 快速播放中` this._wrapperEl.appendChild(this._longPlaybackRateEl) } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_hideLongPlaybackRate',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._showLongPlaybackRate is not a constructor") } if ( this._longPlaybackRateEl ) { this._longPlaybackRateEl.remove() this._longPlaybackRateEl = null } if ( this.video ) this.video.playbackRate = this.playbackRate }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_clear_controlsTimer',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._clear_controlsTimer is not a constructor") } if ( this.controls && this._controlsTimer ) { window.clearTimeout(this._controlsTimer) this._controlsTimer = null } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_start_controlsTimer',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._start_controlsTimer is not a constructor") } if ( this.controls ) { this._controlsTimer = window.setTimeout(() => { this._hideControls() }, 5000) } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_initSlots',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._initSlots is not a constructor") } let nodes = this.container.childNodes; for ( let i = 0; i < nodes.length; i++ ) { if ( [].concat(nodes[i].classList).toString().indexOf('ybplayer-slots') > -1 ) { this._slotsEl = nodes[i] let childNodes = this._slotsEl.childNodes; for ( let j = 0; j < childNodes.length; j++ ) { if ( [].concat(childNodes[j].classList).toString().indexOf('ybplayer-controls-slots') > -1 ) { this._controlSlotsEl = childNodes[j]; } } this._wrapperEl.appendChild(this._slotsEl); } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroySlots',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroySlots is not a constructor") } if ( this._controlSlotsEl ) this._controlSlotsEl = null if ( this._slotsEl && this.container ) { this.container.appendChild(this._slotsEl) this._slotsEl = null } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_showSetting',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._showSetting is not a constructor") } if ( this.container ) { this._settingEl = document.createElement('DIV'); this._settingEl.setAttribute('class', 'ybplayer-settings'); let barrageHtml = ''; let settings = this.settings.split(',').map(setting => setting.trim()); try{ barrageHtml = YBBarrage ? `

${this.barrageShow ? '关闭弹幕' : '开启弹幕'}

` : ''; }catch(e){ } this._settingEl.innerHTML = ` ${ this.settings == 'all' || settings.indexOf('barrage') > -1 ? barrageHtml : ''} ${ this.settings == 'all' || settings.indexOf('playbackRate') > -1 ? `

播放速度

` : '' } ${ this.settings == 'all' || settings.indexOf('mirror') > -1 ? `

${this.mirror ? '关闭镜像' : '镜像画面'}

` : '' } ${ this.settings == 'all' || settings.indexOf('capture') > -1 ? `

截取画面

` : '' } ${ (this.settings == 'all' || settings.indexOf('pictureInPicture') > -1) && document.pictureInPictureEnabled ? `

${this.pictureInPicture ? '退出画中画' : '画中画'}

` : '' } ${ (this.settings == 'all' || settings.indexOf('dlna') > -1) && false ? `

开启投屏

` : '' } `; this.container.appendChild(this._settingEl); for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting')[i].onclick = () => { let type = this._querySelectorAll('ybplayer-setting')[i].getAttribute('data-value'); if ( type == 'barrage' ) { this.setConfig('barrageShow', !this.barrageShow); } else if ( type == 'playbackRate' ) { if ( this._playbackRateEl ) { this._hidePlaybackRate(); } else { this._showPlaybackRate(); } } else if ( type == 'mirror' ) { this.setConfig('mirror', !this.mirror); } else if ( type == 'capture' ) { this.capture(); this._hideSetting(); } else if ( type == 'pictureInPicture' ) { this.setConfig('pictureInPicture', !this.pictureInPicture); } else { this._startSearchDlna() } } } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_hideSetting',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._hideSetting is not a constructor") } if ( this.container && this._settingEl ) { this._settingEl.setAttribute('class', 'ybplayer-settings ybplayer-settings-hide'); for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting')[i].onclick = null } window.setTimeout(() => { this.container.removeChild(this._settingEl); this._settingEl = null; }, 300); } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setSettingView',{ value:function(value){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setSettingView is not a constructor") } if ( this._querySelector('ybplayer-setting') ) { for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { if ( this._querySelectorAll('ybplayer-setting')[i].getAttribute('data-value') == value ) { if ( value == 'barrage' ) { this._querySelectorAll('ybplayer-setting')[i].innerHTML = `

${this.barrageShow ? '关闭弹幕' : '开启弹幕'}

`; } else if ( value == 'mirror' ) { this._querySelectorAll('ybplayer-setting')[i].innerHTML = `

${this.mirror ? '关闭镜像' : '镜像画面'}

`; } else if ( value == 'pictureInPicture' ) { this._querySelectorAll('ybplayer-setting')[i].innerHTML = `

${this.pictureInPicture ? '退出画中画' : '画中画'}

`; } } } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_startSearchDlna',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._startSearchDlna is not a constructor") } try{ jsBridge.dlna.search(function(succ, data) { console.log('succ', succ); console.log('data', data); }); }catch(e){ //TODO handle the exception } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_showPlaybackRate',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._showPlaybackRate is not a constructor") } if ( this.container ) { this._hideSetting(); this._playbackRateEl = document.createElement('DIV'); this._playbackRateEl.setAttribute('class', 'ybplayer-settings'); let playbackRates = [{ label: '0.25', value: 0.25 },{ label: '0.5', value: 0.5 },{ label: '0.75', value: 0.75 },{ label: '正常', value: 1.0 },{ label: '1.25', value: 1.25 },{ label: '1.5', value: 1.5 },{ label: '1.75', value: 1.75 },{ label: '2.0', value: 2.0 }]; for ( let rate of playbackRates ) { this._playbackRateEl.innerHTML += `

${rate.label}

`; } this.container.appendChild(this._playbackRateEl); let that = this for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting')[i].onclick = function () { that.setConfig('playbackRate', this.getAttribute('data-rate')) } } } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_hidePlaybackRate',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._hidePlaybackRate is not a constructor") } if ( this.container && this._playbackRateEl ) { this._playbackRateEl.setAttribute('class', 'ybplayer-settings ybplayer-settings-hide'); for ( let i = 0; i < this._querySelectorAll('ybplayer-setting').length; i++ ) { this._querySelectorAll('ybplayer-setting')[i].onclick = null } window.setTimeout(() => { this.container.removeChild(this._playbackRateEl); this._playbackRateEl = null; this._showSetting(); }, 300); } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_initBarrage',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._initBarrage is not a constructor") } try{ this.barrage = new YBBarrage({ container: this._barrageEl, barrages: this.barrages, config: Object.assign({}, this.barrageConfig, { initialTime: this.video ? this.video.currentTime : 0 }) }); if ( !this.video.paused ) this.barrage.play(); this._setSettingView('barrage'); this._eventCallback.barrageChange && this._eventCallback.barrageChange({ show: true }) }catch(e){ //TODO handle the exception } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyBarrage',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyBarrage is not a constructor") } if ( this.barrage ) { this.barrage.stop(); this.barrage = null; this._setSettingView('barrage'); this._eventCallback.barrageChange && this._eventCallback.barrageChange({ show: false }) } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setConfig',{ value:function(attribute, value){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setConfig is not a constructor") } const videoAttributes = ['autoplay', 'loop', 'muted', 'preload', 'volume', 'playbackRate', 'crossOrigin']; if ( this.video && videoAttributes.includes(attribute) ) this.video[attribute] = value; if ( this.video && attribute == 'objectFit' ) this.video.style.objectFit = value; if ( this.video && attribute == 'mirror' ) { this.video.style.transform = 'rotateY(' + (value ? 180 : 0) + 'deg)'; this._setSettingView('mirror'); } if ( this.video && attribute == 'pictureInPicture' ) { if ( document.pictureInPictureEnabled ) { if ( value ) this.video.requestPictureInPicture(); else document.pictureInPictureElement && document.exitPictureInPicture(); } } if ( attribute == 'controls' ) { if ( value ) this._initControls() else this._destroyControls() } if ( attribute == 'prevBtnShow' ) { this._setControlsView('prevBtn') } if ( attribute == 'nextBtnShow' ) { this._setControlsView('nextBtn') } if ( attribute == 'timeShow' ) { this._setControlsView('timeUpdate') } if ( attribute == 'settingShow' ) { this._setControlsView('setting') } if ( attribute == 'progressShow' ) { if ( value ) this._initProgress() else this._destroyProgress() } if ( attribute == 'barrageShow' ) { if ( value ) this._initBarrage() else this._destroyBarrage() } if ( attribute == 'barrageConfig' ) { this.barrage && this.barrage.setConfig(value); } if ( attribute == 'barrageGap' ) { this.barrage && this.barrage.refresh(); } if ( attribute == 'title' ) { if ( value ) { if ( this._querySelector('ybplayer-headers-title') ) { this._querySelector('ybplayer-headers-title').innerHTML = value; } else { this._initHeaders(); } } else { this._destroyHeaders(); } } if ( attribute == 'src' || attribute == 'segments' ) { this._destroy(false) this._init() // this._destroyHls() // this._destroyFlv(); // this._destroyControls(); // this._destroyBarrage(); // this._destroyHeaders(); // this._destroyVideo(); // this._destroySlots(); // this._initVideo(); // this._initSlots(); // this._setVideoUrl(); // if ( this.fullscreen ) this._initHeaders(); // if ( this.controls ) this._initControls(); } }, enumerable:false }) //获取后缀 Object.defineProperty(YBPlayer.prototype,'_suffix',{ value:function(name){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._suffix is not a constructor") } let fileName = name.lastIndexOf("."); let fileNameLength = name.length; let fileFormat = name.substring(fileName + 1, fileNameLength); return fileFormat; }, enumerable:false }) //格式化时间 Object.defineProperty(YBPlayer.prototype,'_timesFormat',{ value:function(value){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._timesFormat is not a constructor") } let hours = Math.floor(value / 60 / 60 % 60) >= 10 ? Math.floor(value / 60 / 60 % 60) : '0' + Math.floor(value / 60 / 60 % 60); let minutes = Math.floor(value / 60 % 60) >= 10 ? Math.floor(value / 60 % 60) : '0' + Math.floor(value / 60 % 60); let seconds = Math.floor(value % 60) >= 10 ? Math.floor(value % 60) : '0' + Math.floor(value % 60); return hours == '00' ? (minutes + ':' + seconds) : (hours + ':' + minutes + ':' + seconds); }, enumerable:false }) //深度克隆 Object.defineProperty(YBPlayer.prototype,'_deepClone',{ value:function(obj){ if(typeof obj !== "object" && typeof obj !== 'function') { //原始类型直接返回 return obj; } var o = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {}; for(let i in obj) { if(obj.hasOwnProperty(i)){ o[i] = i === 'loader' ? '' : Object.prototype.toString.call( obj[i] ) === '[object XMLHttpRequest]' ? "" : typeof obj[i] === "object" ? this._deepClone(obj[i]) : obj[i]; } } return o; }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setClassName',{ value:function(className){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setClassName is not a constructor") } return this.container.id + '_' + className + ' ' + className }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_querySelector',{ value:function(className){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._querySelector is not a constructor") } return this.container && document.getElementsByClassName(this.container.id + '_' + className) && document.getElementsByClassName(this.container.id + '_' + className).length > 0 ? document.getElementsByClassName(this.container.id + '_' + className)[0] : null }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_querySelectorAll',{ value:function(className){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._querySelectorAll is not a constructor") } return this.container ? document.getElementsByClassName(this.container.id + '_' + className) || [] : [] }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setVideoUrl',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setVideoUrl is not a constructor") } if ( this.src ) { let formats = ''; if ( this.formats == 'auto' ) formats = this._suffix(this.src.split('?')[0]); else formats = this.formats; if ( formats == 'm3u8' ) this._setM3u8(); else if ( formats == 'flv' ) this._setFlv(); else this._setBlob(); } else if ( this.segments ) { this._setFlv(); } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setBlob',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setBlob is not a constructor") } if ( this.enableBlob ) { let xhr = new XMLHttpRequest() xhr.open('GET', this.src, true) xhr.responseType = 'blob' xhr.onload = () => { if ( xhr.status == 200 ) { try { this.video.srcObject = xhr.response } catch (error) { const URL = window.URL || window.webkitURL this.video.src = URL.createObjectURL(xhr.response); } } else { this.video.src = this.src } // this.video.load() xhr.abort() xhr = null } xhr.onerror = () => { this.video.src = this.src // this.video.load() xhr = null } xhr.send() } else { this.video.src = this.src // this.video.load() } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setM3u8',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setM3u8 is not a constructor") } try{ if ( Hls.isSupported() ) { this.hls = new Hls(); this.hls.loadSource(this.src); this.hls.attachMedia(this.video); // this.hls.on(Hls.Events.MANIFEST_PARSED, (e) => { }); this.hls.on(Hls.Events.ERROR, (e, data) => { this._eventCallback.error && this._eventCallback.error(this._deepClone(data)); }); } else { this.video.src = this.src; // this.video.load(); } }catch(e){ this._eventCallback.error && this._eventCallback.error(this._deepClone(e)) } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyHls',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyHls is not a constructor") } if (this.hls) { this.hls.destroy(); this.hls = null; } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_setFlv',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._setFlv is not a constructor") } try{ if (flvjs.isSupported()) { this.flv = flvjs.createPlayer( { type: "flv", isLive: this.isLive, url: this.src, segments: this.segment && this.segments.length > 0 ? this.segment : null, cors: this.flvConfig.cors, withCredentials: this.flvConfig.withCredentials, hasAudio: this.flvConfig.hasAudio, hasVideo: this.flvConfig.hasVideo, duration: this.flvConfig.duration, filesize: this.flvConfig.filesize }, Object.assign({}, { enableWorker: false, //不启用分离线程 enableStashBuffer: false, //关闭IO隐藏缓冲区 isLive: true, lazyLoad: false }, this.flvConfig) ) } else { this.video.src = this.src; // this.video.load(); } this.flv.on('error', this._flvError.bind(this)); this.flv.on("statistics_info", this._statisticsInfo.bind(this)); this.flv.on("loading_complete", this._loadingComplete.bind(this)); this.flv.on("recovered_early_eof", this._recoveredEarlyEof.bind(this)); this.flv.on("media_info", this._mediaInfo.bind(this)); this.flv.on("metadata_arrived", this._metadataArrived.bind(this)); this.flv.on("scriptdata_arrived", this._scriptdataArrived.bind(this)); this.flv.attachMediaElement(this.video); this.flv.load(); }catch(e){ this._flvError(e) } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_destroyFlv',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._destroyFlv is not a constructor") } if (this.flv) { this.flv.off('error', this._flvError) this.flv.off('statistics_info', this._statisticsInfo.bind(this)) this.flv.off('loading_complete', this._loadingComplete.bind(this)) this.flv.off("recovered_early_eof", this._recoveredEarlyEof.bind(this)); this.flv.off("media_info", this._mediaInfo.bind(this)); this.flv.off("metadata_arrived", this._metadataArrived.bind(this)); this.flv.off("scriptdata_arrived", this._scriptdataArrived.bind(this)); this.flv.pause(); this.flv.unload(); this.flv.detachMediaElement(); this.flv.destroy(); this.flv= null; } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_flvError',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._flvError is not a constructor") } this._eventCallback.error && this._eventCallback.error(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_statisticsInfo',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._statisticsInfo is not a constructor") } this._eventCallback.statisticsInfo && this._eventCallback.statisticsInfo(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_loadingComplete',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._loadingComplete is not a constructor") } this._eventCallback.loadingComplete && this._eventCallback.loadingComplete(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_recoveredEarlyEof',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._recoveredEarlyEof is not a constructor") } this._eventCallback.recoveredEarlyEof && this._eventCallback.recoveredEarlyEof(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_mediaInfo',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._mediaInfo is not a constructor") } this._eventCallback.mediaInfo && this._eventCallback.mediaInfo(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_metadataArrived',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._metadataArrived is not a constructor") } this._eventCallback.metadataArrived && this._eventCallback.metadataArrived(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_scriptdataArrived',{ value:function(e){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._scriptdataArrived is not a constructor") } this._eventCallback.scriptdataArrived && this._eventCallback.scriptdataArrived(this._deepClone(e)); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_fullscreenerror',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._fullscreenerror is not a constructor") } if ( this.container ) { this.container.style.position = 'fixed'; this.container.style.left = 0; this.container.style.right = 0; this.container.style.bottom = 0; this.container.style.top = 0; this.container.style.width = '100vw'; this.container.style.height = '100vh'; this.container.style.zIndex = 999; this._videoBackground = this.container.style.background this.container.style.background = '#000' this._cssfullscreenchange(); } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_fullscreenchanged',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._fullscreenchanged is not a constructor") } if ( document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement ) { this._eventCallback.fullscreenChange && this._eventCallback.fullscreenChange({ fullscreen: true, type: 'requestfullscreen' }); this.fullscreen = true; this._initHeaders(); } else { this._eventCallback.fullscreenChange && this._eventCallback.fullscreenChange({ fullscreen: false, type: 'requestfullscreen' }); this.fullscreen = false; this._destroyHeaders(); } this._setControlsView('fullscreen'); this.refreshBarrage(); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'_cssfullscreenchange',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer._cssfullscreenchange is not a constructor") } if ( this.container && this.container.style.position == 'fixed' ) { this._eventCallback.fullscreenChange && this._eventCallback.fullscreenChange({ fullscreen: true, type: 'cssfullscreen' }); this.fullscreen = true; this._initHeaders(); } else { this._eventCallback.fullscreenChange && this._eventCallback.fullscreenChange({ fullscreen: false, type: 'cssfullscreen' }); this.fullscreen = false; this._destroyHeaders(); } this._setControlsView('fullscreen'); this.refreshBarrage(); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'on',{ value:function(event, callback){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.on is not a constructor") } this._eventCallback[event] = callback; }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'play',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.play is not a constructor") } this.video && this.video.play() }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'pause',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.pause is not a constructor") } this.video && this.video.pause() }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'toggle',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.toggle is not a constructor") } this.video && this.video.paused ? this.video.play() : this.video.pause() }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'seek',{ value:function(time){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.seek is not a constructor") } if ( this.video ) this.video.currentTime = time }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'reload',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.reload is not a constructor") } this._destroy(false) this._init() }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'stop',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.stop is not a constructor") } this._destroy() }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'capture',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.capture is not a constructor") } const canvas = document.createElement('canvas'); canvas.width = this.video.videoWidth; canvas.height = this.video.videoHeight; canvas.getContext('2d').drawImage(this.video, 0, 0, canvas.width, canvas.height); canvas.toBlob(blob => { this._eventCallback.captureFinish && this._eventCallback.captureFinish({ blob: blob, base64: canvas.toDataURL('image/jpg') }) }, 'image/jpg') }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'drawBarrage',{ value:function(barrage){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.drawBarrage is not a constructor") } this.barrage && this.barrage.add(barrage); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'refreshBarrage',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.refreshBarrage is not a constructor") } this.barrage && this.barrage.refresh(); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'setBarrages',{ value:function(barrages){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.setBarrages is not a constructor") } this.barrages = barrages; this.barrage && this.barrage.setBarrages(barrages); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'setConfig',{ value:function(attribute, value){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.setConfig is not a constructor") } this[attribute] = value; this._setConfig(attribute, value); }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'switchFullscreen',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.switchFullscreen is not a constructor") } if ( document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement || (this.container && this.container.style.position == 'fixed') ) { this.exitFullscreen() } else { this.lanuchFullscreen() } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'lanuchFullscreen',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.lanuchFullscreen is not a constructor") } if ( document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement ) return const rfs = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen if ( typeof rfs != 'undefined' && rfs && this.container ) { rfs.call(this.container) } else if (typeof window.ActiveXObject !== "undefined") { //IE浏览器,模拟按下F11全屏 var wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } else { this._fullscreenerror() } }, enumerable:false }) Object.defineProperty(YBPlayer.prototype,'exitFullscreen',{ value:function(){ if(!(this instanceof YBPlayer)){//那么相反 不是正常调用的就是错误的调用 throw new TypeError("TypeError: YBPlayer.exitFullscreen is not a constructor") } if ( document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement ) { const cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.webkitExitFullscreen; if ( typeof cfs != 'undefined' && cfs ) { cfs.call(document) } } else if (typeof window.ActiveXObject !== "undefined") { //IE浏览器,模拟按下F11键退出全屏 var wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } else { if ( this.container && this.container.style.position == 'fixed' ) { this.container.style.position = 'relative'; this.container.style.width = '100%'; this.container.style.height = '100%'; this.container.style.top = 'inherit'; this.container.style.left = 'inherit'; this.container.style.right = 'inherit'; this.container.style.bottom = 'inherit'; this.container.style.zIndex = 'inherit'; this.container.style.background = this._videoBackground this._videoBackground = 'inherit' this._cssfullscreenchange(); } } }, enumerable:false })