set sources inside video tag

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

View file

@ -9,6 +9,7 @@
<style>
body {
font-family: Arial, sans-serif;
background: #777;
}
.info {
background-color: #eee;
@ -25,13 +26,23 @@
<body>
<div class="info">
<p>
You can see the Video.js Test plugin in action below.
Look at the source of this page to see how to use it with your videos.
Set sources dynamically
</p>
</div>
<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="lib/videojs-resolution-switcher.js"></script>
<script>
@ -39,11 +50,11 @@
videojs('video', {
controls: true,
muted: true,
fluid: true
width: 1000
}, function(){
var player = this;
player.newVideoSources([
player.updateSrc([
{
src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm',
type: 'video/webm',
@ -62,5 +73,10 @@
}).videoJsResolutionSwitcher();
</script>
<script>
videojs('video_1').videoJsResolutionSwitcher()
</script>
</body>
</html>

View file

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