potree-sdk/src/custom/utils/media/H5VideoPlayerBase.js

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
    }
}