最近B站开始测试 360 度视频的功能，看了看我手边的 Vive，用这个看效果会不会不太一样呢？
不过B站的播放器是不支持 WebXR 技术的，只能用一些方法看看能不能把 BabylonJS 之类支持 WebXR 的 WebGL 渲染框架插入到页面上，然后用 BabylonJS 来播放。
最开始我看到 BabylonJS 的 VideoDome 对象，可以直接创建全景视频的世界对象，但它要传入一个视频地址。通过 video 标签定位发现，B站的 video 标签上是一个 blob URL，我把它提取出来在同页面传给 BabylonJS，结果并不行。因为这个是一个由 Media Extension 创建的 blob 并不是一个真的视频文件。于是只能再找找有没有别的方法了。
猜测了一下全局变量发现，有一个叫做 player 的全局对象里，可以通过调用 player.getPlayurl() 获得一个带有鉴权的播放地址，不过因为本来我就想在当前页播放，所以鉴权和 Cookies 基本没什么问题。把这个 URL 传给 BabylonJS 就可以啦。
剩下的就很简单了，使用 scene.createDefaultVRExperience() 创建一个带有 VR 支持的 BabylonJS 场景。然后创建 VideoDome 放进去就行了。BabylonJS 会自动生成进入 VR 的按钮。
代码也放在了 Github Gist
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);Chrome 从不知道哪个版本开始，就出现了无法访问 OpenVR 设备的问题，后来搜索发现，需要在 chrome://flags 里，关闭 XR device sandboxing。关闭之后顺利唤醒 SteamVR。
这段代码其实还有一些问题，比如音频和重定位视频位置，只能再研究怎么处理了。
将下面的按钮拖动到书签栏上来保存这个功能 在B站带有全景视频的页面上点击书签就行啦~