A-Frame VR应用视频加载后无法播放的问题排查

我正在使用A-Frame开发一款VR网页应用，将所有视频存储在数组（video[ID] = URL）中。页面加载时，通过LoadAssets()函数遍历视频数组创建video标签并添加到页面，同时使用Promise确保所有视频触发canplaythrough事件后才离开加载场景进入主菜单。

function LoadAssets(){

    const LoadingPromises = new Array();

    for(let vID in video){
        let video_asset = document.createElement('video');
            video_asset.setAttribute('id', vID);
            video_asset.setAttribute('preload', true);
            video_asset.setAttribute('playsinline', true);
            video_asset.setAttribute('webkit-playsinline', true);
            video_asset.setAttribute('crossorigin', 'anonymous');
            video_asset.setAttribute('type', 'video/mp4');
            video_asset.setAttribute('src', video[vID]);
        document.getElementById('assets').appendChild(video_asset); //add the video tag to the 'a-assets' tag for a-frame
        
        const promise = new Promise((resolve, reject) => {
            video_asset.oncanplaythrough = resolve();
            video_asset.onerror = reject;
        });
        LoadingPromises.push(promise);
    }

    return Promise.all(LoadingPromises)
        .then(() => { //bring up the main menu })
        .catch(error => { console.error('Error loading resources:', error);});
}

但点击目标VR元素播放视频时，视频的readyState返回1。

function PlayVideo(what){

    var Player = document.getElementById("Player");
    var Source = what.dataset.vid;// the ID of the video to play

        Player.setAttribute('src',Source);
        Player.addEventListener('materialtextureloaded', function(){ Player.components.material.material.map.image.play(); } //only actually plays the video if loaded
    var Video = document.querySelector(Source);
        //I added check if the video was playing (with "playing" defined as 'this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2'
        window.setTimeout(function(){     
            if(Video.playing){
                //show player            
            }
            else{ throw Video.id+" is not playing (Ready State: "+Video.readyState+")"; PlayVideo(what); }
        }, 1000);
}

视频文件较大，Web应用部署在本地服务器，计划通过Oculus Quest 2体验。PC端运行正常，且无法播放的视频不固定。请问如何确保视频完全就绪/加载完成后再播放？

1. 修复LoadAssets中的Promise逻辑错误 #

你的代码里video_asset.oncanplaythrough = resolve();是立即执行resolve，而非将resolve函数绑定到事件上，这会导致Promise直接完成，根本没等canplaythrough事件触发。正确写法：

const promise = new Promise((resolve, reject) => {
    video_asset.oncanplaythrough = resolve; // 传递函数引用，不要加括号
    video_asset.onerror = () => reject(new Error(`Failed to load video: ${vID}`));
});

同时，将preload属性值从true改为标准值'auto'，确保浏览器尽可能加载完整视频：

video_asset.setAttribute('preload', 'auto');

2. 确保视频加载完成并缓存 #

除canplaythrough外，可补充监听loadeddata事件作为就绪判断；加载完成后保持视频标签存在，避免动态删除，确保浏览器缓存视频数据。

3. 重构PlayVideo函数，替换定时器轮询 #

用事件监听替代setTimeout轮询，确保视频真正就绪后再播放：

function PlayVideo(what) {
    const Player = document.getElementById("Player");
    const videoId = what.dataset.vid;
    const Video = document.getElementById(videoId); // 用getElementById更高效

    // 先检查当前readyState
    if (Video.readyState >= 3) { // HAVE_FUTURE_DATA(3) 或 HAVE_ENOUGH_DATA(4)
        playVideoSafely(Player, Video);
    } else {
        // 监听就绪事件，仅执行一次
        const onReady = () => {
            Video.removeEventListener('canplaythrough', onReady);
            Video.removeEventListener('loadeddata', onReady);
            playVideoSafely(Player, Video);
        };
        Video.addEventListener('canplaythrough', onReady);
        Video.addEventListener('loadeddata', onReady);
    }
}

function playVideoSafely(playerEl, videoEl) {
    playerEl.setAttribute('src', `#${videoEl.id}`);
    // 监听A-Frame材质加载完成
    const onMaterialLoaded = () => {
        playerEl.removeEventListener('materialtextureloaded', onMaterialLoaded);
        videoEl.play().catch(err => {
            console.error('Failed to play video:', err);
            // 可添加重试或用户提示逻辑
        });
        // 执行显示播放器的逻辑
        // show player
    };
    playerEl.addEventListener('materialtextureloaded', onMaterialLoaded);
}

注意：不要使用非标准的Video.playing属性，改用videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2判断播放状态。

4. 针对Oculus Quest 2的适配优化 #

• 视频编码适配：Quest 2对H.264编码兼容性最佳，建议视频分辨率控制在1920x1080、帧率30fps以内，过高规格会导致内存不足。
• 内存管理：由于设备内存有限，避免同时预加载所有大视频，改为按需加载（用户选择后再加载，播放完成后释放资源）。
• 使用A-Frame原生资源标签：直接在<a-assets>中定义视频元素，而非JS动态创建，A-Frame会自动处理资源生命周期。

5. 增强错误处理 #

在视频加载、播放全流程添加错误捕获：

• 加载失败时提示用户
• 播放失败时尝试重新加载或切换备用资源
• 监听stalled、waiting事件，处理缓冲卡顿问题

内容的提问来源于stack exchange，提问作者Jean-Baptiste Wattiaux