1

src/utils/media/FlvVideoPlayerBase.js

@@ -0,0 +1,147 @@
+
+import browser from '../browser.js'
+
+ 
+
+function exitFullScreen() {
+    if (document.fullscreenElement && document.fullscreenElement.tagName === 'VIDEO' && document.fullscreenElement.getAttribute('unfullscreen')) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen()
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+        } else if (document.oRequestFullscreen) {
+            document.oCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+        }
+        setTimeout(() => {
+            exitFullScreen()
+        }, 250)
+    }
+}
+if (browser.detectAndroidMobile()) {
+    //针对Android横屏时video会自动全屏播放的bug #39505 #43421
+    window.addEventListener('resize', () => {
+        //resize时如果全屏元素为video, 退出全屏
+        setTimeout(() => {
+            exitFullScreen()
+        }, 500) //太快可能检测不到document.fullscreenElement
+    })
+
+    window.addEventListener('orientationchange', e => {
+        // 空间视频横屏时会触发自动全屏
+        if (window.orientation == 0 || window.orientation == 180) {
+            //竖屏
+            let videos = document.querySelectorAll('video[box]') //只针对有box属性的video标签（空间视频）
+            videos.forEach(item => {
+                item.remove()
+            })
+            setTimeout(() => {
+                videos.forEach(i => {
+                    document.body.appendChild(i)
+                    i.play()
+                })
+            }, 500)
+        } else {
+            // 横屏
+            let videos = document.querySelectorAll('video[box]')
+            videos.forEach(item => {
+                item.remove()
+            })
+            setTimeout(() => {
+                videos.forEach(i => {
+                    document.body.appendChild(i)
+                    i.play()
+                })
+            }, 500)
+        }
+    })
+}
+
+export default class FlvVideoPlayerBase     {
+    constructor(player) {
+        
+
+        this.player = player
+        this.instances = new Map()
+        this.video = null
+    }
+
+    //overlay info -- [metadata.overlay]
+    addVideo( url) {
+        let instance = this._createVideo(url)
+        this.instances.set(url, instance)
+        instance.videoElement.masters = [] //一个video可以对应多个主体，因为它们链接一样
+
+        return instance
+    }
+
+    getVideo(url, master) {
+        let instance = this.instances.get(url)
+
+        if (!instance) {
+            instance = this.addVideo(url)
+        }
+        let video = instance.videoElement
+        master && video.masters.push(master)
+        
+        
+        video.onloadedmetadata = () => {
+            video.canPlayed = true
+            video.masters.forEach(m => {
+                 m.dispatchEvent({ type: 'loadedmetadata' })
+            })
+        }
+        
+        return video
+    }
+
+    _getVideoPath(sid) {
+        //在子类中扩展
+    }
+
+    _createVideo(url) {
+        let video = document.createElement('video')
+        video.setAttribute('crossOrigin', 'anonymous')
+        video.setAttribute('playsinline', 'true')
+        video.setAttribute('webkit-playsinline', 'true')
+        video.setAttribute('controls', 'true')
+        video.setAttribute('unfullscreen', 'true')
+
+        video.autoplay = false
+        video.muted = true
+        video.loop = true
+
+        video.style.position = 'fixed'
+        video.style.left = '0'
+        video.style.top = '0'
+        video.style.zIndex = '0'
+        video.style.width = '1px'
+        // video.style.display = 'none'
+        //video.isFirstPlay = true;
+        video.style.opacity = '0'
+        document.body.appendChild(video)
+
+        video.player = this
+
+        let player = flvjs.createPlayer({ type: 'flv', url: url })
+        player.videoElement = video
+        player.attachMediaElement(video)
+        player.on(flvjs.Events.ERROR, () => {
+            this._onPlayerError()
+            console.log('尝试使用mp4链接进行播放')
+            video.src = url.replace('.flv', '.mp4')
+        })
+        player.load()
+
+        return player
+    }
+
+    _onPlayerError() {
+        console.warn('视频加载失败')
+    }
+}

src/utils/media/H5VideoPlayerBase.js

@@ -0,0 +1,67 @@
+import browser from '../browser.js'
+
+export default class H5VideoPlayerBase   {
+    constructor( ) {
+       
+        
+
+        this.video = null
+        this.videos = new Map()
+    }
+
+    //overlay info -- [metadata.overlay]
+    addVideo( url) {
+        let video = this._createVideoElement(url)
+        this.videos.set(url, video)
+        video.masters = []
+
+        return video
+    }
+
+    getVideo(url, master) {
+        let video = this.videos.get(url)
+
+        if (!video) {
+            video = this.addVideo(url)
+        }
+        master && video.masters.push(master)
+        
+        video.onloadedmetadata = () => {
+            video.canPlayed = true
+            video.masters.forEach(m => {
+                 m.dispatchEvent({ type: 'loadedmetadata' })
+            })
+        }
+        
+        return video
+    }
+
+   
+    _createVideoElement(src) {
+        let video = document.createElement('video')
+        video.setAttribute('crossOrigin', 'anonymous')
+        video.setAttribute('playsinline', 'true')
+        video.setAttribute('x5-playsinline', 'true')
+        video.setAttribute('webkit-playsinline', 'true')
+        video.setAttribute('x5-video-player-type', 'h5')
+        video.setAttribute('controls', 'true')
+        video.setAttribute('x-webkit-airplay', 'allow')
+
+        video.autoplay = true
+        video.muted = true
+        video.loop = true
+        video.src = src
+
+        video.style.position = 'fixed'
+        video.style.left = '0'
+        video.style.top = '0'
+        video.style.zIndex = '1000'
+        video.style.width = '300px'
+        video.style.height = '300px'
+        //video.style.display = browser.urlHasValue('debug') ? 'block' : 'none'
+
+        //document.body.appendChild(video)
+
+        return video
+    }
+}