Loading html5 videos in Oculus Web Browser
Hi everyone! I'm working on an application in AFRAME,
where mp4 videos are loaded "on-demand" with javascript, but i have problems.
Sometimes the Oculus Web Browser, despite the explicit load() of the video, does not start the loading,
and does not track any event related to the video (no progress/canplay etc).
Could it be a problem with caching or mp4 codecs?
Is there a preferred way/best practice to loading html5 videos?
Here is the main code, which works on Chrome/Firefox desktop & Android.
Any reference/example could help a lot, thank you!
var promisePlay;
videoEl.src = src;
videoEl.load();
videoEl.crossOrigin = "anonymous";
videoEl.addEventListener("progress", (e) => {
var videoEl = e.target;
console.log(' progress: ' + this.bufferedVid(videoEl), " ", videoEl.readyState);
}, false);
videoEl.addEventListener("canplaytrough", (e) => {
console.log(" canplaytrough:", videoEl.id, videoEl.readyState);
}, {
once: true
});
videoEl.addEventListener("stalled", (e) => {
console.log(" stalled: " + this.bufferedVid(videoEl));
//try to load again
videoEl.load();
}, false);
videoEl.addEventListener("waiting", (e) => {
console.log(" waiting: " + this.bufferedVid(videoEl));
//videoEl.load();
}, false);
videoEl.addEventListener("canplay", (e) => {
console.log(" canplay:", e, videoEl.id, videoEl.readyState, this.bufferedVid(videoEl));
faceEl.setAttribute("material", "src: #" + videoEl.id);
promisePlay = videoEl.play();
var isPlaying = videoEl.currentTime > 0 &&
!videoEl.paused &&
!videoEl.ended &&
videoEl.readyState >= READY_STATE_FLAG &&
this.videoFlags[videoEl.id].playing;
if (!isPlaying & promisePlay !== undefined) {
promisePlay
.then(() => {
faceEl.setAttribute("material", "src: #" + videoEl.id);
let vidObj = {
volume: 0
};
AFRAME.anime({
targets: vidObj,
volume: 0.85,
duration: TIME_FADEIN_VOLUME_MS,
easing: "linear",
update: function() {
videoEl.volume = vidObj.volume;
}
});
console.log(" *prom* playVideo: ", videoEl.id, videoEl.src, videoEl.readyState, videoEl.currentTime, videoEl.paused, videoEl.ended);
})
.catch(err => {
// AFRAME.log("*prom* err: playVideo:"+ err.toString());
console.log(" *prom* err: playVideo:" + err.toString());
});
}
}, {
once: true
});