Skip to content

Latest commit

 

History

History
90 lines (66 loc) · 4.6 KB

video-js-4-2-0-released-rtmp-css-designer-and-stability.mdx

File metadata and controls

90 lines (66 loc) · 4.6 KB
Raw
title tags author alias date
Video.js 4.2.0 released! RTMP, CSS designer, and stability
version
name github
Steve Heffernan
heff
post/60471080014/videojs-420-released-rtmp-css-designer-and/index.html
post/60471080014/index.html
2013-09-06 08:51:00 -0700

Happy September! The 4.2.0 release of Video.js has a few interesting updates, and a bunch of stability and polish.

RTMP Support

First of all, thanks to an impressive collaboration of community members, we now have RTMP support (in beta). Check out the example.

It’s still pretty basic support for RTMP, but we think it will cover a lot of the general use cases. The feature support includes:

  • Single stream (no client-side adaptive support)
  • Flash only, HTML5 video doesn’t support RTMP (but HLS is supported on iOS devices)
  • On-demand only. We haven’t updated the UI to support live yet.

To load an RTMP stream in a Video.js player, you’ll use a source tag in the same way you would other source types:

<source
  src="rtmp://your.streaming.provider.net/cfx/st/&amp;mp4:path/to/video.mp4"
  type="rtmp/mp4"
/>

The connection and stream parts are determined by splitting the URL on the first ampersand (&) or the last slash (/).

[http://myurl.com/streaming&amp;/is/fun](http://myurl.com/streaming&amp;/is/fun) --&gt;
  connection: [http://myurl.com/streaming](http://myurl.com/streaming)
  stream: /is/fun

-or-

[http://myurl.com/streaming/is/fun](http://myurl.com/streaming/is/fun) --&gt;
  connection: [http://myurl.com/streaming/is](http://myurl.com/streaming/is)
  stream: fun

The available source types include rtmp/mp4 or rtmp/flv.

RTMP has been a much requested feature over the years and it’s great to finally have it in the player. Thanks to everyone involved in that work.

Player Skin Designer

If you missed the previous blog post, be sure to check out the new interface for designing the player skin. It really shows off the customizability of the video.js controls, which are built completely in HTML and CSS.

With the 4.2 release the styles in the designer have been brought up-to-date with the latest player styles.

Control Bar Updates

Also in a previous post, I described a number of updates that were made to the control bar to fix cross browser/device issues and improve the overall functionality. As of 4.2.0 all of those updates have made it into the stable release.

Other Updates

Along with previous updates there’s been a number of patches and enhancements along the way. Here’s a full list:

  • Added LESS as a CSS preprocessor for the default skin (view)
  • Exported MenuButtons for use in the API (view)
  • Fixed ability to remove listeners added with one() (view)
  • Updated buffered() to account for multiple loaded ranges (view)
  • Exported createItems() for custom menus (view)
  • Preventing media events from bubbling up the DOM (view)
  • Major reworking of the control bar and many issues fixed (view)
  • Fixed an issue with minifiying the code on Windows systems (view)
  • Added support for RTMP streaming through Flash (view)
  • Made tech.features available to external techs (view)
  • Minor code improvements (view)
  • Updated time formatting to support NaN and Infinity (view)
  • Fixed an undefined error in cases where no tech is loaded (view)
  • Exported addClass and removeClass for player components (view)
  • Made the fallback message customizable (view)
  • Fixed an issue with the loading spinner placement and rotation (view)
  • Fixed an issue with fonts being flaky in IE8

The latest version can be found on videojs.com through the download link or the CDN hosted version.

Cheers,

-heff