CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-videovideo.js
Louis van Tonder
Louis van Tonder

Reputation: 3710

jquery get Child elements of <video> tag

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>

Upvotes: 2

Views: 2084

Answers (1)

misterben
misterben

Reputation: 7821

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-

Upvotes: 1

Related Questions