CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
Vel Murugan S
Vel Murugan S

Reputation: 580

Change Video (Different quality) file in html5 through Jquery

Moto: Change being played video, when user click a button, through Jquery. sample website: http://sublimevideo.net (on click "hd" button in the player control)

In detail:

On page load, browser will play first video given in source (url: "The-Dark.mp4"). What I want is, when user click HD button (control), the browser should play the next (url: "The-Dark-hd.mp4")

Its my HTML code:

        <source src="asserts/The-Dark.mp4" type="video/mp4;" data-quality="sd"></source>            
        <source src="asserts/The-Dark-hd.mp4" type="video/mp4;" codecs="&quot;avc1.42E01E, mp4a.40.2&quot;" data-quality="hd"></source>

        <source src="asserts/The-Dark.ogg" type="video/ogg;" codecs="&quot;theora, vorbis&quot;"></source>

        <source src="asserts/The-Dark-hd.ogg" type="video/ogg;" codecs="&quot;theora, vorbis&quot;"></source>
</video>

Please let me know the Jquery which I need to follow

Upvotes: 3

Views: 8232

Answers (1)

adeneo
adeneo

Reputation: 318232

$('source', 'video')​​.eq(1).prependTo('video');
$('video')[0].load();
$('video')[0].play();

FIDDLE

Upvotes: 9

Related Questions