Question 196938 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Is there a way to change the source of an html video object without making it look glitchy?

I’m trying to make something like a video call interface, but I’m playing videos that get generated based on user responses. I need to be able to switch between the video currently displayed to the next generated video without the HTML collapsing and rebuilding the video element.

I tried just to change the source of the video using javascript and hoped that it would lead to a seamless transition, but that led to the video "collapsing" and then forming again.

The javascript looks something like this:

const video_html = document.getElementById('video');
function changeSource(path){
        video_html.src = path;
}
Tags:

2

Answers


  1. 0

    The issue you’re encountering could be due to the browser not yet having loaded the video when you’re trying to switch its source.

    You can use the loadedmetadata event, which is fired when the user agent can play the media, and estimates that if playback were to be started now, it would not need to stop for further buffering.See this for more info.

    loadedmetadata_event mozilla developer

    Like this

    const video_html = document.getElementById('video');

function changeSource(path) {
    // Store the current playback position
    const currentTime = video_html.currentTime;

    // Change the video source
    video_html.src = path;

    // Listen for the loadedmetadata event to ensure the new video source is ready
    video_html.onloadedmetadata = function () {
        // Remove the event listener to avoid unnecessary triggering
        video_html.onloadedmetadata = null;

        // Set the playback position to the stored currentTime
        video_html.currentTime = currentTime;

        // Play the video
        video_html.play();
    };

    // Error handling
    video_html.onerror = function() {
        console.log('Error occurred when trying to load video');
    };
}
    Login or Signup to reply.
  2. 0

    "I need to be able to switch between the video currently displayed to the next generated video without the HTML collapsing and rebuilding the video element."

    The natural state of the MPEG video decoder is to re-initialize for new data. This cannot be avoided so you need a workaround (and that depends on how advanced you are as a coder or video engineer).

    (1) If all the video clips already exist, and need only to be dynamically selected…

    Easiest: Switch between two video tags:

    • Use two <video> tags to hold a "now playing" and a "next playing" video.
    • Control "visibilty" by using CSS Styles (in Javascript eg: myvid.style.visibility = "hidden").
    • Use CSS options: z-index, position, top, left, to position one video tag above another.

    Easier: Seek to different clips within one video file:

    • Compile (or join) all videos into one long video file.
    • Loop according to time-range of each clip (check curren time via timeupdate event).
    • If next clip is needed, then seek to that time within the video and repeat your loop function.

    (2) If the video clips are dynamically generated (eg: lip sync for custom response’s words)…

    Harder: Use MediaSource Extensions to feed each video as a chunk:

    • Export (or convert) your videos into Fragmented MP4.
    • In MSE, first feed it with the main header (an initial MOOV atom).
    • Then feed in the clip (as a chunk) that you need to be looped.
    • To change videos, just feed in the bytes of a different video.

    Feeding in video bytes with MSE does not force the <video> tag to reload.
    It expects to be occasionally receiving video data so it stays "open" all the time.

    An alternative to using MSE is to instead use PHP to feed video bytes into a <video> tag. This means using a .php as video source instead of a .mp4 file.

    The MSE and PHP methods require you to know about MP4 file structure (is multiple byte-values inside an Array, and byte just means a number between 0 and 255). You need to learn which bytes represent your file’s header and which bytes are the audio/video frames.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search