jquery get Child elements of <video> tag

Question

I am working on changing the src attributes on the <source> elements inside my <video> element.

Original Markup

<video id='myVidID' class='video-js vjs-default-skin' controls autoplay preload='auto' width='1280' height='720' poster='poster.jpg' data-setup='{}'>

<source src='uploads/video/static/vid1.mp4' type='video/mp4'>
<source src='uploads/video/static/vid1.webm' type='video/webm'>

Whoops. Your browser does not Support HTML5 or Flash. Please upgrade your browser.

</video>

I want to:

Get the video container (element), and then reference child1, and then child2 (0,1).

My code seems to change the runtime added src attribute in the <video> tag (<video src='') instead of the two child source tags' src attributes.

P.S. My script runs, and does change the src attribute in the video tag (Which is not the intended change).

<script type="text/javascript">

var myVideo = videojs("myVidID");

function onComplete(){
var child = $('#myVidID').children();
child[0].src = 'uploads/video/demovid-01-02-2014.mp4';
child[1].src = 'uploads/video/demovid-01-02-2014.webm';

myVideo.load();
myVideo.play();
myVideo.off('ended', onComplete);
};

myVideo.on('ended', onComplete);

</script>

Answer 1

Since you're using video.js, you'd be better off using its API to set the new source. That way it will also work if Flash fallback had to be used.

myPlayer.src([
  { type: "video/mp4", src: "uploads/video/demovid-01-02-2014.mp4" },
  { type: "video/webm", src: "uploads/video/demovid-01-02-2014.webm" }
]);

https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md#src-source-