0

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.

Improve this question
2
  • 1
    once you set the src valu you have to call the load() method of the video tag, something like this: <script> jQuery( '#the-video' ).children( 'source' ).attr( 'src', 'the-video-url.mp4' ); jQuery('#the-video').load(); </script>
    – zGilexx
    Commented Oct 23, 2023 at 23:32
  • 1
    @zGilexx Thank you!!! It is working!!! but with the video element without nesting source element, like this: <video id="profile-photo-container" src="">. I wonder what is the difference between video element nesting source element and without.... Anyways, it is working, thanks a lot!
    – karlosuccess
    Commented Oct 24, 2023 at 0:32

1 Answer 1

Reset to default
2

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();

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.