Use babylonJS to Render Bilibili 360 Video to VR HeadSet

Bilibili-360VR.js

var cav = document.createElement('canvas')
cav.style.width = "100%"
cav.style.height = "100%"
document.querySelector('#v_tag').append(cav)
var babylon = document.createElement('script')
babylon.src = "https://cdn.babylonjs.com/babylon.js"
babylon.onload = function() {
var engine = new BABYLON.Engine(cav,true)
var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var vrHelper = scene.createDefaultVRExperience();
    vrHelper.teleportationEnabled = false;
    var videoDome = new BABYLON.VideoDome(
        "videoDome",
        [player.getPlayurl()],
        {
            resolution: 32
        },
        scene
    );
    vrHelper.currentVRCamera.attachControl(cav, true);
    return scene;
};
var scene = createScene()
engine.runRenderLoop(function() {
    scene.render();
});
window.addEventListener('resize', function() {
    engine.resize();
});
}
document.body.appendChild(babylon)

我写了一个支持声音播放，支持拖进度条的版本：
https://swimmingtiger.gitee.io/bilibili-360-vr/

// 哔哩哔哩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函数

(function () {

    if (document.querySelector("video") === null) {
        alert('找不到<video>标签，当前页面可能不是B站视频播放页面');
        return;
    }
    if (typeof player === "undefined") {
        alert('找不到player对象，当前页面可能不是B站视频播放页面');
        return;
    }

    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://swimmingtiger.gitee.io/bilibili-360-vr/lib/video-js.min.css');
            await this.loadCss('https://swimmingtiger.gitee.io/bilibili-360-vr/lib/videojs-vr.css');
            console.log('加载js');
            await this.loadScript('https://swimmingtiger.gitee.io/bilibili-360-vr/lib/video.min.js');
            await this.loadScript('https://swimmingtiger.gitee.io/bilibili-360-vr/lib/videojs-vr.min.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"));

})()

“src是blob，无法通过插件创建的video标签进行播放……”
“那为什么不直接用B站自己的video标签进行播放呢”

于是我的插件就做好了