Skip to content

pepebe/video-js-resolutions

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Video JS Resolutions Plugin

Provides resolution switching capabilities for the VideoJS player.

To Use:

Here's how to specify multiple streams:

<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'>
  <source src="http://video-js.zencoder.com/oceans-clip_hd.mp4" type='video/mp4' data-res="HD">
  <source src="http://video-js.zencoder.com/oceans-clip_sd.mp4" type='video/mp4' data-res="SD" data-default="true">
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
  <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
  <p>Video Playback Not Supported</p>
</video>

Or if you're passing in the sources programatically:

myPlayer.src([
  { type: "video/mp4", src: "http://www.example.com/path/to/hd_video.mp4", data-res: "HD" },
  { type: "video/mp4", src: "http://www.example.com/path/to/sd_video.mp4", data-res: "SD", data-default: true },
  { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
  { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);

Browser Support

Target browsers for this implementation are Chrome, Safari, IE10, Firefox, Android, and iOS.

Caveats

A limitation of the implementation is that only homogeneous video types are resolution switchable. So you can't specify a webm SD and an mp4 HD and expect the player to pick it up.

I also recommend you include this plugin either on player instantiation or immediately thereafter. I'm not sure about the reliability of adding the plugin to an instance long after the instance has been active.

About

Resolution Switching Plugin for VideoJS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 87.0%
  • CSS 13.0%