Ranking: Best Free HTML5 & JS Video Players For Websites

Upvote your favorite resources to improve the accuracy of the ranking

1) Sublime Video – A HTML 5 Video Player

Sublime Video is a HTML5 Video Player, users can play videos without the need of browser plugins or Flash dependencies. It supports Full-window mode with sleek zoom-in/out transitions. There are more advanced controls on a draggable pane. Sublime Video will be soon released for free (at least for non-commercial use).

Requirements: Safari 4.0.4+, Google Chrome 4.0+, IE with Chrome Frame
Demo: http://jilion.com/sublime/video
License: License Free

2) VideoJS – HTML5 Video Player with Pure CSS Skins

VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css). Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without javascript).

The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors.

Requirements: HTML5
Demo: http://videojs.com/
License: LGPL License

3) Subtitle & Caption Your Videos Easily with Viewers

The lack of captions and subtitles on video is a major obstacle for people with hearing disabilities and a huge language barrier for the whole world. Universal Subtitles want to give individuals and communities the power to overcome these barriers. The tools they are building are free and open source and will make the work of subtitling and translating video simpler, more appealing, and, most of all, more collaborative.

Universal Subtitles make it easy for anyone to add subtitles, captions, or translate nearly any video on the web. You add their widget to your videos. Then you and your viewers can add subtitles, which anyone can watch.

Requirements: -
Demo: http://universalsubtitles.org/
License: AGPL License

4) FlowPlayer Open Source Flash Video Player for Web

FlowPlayer is a Flash media player. You can use it on your HTML pages to play video files. “It is your personal YouTube”. It is highly customizable which upports all the features you’ll possibly need and these features can be configured the way you like. Look and feel is important to us. FlowPlayer’s skin is flexible and will smoothly melt into your site. Progressive downloading, solid streming, long play features, playlists, fullscreen mode and etc… Everything you’ll need to provide rich user experience. Flowplayer is licenced under the GPL license so it’s free too.

Requirements: Flash 9
Demo: http://flowplayer.org/
License: GPL License

5) Fluid Width Videos Embeds for Responsive Web Design

FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Have a custom video player? They have a customSelector option where you can add your own specific video vendor selector too. FitVids.js is released under the WTFPL license.

Requirements: jQuery Framework
Demo: http://fitvidsjs.com/
License: WTFPL License

6) HTML5 Video Voting & Populate Bar Graph in Timeline

HTML5 Video Voting allows you to gather feedback on your videos. Voting is exquisitely simple. All you do is click on the video and use the spacebar to submit your vote, it will automatically populate the bar graph.

When you vote, it is added to that section of the videos timeline. This allows a viewer to quickly assess the most intriguing segments of the video and quickly jump to those sections by clicking on the bar graph. The player is tested in FireFox 4+, Chrome 10+, and Safari 4+ but may very well work in others.

Requirements: jQuery Framework
Demo: http://www.zurb.com/playground/html5-video-voting
License: MPL License

7) An Event System for HTML5 Media Developers

Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.

Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions. Popcorn has dozens of plugins for common services and APIs, ranging from Twitter, to Maps, to media events, and more. But if it doesn’t do what you need right now, you can write your own plugins quickly and easily.

Requirements: -
Demo: http://mozillapopcorn.org/popcornjs/
License: MIT License

8) ToobPlayer – Lightweight FLV YouTube Video Player

ToobPlayer is a lightweight FLV player component that comes in five flavors, provides a mechanism to play back YouTube videos, and can also display preview images. Nowadays, YouTube is more popular than you can imagine. A lot of people upload their videos on YouTube. It would be very useful when you would like to embed some Youtube videos on your site.

ToobPlayer is resizable with full-screen mode. It allows several video resize modes. It gives you loading status feedback. It supports mouse-wheel (Seeking/Volumn Control). And you can customize ToobPlayer easily as well.

Requirements: Adobe Extension Manager
Demo: http://emehmedovic.com/xmca/toobplayer/
License: MIT License

9) Set YouTube Video as Background with Tubular jQuery Plugin

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Usage is straightforward and requires JavaScript and the Flash player to be installed and functional on the client’s browser. tubular is dependent on jQuery and swfobject.

Just attach it to your body tag, specify a YouTube video ID and tell it the ID of your content wrapper, and you’re on your way. Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

Requirements: jQuery and Flash
Demo: http://code.google.com/p/jquery-tubular/
License: MIT License

10) Open Source Media Player in jQuery & HTML5

The mediafront platform is an open source (GPLv3) front end media solution for the web. Through its integration with popular content management systems, it employs an innovative and intuitive interface that allows any website administrator to completely customize the front end media experience for their users without writing any code.

In addition to this amazing module included is the OSM (Open Standard Media Player) Player. This media player is open source (GPL) media player that is built to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

Requirements: jQuery Framework
Demo: http://www.mediafront.org/project/osmplayer
License: MIT License

11) How to Build a Custom HTML5 Video Player with jQuery

As professional web designers, we want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari. If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. This is not as hard as it seems.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

Article: Building a custom HTML5 video player with CSS3 and jQuery taught us how to build an easily customizable HTML5 <video> player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation.

Source: Building a custom HTML5 video player with CSS3 and jQuery

12) The jQuery HTML5 Audio / Video Library

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

It is easy to get started and deploy in minutes. It’s totally customizable and skinnable using HTML and CSS. It has been tested on Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9.