使用javascript / jquery更改html5视频源

Question

I have a video on my webpage like so:

<div id="videoContainer">
<video id="video1" width="960" controls autoplay>
    <source src=static/media/Wreck_It_Ralph_Trailer.mp4 type="video/mp4">
    Your browser does not support html5 video
</video>

and I want to change the source of the video using jquery/javascript. I have this code but it doesn't work

$('source').attr({'src':'static/media/Here_Comes_The_Boom_Official_Trailer.mp4'})

Can someone say why this isn't working or suggest a correct way to do it?

Answer 1

After looking at the link by Mic I needed an extra line of code

a=document.getElementById('video1')
a.load()

Answer 2

I believe you can do something like this:

document.getElementById('video1').src = 'static/media/Here_Comes_The_Boom_Official_Trailer.mp4';

which just changes the video player's source directly, without fiddling with the DOM elements.