Danilo Kaltner edited this page Dec 13, 2016 · 162 revisions

Creating a plugin

View the plugin docs. If you'd like a head-start on the scaffolding for a new video.js plugin, check out the Yeoman video.js plugin generator.

Adding to this page

When you add a plugin to this page, have a look at how others have done so, it should be a single item, with a link to the project's source code or home page, and a short description (one line after formatting has been applied).

If you see a plugin without a description, feel free to edit the page and add it in, any contributions are appreciated.


Contrib Plugins

Larger projects covering common but optional extensions of the player. (See the django definition)

  • videojs-contrib-hls: Add HTTP Live Streaming (HLS) support in desktop browsers (via Flash)
  • videojs-contrib-ads: Provides common functionality needed by video advertisement libraries working with video.js

Community Plugins

  • videojs-airplay: Adds an airplay button if the browser supports the WebKitPlaybackTargetAvailabilityEvent
  • videojs-DEL: A plugin that is for Doing Ending Leaving (Yes, thats what it stands for!)!
  • videojs-Background: A plugin that allows for videos to be displayed as a full background to any element.
  • videojs-endcapCTA: A plugin for custom CTA (Call To Action) to be displayed at end of video. Super simple displaying of your HTML - E.g. a contact form, a buy now button or a link to product/store.
  • videojs-HDtoggle: HD button which toggles between HD and non-HD source.
  • videojs-hotkeys: A plugin for Video.js that enables keyboard hotkeys when the player has focus.
  • videojs-ima: Easily integrate the Google IMA SDK into Video.js to enable advertising on your video content.
  • videojs-brightcoveAnalytics: Allow tracking of views/impressions & engagement data in videojs for Brightcove videos
  • videojs-markers: Add customizable markers upon progress bars
  • videojs-ad-markers: Provide basic functionality to implement an advertising system with markers on the timeline
  • videojs-caption: Have the most flexibility and power for displaying caption videojs
  • videojs-errors: displays user-friendly error messages.
  • videojs-youtube-videowall: Display video wall of related youtube videos after the video finishes. Require videojs-youtube.
  • videojs-thumbnails: displays thumbnail images over the progress bar.
  • videojs-endcard: Simple, customizable end card solution for VideoJS.
  • videojs-vast: A VideoJS plugin to play pre-roll videos from a VAST feed.
  • videojs-vpaid: A VideoJS plugin to play pre-roll videos from a VPAID feed; supports numerous VPAID event firings as well as ad timeout.
  • videojs-rtc: displays a WebRTC chat window alongside the player to be able to chat with a friend while watching a video.
  • videojs-leapmotion: a plugin to control video playback with Leap Motion.
  • videojs-playlist: easily create a playlist of videos. Gives some methods to videojs and provides useful events to allow customization.
  • videojs-playlist-thumbs: plays videos (youtube or local) in a loop and show a sidebar with the videos list with thumbnail and title.
  • videojs-playlist (<video> or <audio>): designed for video or audio playlists. Plays tracks continuously or by selecting them.
  • videojs-persistvolume: remembers the volume last set by the user and applies it to new instances of player.
  • videojs-rotatezoom: a plugin to easily rotate or zoom in a video.
  • videojs-watermark: Display a watermark/overlay on top of the video.
  • videojs-cuepoints: Sync actions with the media timeline.
  • videojs-resolutions: Provides a button that dynamically switches the video stream between sources.
  • videojs-rangeslider: Create a range slider to select a region of a video in video-js.
  • videojs-ga: Google Analytics plugin for video.js
  • videojs-relatedCarousel: Button that when clicked shows a list of images that link to urls. Envisioned as a way to show related content inside the player.
  • videojs-ageGate: Forces a user to enter a satisfactory birth date before video will play.
  • videojs-progressTips: Tooltip on hover of the progressbar with the time.
  • videojs-logobrand: Add a logo/brand image to the player that appears/disappears with the controls. (also useful as a basic plugin template for learning how Video.JS plugins work.
  • videojs-brand: Simple plugin that adds your logo brand in the player controls.
  • videojs-imageOverlay: Add an opaque, clickable overlay on a video during a specified time range.
  • videojs-chromecast: Display a chromecast Button on Control Bar video.js players.
  • video.js-chromecast: Display a chromecast Button on Control Bar video.js 5. players.
  • videojs-disable-progress: Disable / Enable progress scrubbing. Useful for preroll advertisements where skipping the video isn't an option.
  • videojs-sharing: Add a menu to the control bar to share the video/page using the addThis API (no account required)
  • videojs-stereopanner: Adds stereo channel panning functions
  • videojs-akamai-analytics: Akamai Sola Analytics plugin for video.js
  • videojs-comscore: Reports to comScore using their latest Streaming Tag SDK
  • videojs-vr: Project video onto different geometric shapes (Sphere, Cube, Cylinder) and view in 3d with optional Oculus Rift support
  • video-speed: Adds customizable video-speed control. Deprecated. There is now native support for playback rates and this plugin only works with v4.8.5 because of usage of mangled properties.
  • OpenVideoAnnotation - plugin to create annotations in video-js using annotator. Project in:
  • videojs-overlay: display simple HTML overlays during video playback.
  • videojs-seek: Seeks to a specific time point specified by a query string parameter.
  • videojs-preroll: Simple preroll plugin that displays an advertisement before the main video
  • videojs-framebyframe: Adds buttons for stepping through a video frame by frame
  • videojs-ABdm: Use CommentCoreLibrary to show comments (whic is called as DanMu) during playing.
  • videojs-ass: Adds Advanced SubStation Alpha subtitles support.
  • videojs-transcript: Display an interactive transcript from caption or subtitle tracks.
  • videojs-autoplay-toggle: adds an autoplay toggle which will persist to cookies or localstorage.
  • videojs-offset: Allows you to play a segment of the video.
  • videojs-youtube-progress: Preserve progress seeker when control bar is hidden.
  • projectorjs: A small no-dependencies JavaScript library that enables the display of overlays on native HTML5 video elements, or (optionally) video elements powered by videojs.
  • videojs-record: A video.js plugin for recording audio/video/image files.
  • videojs-clarify-annotations: A video.js plugin for displaying annotations in the scrubber timeline based on search results from the Clarify API.
  • videojs-timer:A video.js plugin for interval based video consumptions.
  • videojs-vast-vpaid: A video.js plugin to play VAST and VPAID pre-roll ads. Regarding VPAID we already support Flash ads and are working to support HTML5 ads.
  • videojs-timecode: Shows current time and duration in a broadcast-style format: hh:mm:ss:ff. Configurable for PAL/PALp/NTSC.
  • videojs-resolution-switcher: A video.js plugin which allows to choose video resolution (works only with video.js v5)
  • videojs-countdown: Autoplay countdown timer that starts when the player is scrolled into view.
  • videojs-resume: Resume playback of a video from the point in time it was left.
  • videojs-audio-tracks: Use the Audio Tracks API to play multiple audio tracks from a single video.
  • videojs-responsive-layout: Adapt the layout of the control bar depending on the width of the player, using the Video.js 5 responsive classes.
  • videojs-suggestedVideoEndcap: Creates an endcap screen with a grid of suggested video links to watch.
  • videojs-socialShare: Creates a Twitter and/or Facebook social share button on hover over the video player.
  • videojs-afk-monitor: Prompts user to continue watching after certain period of inactivity.
  • videojs-sc: Adobe Analytics (SiteCatalyst)
  • videojs-abloop: Allows looping of a section of a video
  • videojs-stopButton: A video.js plugin that displays a stop button in the control bar.

Playback Techs (support media from different sources)

  • video-js-swf: Allows you to decode HLS videos with Flash within VideoJS.
  • videojs-youtube: Allows you to play YouTube videos within VideoJS.
  • videojs-vimeo: Allows you to play Vimeo videos within VideoJS.
  • videojs-dailymotion: Allows you to play Dailymotion videos within VideoJS.
  • videojs-soundcloud: Allows you to play soundcloud tracks within VideoJS.
  • videojs-externals: All External Embeds Player Playback Technology
  • videojs-wavesurfer: Adds a interactive waveform for audio and video files.
  • videojs-dashjs: Loads dash.js as a tech to support MPEG-DASH videos.
  • videojs-peer5: Adds P2P delivery layer to the HLS plugin (based on Peer5's WebRTC technology)
  • videojs-silverlight: Allows you to play WMV, WMA, MP4, MP3, WAV and FLAC medias through Silverlight within Video.js.
  • videojs-vlc: Allows you to play all media through VLC web plug-in within Video.js.
  • videojs-aurora: Allows you to play WAV, OGG, MP3, M4A, AAC and FLAC medias through Aurora.js within Video.js.
  • videojs-java: Allows you to play AIFF, AVI, GSM, MID, MPG, MP2, MOV, AU and WAV medias through Java within Video.js.
  • videojs-flashls: Allows you to play HLS files (m3u8) via the flashls project.
  • videojs-ooyala: Video.js plugin to fetch videos from Ooyala.
  • videojs-wistia: Allows you to play Wistia videos within VideoJS.
  • videojs-ogvjs: Allows you to play Ogg Vorbis/Theora HTML5 videos using ogv.js Javascript decoding; for browsers like Safari and IE that do not yet support patent-free formats natively.
  • videojs-panorama Allows you to play a full 360 degree video within VideoJS.
  • videojs-replay Turns the play/pause toggle into a replay button after playback has ended.
  • videojs-watermark Display a configurable watermark in the video player.
  • videojs-ad-scheduler VMAP based advertisement scheduler for video.js.
  • videojs-hlsjs-p2p Video.js 5.0+ HLS(hls.js) source handler with P2P assisted playback.
  • videojs-dashjs-p2p Video.js 5.0+ MPEG-DASH(dash.js) source handler(based on videojs-contrib-dash) with P2P assisted playback.

For Other Platforms and Frameworks