用VR设备观看B站360度视频（声音可正常播放）

bilibili-360-vr.js

// 哔哩哔哩360度视频VR播放插件
// 感谢：
// <https://liyin.date/2020/04/25/bilibili-360-video-in-vr> 提供了思路
// <https://videojs-vr.netlify.app/> 提供了WebVR/WebXR播放器代码
// <https://blog.csdn.net/ministech/article/details/106036980> 提供了loadScript和loadCss函数

var VideoJS_VRPlayer_Bilibili = {
    loadScript(src) {
        return new Promise((resolve, reject) => {
            var script = document.createElement('script'),
                head = document.getElementsByTagName('head')[0];
            script.type = 'text/javascript';
            script.charset = 'UTF-8';
            script.src = src;
            if (script.addEventListener) {
                script.addEventListener('load', function () {
                    resolve();
                }, false);
            } else if (script.attachEvent) {
                script.attachEvent('onreadystatechange', function () {
                    var target = window.event.srcElement;
                    if (target.readyState == 'loaded') {
                        resolve();
                    }
                });
            }
            head.appendChild(script);
        })
    },
    loadCss(href) {
        return new Promise((resolve, reject) => {
            var link = document.createElement('link'),
                head = document.getElementsByTagName('head')[0];
            link.rel = 'stylesheet';
            link.href = href;
            if (link.addEventListener) {
                link.addEventListener('load', function () {
                    resolve();
                }, false);
            } else if (link.attachEvent) {
                link.attachEvent('onreadystatechange', function () {
                    var target = window.event.srcElement;
                    if (target.readyState == 'loaded') {
                        resolve();
                    }
                });
            }
            head.appendChild(link);
        })
    },
    async initVRPlayer(sourcePlayer, sourceVideo) {
        if (null !== document.querySelector('#videojs-vr-player-bilibili')) {
            console.log('videojs-vr-player-bilibili 已存在，无需再次加载');
            return;
        }

        console.log('暂停视频');
        sourcePlayer.pause();

        console.log('加载css');
        await this.loadCss('https://hu60.cn/js/node_modules/video.js/dist/video-js.css');
        await this.loadCss('https://hu60.cn/js/node_modules/videojs-vr/dist/videojs-vr.css');
        console.log('加载js');
        await this.loadScript('https://hu60.cn/js/node_modules/video.js/dist/video.js');
        await this.loadScript('https://hu60.cn/js/node_modules/videojs-vr/dist/videojs-vr.js');

        console.log('创建video对象');
        var video = sourceVideo;
        video.width = 640;
        video.height = 300;
        video.id = 'videojs-vr-player-bilibili';
        video.classList.add('video-js', 'vjs-default-skin');
        video.controls = true;
        video.playsinline = true;
        document.querySelector('#v_tag').append(video);

        console.log('初始化VR播放器');
        var player = window.VRPlayer = videojs('videojs-vr-player-bilibili');
        player.mediainfo = player.mediainfo || {};
        player.mediainfo.projection = '360';

        // AUTO is the default and looks at mediainfo
        window.VR = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
    },
};

VideoJS_VRPlayer_Bilibili.initVRPlayer(player, document.querySelector("video"));