Search code examples
htmljqueryjquery-pluginshtml5-video

Assigning video url to the <video> tag dynamically on the fly

I need to assign the video url to the <video> tag on the fly, expecting the video to show in the player, also on the fly:

I have this:

<script>
jQuery( '#the-video' ).children( 'source' ).attr( 'src', 'the-video-url.mp4' ); 
</script>

<video id="the-video" autoplay width="320" height="240">
    <source src="" type="video/mp4">
    Your browser does not support the video tag.
</video>

But the video is not populating in the browser, just like an image would do. For example, when doing it for an image, the image shows automatically:

<script>
jQuery( '#the-image' ).attr( 'src', 'the-image-url.jpg' ); 
</script>

<img src="" id="the-image" style="height:150px" />

The image shows on the fly. Doesn't it work the same for videos? I am running out of ideas.

Solution

  • If someone needs the answer, as @zGilexx indicated, here is the solution:

    After assigning the video url to the video tag on the fly, it has to be loaded by using jQuery('#the-video').load();