ayamir

最近几天一直在用WebXR的技术重构目前的基于分块的全景视频自适应码率播放客户端，下面简述一下过程。 首先结论是：分块播放+自适应码率+完全的沉浸式场景体验=Impossible（直接使用 WebXR 提供的 API） 分块播放 分块播放的本质是将一整块的全景视频从空间上划分成多个小块，各个小块在时间上与原视频的长度是相同的。 在实际播放的时候需要将各个小块按照原有的空间顺序排列好之后播放，为了避免各个分块播放进度不同的问题，播放时还需要经过统一的时间同步。 对应到 web 端的技术实现就是： 一个分块的视频<->一个<video>h5 元素<->一个<canvas>h5 元素 视频的播放过程就是各个分块对应的<canvas>元素不断重新渲染的过程 各个分块时间同步的实现需要一个基准视频进行对齐，大体上的原理如下： let baseVideo = null; let videos = []; initBaseVideo(); initVideos(); for (video in videos) { video.currentTime = baseVideo.currentTime; } 自适应码率 自适应码率的方案使用dashjs库实现，即对每个分块<video>元素的播放都用dashjs的方案控制： import { MediaPlayer } from "dashjs"; let videos = []; let dashs = []; let mpdUrls = []; initVideos(); initMpdUrls(); for (let i = 0; i < tileNum; i++) { let video = videos[i]; let dash = MediaPlayer().