Dynamically changing the source URL of the video is not working on IOS

[hebrerillo]

Hello there!

On IOS(Safari), changing dynamically the URL of the video source is not working.

Here is a code pen example.

After inspecting the code, the src attribute of the HTMLVideoElement is updated to the new URL, but the src attribute of the HTMLSourceElement is not updated.

I think I am not executing this instruction correctly:

videoJSInstance.src([ {type: "video/mp4", src:urlVideo2} ]);

On IOS, after executing that instruction, the video is stopped.

Can you please help me??

Thank you!

[amtins]

@hebrerillo what about something like:

const urlVideo2 = "https://videos.pexels.com/video-files/2278095/2278095-sd_640_360_30fps.mp4";
const videoElement = document.querySelector("video");

const videoJSInstance = videojs(videoElement);
videoJSInstance.on("loadeddata", () => videoJSInstance.play());

document.querySelector("[data-play]").addEventListener("click", () => {
  videoJSInstance.play();
});

const change = document.querySelector("[data-change]");
change.addEventListener("click", () => {
  videoJSInstance.src([ {type: "video/mp4", src:urlVideo2} ]);
  videoJSInstance.play();
});

[gkatsev]

yeah, should call play instead of load on line 14.

[hebrerillo]

@amtins @gkatsev thank you both!