Matthew McClure2014-10-02

Video.js 4.9 - Now <audio> can join the party!

HTML5 Audio support

A common request we’ve seen is to be able to use Video.js with an <audio> tag, and now you can! Usage is almost identical, you can just include a data-setup={} attribute on an <audio> tag or initialize via Javascript.

<audio
  id="audio_example"
  class="video-js vjs-default-skin"
  controls
  preload="auto"
  width="600"
  height="600"
  poster="/img/awesome-album-art.png"
  data-setup="{}"
>
  <source src="/audio/awesome-music.mp3" type="audio/mp3" />
</audio>

The only differences in behavior are that the poster image and controls are never hidden. This allows you to keep up something like album art during playback rather than a black video element. Since there’s no interesting content to hide (other than the poster image), we leave the controls showing to mimic a familiar audio player experience.

Audio Screenshot

Note: The Flash fallback still doesn’t support audio-only sources, but we’d like to add that in the future. In the meantime, audio playback with MP3 and Ogg sources should work fine in any (modern) browser that’s not IE8, so enjoy!

More translations!

We’ve been really excited by the continued support in terms of new translations. This release contains Brazilian Portuguese, Japanese, Italian, French, and Korean, as well as some improvements to the previous Spanish translation. We’d love to see the trend continue, so if you’re fluent in a language please consider submitting improvements or whole new localizations!

Video.js in the wild

Coursera is an education platform that offers free courses online from some of the world’s top institutions. They’ve built great tools for video interaction on top of Video.js, and are even going to talk about some of the work they’re doing at October’s SF Video Meetup.

Coursera Screenshot

New Plugins

videojs-wavesurfer - Adds a navigable waveform for audio files, using the excellent wavesurfer.js library.

Full list of changes

@deedos added a Brazilian Portuguese translation (view)
@baloneysandwiches added a hasClass method (view)
@mynameisstephen fixed an issue where slider event listeners were not being cleaned up (view)
@alexrqs cleaned up the Spanish translation (view)
@t2y added a Japanese translation (view)
@chikathreesix fixed an issue where data-setup options could be missed (view)
@seniorflexdeveloper added new translations and translation updates (view)
@chikathreesix exported the videojs.Flash.embed method (view)
@doublex fixed an issue with IE7 backwards compatibility (view)
@mmcc made it possible to override the font-size of captions and subtitles (view)
@philipgiuliani added an Italian translation (view)
@twentyrogersc fixed the return value when setting the poster source (view)
@heff updated to swf v4.5.0 to fix event issues (view)
@rpless made the VolumeMenuButton volume more accesible via tab navigation (view)
@mmcc added support for audio tags (html5 audio only) (view)

Videojs.com