yetangitu/videojs-resolution-switcher
1
0
Fork 0
mirror of https://github.com/kmoskwiak/videojs-resolution-switcher.git synced 2025-10-04 02:09:41 +02:00
Code Issues Releases Wiki Activity

set sources inside video tag

Browse source
This commit is contained in:
Kasper Moskwiak 2015-07-28 14:24:07 +02:00
parent e45af2a522
commit 23405ab6c4
2 changed files with 25 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

24
example.html
View file

@ -9,6 +9,7 @@
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background: #777;
} }
.info { .info {
background-color: #eee; background-color: #eee;
@ -25,13 +26,23 @@
<body> <body>
<div class="info"> <div class="info">
<p> <p>
You can see the Video.js Test plugin in action below. Set sources dynamically
Look at the source of this page to see how to use it with your videos.
</p> </p>
</div> </div>
<video id='video' class="video-js vjs-default-skin"></video> <video id='video' class="video-js vjs-default-skin"></video>
<div class="info">
<p>
Set sources inside <code>&ltvideo&gt</code> tag
</p>
</div>
<video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
<source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' />
<source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD'/>
</video>
<script src="node_modules/video.js/dist/video.js"></script> <script src="node_modules/video.js/dist/video.js"></script>
<script src="lib/videojs-resolution-switcher.js"></script> <script src="lib/videojs-resolution-switcher.js"></script>
<script> <script>
@ -39,11 +50,11 @@
videojs('video', { videojs('video', {
controls: true, controls: true,
muted: true, muted: true,
fluid: true width: 1000
}, function(){ }, function(){
var player = this; var player = this;
player.newVideoSources([ player.updateSrc([
{ {
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm', src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
type: 'video/webm', type: 'video/webm',
@ -62,5 +73,10 @@
}).videoJsResolutionSwitcher(); }).videoJsResolutionSwitcher();
</script> </script>
<script>
videojs('video_1').videoJsResolutionSwitcher()
</script>
</body> </body>
</html> </html>

6
lib/videojs-resolution-switcher.js
View file

@ -82,7 +82,7 @@
}) })
player.newVideoSources = function(src){ player.updateSrc = function(src){
// Dispose old resolution menu button before adding new sources // Dispose old resolution menu button before adding new sources
if(player.controlBar.resolutionSwitcher){ if(player.controlBar.resolutionSwitcher){
@ -96,6 +96,10 @@
player.src(src); player.src(src);
} }
// Create resolution switcher for videos form <source> tag inside <video>
if(player.options_.sources.length > 1){
player.updateSrc(player.options_.sources)
}
}; };