We’ll help you choosing the best HTML5 based video player for your next project. See the comparison chart online: praegnanz.de/html5video
Dear video player maker! You can help us keeping this comparison up to date. Just clone this repository, add your player with all necessary folders and files and send a pull request. After some automated tests, we’ll double-check your contribution manually and then update the website.
- Clone the repository
- Create a fresh project folder with a web-friendly name in the root directory (no spaces, lowercase, no special chars)
- Two files are needed in the project folder:
index.html(contains only the core HTML code for your player – no header, footer, CSS or JS files)playerinfo.json(contains all meta data for your player – see documentation below)
- Additionally, put all files and subfolders into your project folder that are needed for displaying your player.
- Send a pull request to us!
Contains only the core HTML code for your player. Might contain the video-Element, but some players only use a wrapper-DIV and do the rest via JS. Here’s a typical example:
<div class="ponyplayer_wrapper">
<video id="my_player" poster="{{player.poster}}" controls="controls" preload="none">
<source type="video/mp4" src="{{player.video.mp4}}" />
<source type="video/webm" src="{{player.video.webm}}" />
<track kind="subtitles" src="{{player.subtitles.srt}}" srclang="en" />
</video>
</div>
<script>
$(function(){
$('.ponyplayer_wrapper > video').ponyplayerinit({ awesome: true });
});
</script>You have to use placeholders for all content files. Don’t use your own video!
{{player.poster}}– URL to video poster (JPG, PNG or other){{player.video.mp4}}– URL to video (MP4){{player.video.ogv}}– URL to video (OGG Video){{player.video.webm}}– URL to video (WebM){{player.video.hls}}– URL to video stream (HLS){{player.video.dash}}– URL to video stream (Dash){{player.chapters_en.srt}}– URL to chapters file (english, .srt format){{player.chapters_de.srt}}– URL to chapters file (german, .srt format){{player.chapters_en.sbv}}– URL to chapters file (english, .sbv format){{player.chapters_de.sbv}}– URL to chapters file (german, .sbv format){{player.chapters_en.sub}}– URL to chapters file (english, .sub format){{player.chapters_de.sub}}– URL to chapters file (german, .sub format){{player.chapters_en.vtt}}– URL to chapters file (english, .vtt format){{player.chapters_de.vtt}}– URL to chapters file (german, .vtt format){{player.subtitles_en.srt}}– URL to subtitles file (english, .srt format){{player.subtitles_de.srt}}– URL to subtitles file (german, .srt format){{player.subtitles_en.sbv}}– URL to subtitles file (english, .sbv format){{player.subtitles_de.sbv}}– URL to subtitles file (german, .sbv format){{player.subtitles_en.sub}}– URL to subtitles file (english, .sub format){{player.subtitles_de.sub}}– URL to subtitles file (german, .sub format){{player.subtitles_en.vtt}}– URL to subtitles file (english, .vtt format){{player.subtitles_de.vtt}}– URL to subtitles file (german, .vtt format)
Please note: All external URLs are required to start with either http:// or https://. Also, we’ll do a HEAD request to check whether your site returns the required 200 OK status. We only do this to detect offline or moved sites.
Your player’s name, has to be 64 characters long or less.
Player version you used in your example files. Has to be 32 characters long or less.
Website URL (marketing website)
Player description, max. 1024 characters.
true, if one-time fee required to use player.
true, if paid subscription is required to use player.
true, if there’s also a free version available. Only required if pricing.once == true or pricing.subscription == true.
Your player’s license. You can use one of the licenses below or a URL to enter custom licenses. Create a github issue to add other liceses which are not written by yourself.
- apache
- bsd2
- bsd3
- cddl
- epl
- gnugpl
- lgpl
- mit
- mpl
Library / libraries your player needs to run. If your player doesn’t require any libraries, place an empty array: [] Create an issue to add other libraries. Available libraries are below.
- jquery
- mootools
- react
One of the following values:
- true: it’s not allowed/possible to host the player by yourself, you have to use the CDN provided
- "possible": it’s allowed to host the player by yourself or use the CDN provided
- false: there’s no offical CDN, you have to host the player by yourself
URL for your source code repository (example: https://github.com/praegnanz.de/awesome-player).
Set this to true, to mark player as deprecated.
Name of your example HTML, defaults to index.html.
We’ll add a <link> element in our <head> for every local CSS file (or URL*) you defined here.
We’ll add a <script> element in our <head> for every local JS file (or URL*) you defined here.
We’ll add a <script> element before </body> for every local JS file (or URL*) you defined here.
- external URLs start either with
http://orhttps://. Do not start with//!
True, if your player provides a flash version.
True, if your player provides an API.
True, if your player provides an API, wich works for both <video> and the flash fallback.
True, if your player’s flash fallback and the native video player looks the same.
True, if your player has native fullscreen support.
True, if your player is accessable via keyboard.
True, if your player has subtitles support.
True, if your player has chapter support.
True, if your player supports playlists.
True, if your player is responsive.
True, if your player provides an “embed this video” functionality.
Content Management Systems, your player provides plugins for. Available CMS are below. Create an issue to add an additional CMS.
- contao
- drupal
- joomla
- kirby
- processwire
- typo3
- wordpress
Services / Platforms, your player has special support for. Available services are below. Create an issue to add an additional service.
- dailymotion
- vimeo
- youtube
True, if player is skinnable in a easy way or themes are provided.
True, if player has an audio only mode to display audio in a beautiful way.
True, if player has the option to change playback speed (1×, 2×, …).
True, if player has the option to change video quality (480p, 720p, …).
True, if player has WAI-ARIA attributes.
True, if player supports HTTP Live Streaming.
True, if player supports Dynamic Adaptive Streaming over HTTP.
{
"name": "Little Pony Player",
"version": "1.2.66beta",
"url": "http://www.littleponyplayer.com/",
"description": "The bestest player in town, because it makes everything colorful!",
"repository": "https://github.com/ponymasters2000/littleponyplayer",
"license": "gnugpl",
"pricing": {
"once": true,
"subscription": false,
"freeAvailable": true
},
"library": "jquery",
"hosted": false,
"example": {
"css": ["css/ponybase.css", "css/ponytheme_a.css"],
"jsHead": ["libs/jquery-1.9.1.min.js", "pony-script.min.js"]
},
"flags": {
"flash": true,
"services": "youtube",
"unifiedLook": true,
"api": true,
"unifiedAPI": true,
"responsive": false,
"skinnable": true,
"embeddable": false,
"audioOnly": true,
"cms": ["wordpress", "joomla"],
"fullscreen": true,
"keyboard": false,
"aria": false,
"subtitles": true,
"chapters": false,
"playlists": true,
"speedControl": false,
"qualityControl": true,
"hls": false,
"dash": false
}
}