Welcome to the Oculus Developer Forums!

Your participation on the forum is subject to the Oculus Code of Conduct.

In general, please be respectful and kind. If you violate the Oculus Code of Conduct, your access to the developer forums may be revoked at the discretion of Oculus staff.

Loading html5 videos in Oculus Web Browser

test.shadotest.shado Posts: 4
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.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
}, false);
videoEl.addEventListener("waiting", (e) => {
  console.log("  waiting: " + this.bufferedVid(videoEl));
}, 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 &&
  if (!isPlaying & promisePlay !== undefined) {
      .then(() => {
        faceEl.setAttribute("material", "src: #" + videoEl.id);
        let vidObj = {
          volume: 0
          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


  • test.shadotest.shado Posts: 4
    Hello! thank you for your reply; the platform is Oculus Go. I'm trying to implementr loading videos with simple vanilla js instructions, applying them as video textures on 3d planes. In some conditions -not clear to me- the loading of videos, in the browser of Oculus Go, is not started (progress 0%); I see this from the remote debugging of chrome. My questions are:

    - Oculus Go's browser (built on a Chromium custom build, right?) implements an aggressive caching mechanism?
    - may depend on the video codec used in the mp4?
    - Does the Oculus Go browser have a different implementation than the GearVR one? Are there any best practices regarding codecs/etc to be considered?
    - When I leave the browser, clear the cache, and re-access to the app url,  videos loading works, it has the expected behavior.

  • test.shadotest.shado Posts: 4

    Thanks for the extra depth in context here. Can you share a reproduction project/link for us to analyze this behavior internally?
    sure! here the preview link https://shadotv.github.io/the-ring/public/
    • By clicking on "start experience" the application switches to VR Mode and it is in this context that the problem occurs
    thanks again
Sign In or Register to comment.