In this post we’ve collected the best HTML5 based video player which you can use in your project.

Flow Player

The HTML5 video player for the web. The only completely responsive HTML5 player on the market.

html5media

Enables <video> and <audio> tags in all major browsers. The html5media project is open source and can be found on GitHub.

jPlayer

jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQuery plugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages.

VIDEO.JS

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player.

CodoPlayer

A first-rate HTML5 / FLASH and YOUTUBE web player. Codo Player solves the problem of various browser/platform video support mismatches in order to reach maximum possible audience.

Open Standard Media (OSM) Player

With the onset of HTML5, there is a dramatic paradigm shift in the wake for online media content delivery. For well over 6 years, this industry has been dominated by the proprietary Adobe Flash Player, which has been used to deliver high quality media to audiences far and wide. This reign is coming to a dramatic end as new Open Standard technology takes its place. Yes, HTML5 is here, and we present to you the Open Standard Media (OSM) Player!

FlareVideo HTML5

• HTML5 video with Flash fallback
• Easy CSS/HTML/JS customization and theming
• Full screen support

JW Player

What about skinable open source JW Player, this solution is all about Flash and HTML5 working together as part of a single video player. The player automatically falls back to the Flash or HTML5 mode when needed. This solution supports the major CDNs, YouTube, Adobe’s Flash Media Server, HTTP streaming, major advertising networks, analytics providers, and more. JW Player as well has a range of add-ons to extend the players functionality. By choosing the JW Embedder, it will also provide hosting solutions and mobile support for iPhone, iPad, and devices.

OIPlayer jQuery plugin HTML5 Video Player

OIPlayer attaches itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc. It support Safari (v4.0+), Google Chrome (v5.0+), Firefox (v3.5+), Internet Explorer (v6.0+) with Flash or Java installed And maybe some untested others with HTML5 support, Flash or Java installed.

MediaElement.js

MediaElement.js is a complete HTML5 audio and video player in pure HTML and CSS. Based on Video for Everybody it uses a custom Flash or Silverlight player that mimics the native HTML5 API for older browsers. MediaElement.js builds a fully skinnable player with features like support for the HTML5 track element, fullscreen video, and even ambilight. Additionally, it includes support for sub-titling and has plugins for WordPress, Drupal, jQuery, and BlogEngine.NET. With MediaElement.js, video controls are doing using HTML /CSS for cross-browser consistency.

HTML5 Video Org

HTML5 is a set of web standards being developed by the Web Hypertext Application Technology Working GroupThe HTML5 standard includes many new features for more dynamic web applications and interfaces. One such component being specified and implemented is the ‘video’ element.Using an HTML5 Javascript Library, your videos can be played back on the latest mobile devices and even on older browsers that require Flash.

Fry Player HTML5 Video

FryPlayer is one of open source and easy to use HTML5 video player. It has a play and pause button, also possible to set volume sound. Ability to skin, buffering, and full screen mode.

Projekktor HTML5 Video Player

Projekktor (pr-jkk-tr) is a free, open source (GPL) HTML5 based video player written in Javascript. It solves cross browser and compatibility issues, adds eye candy and provides extremely powerful non standard features.

OVP for HTML5

Open Video Player (OVP) is an initiative encompassing the use of open standards, best practices, and established development methodologies in the development of media player applications.

Custom video player with jQuery HTML5 CSS3

Building our own custom video player with HTML5 video, JavaScript and CSS3 is fairly easy. By using JavaScript only for the actual functionality of the controls, and CSS3 for everything that involves the look and feel of the player, we get a powerful, easily customizable solution.

LeanBack Player

LeanBack Player is a HTML5 Video Player with multiple supports widely used desktop browsers and mobile devices

UUhistle.org: A program visualization tool

UUhistle.org is a program visualization tool for beginner programming education. Use UUhistle.org to improve your code-tracing skills, as well as your understanding of programming concepts and programming-language constructs.

Object Playground: Visualize and experiment with JavaScript objects

Object Playground

Object Playground is a tool for visualizing and experimenting with JavaScript object relationships. It's online at objectplayground.com. Object Playground is a project from Let's Code: Test-Driven JavaScript, a screencast series focused on professional, rigorous JavaScript development. Created by James Shore.

This repository contains the source code for Object Playground.

Browser Support

Object Playground has been tested against the browsers listed at the top of Jakefile.js. At the time of this writing, the following browsers are known to work. Other modern browsers are likely to work as well.

• Chrome 26
• Firefox 20
• IE 10
• Safari 6.0 (Mac)
• Safari 6.0 (iOS)

The following browsers are known to not work:

• IE 9: Lacks the Int32Array type used by Viz.js. A polyfill was attempted, but resulted in an "out of memory" error.
• IE 8: Does not support SVG, lacks Int32Array type.

Responsive tables to list jQuery plugin

https://github.com/micc83/ReStable

jQuery ReStable

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.You can find some examples in the included demo or here.

NudgePad: Faster prototyping in your browser

NudgePad is an in-browser development environment that makes prototyping much faster. It includes tools for collaborating and working with a team, and it’s expandable.

NudgePad

NudgePad is an IDE that runs in your browser. NudgePad allows you to make websites and apps faster than ever before. NudgePad is collaborative and open source.

Building apps and websites requires many types of tools and many types of talent. NudgePad provides you with an expandable suite of tools to quickly get your work done. NudgePad is a multiuser IDE and teams can collaborate in real time.

Try it

Try it now at http://www.nudgepad.com

http://feeds.dzone.com/~r/dzone/frontpage/~3/RxeQpCjTqSs/15_useful_jquery_grid_plugins_for_developers.html

15 Best jQuery Grid Plugins for Developers

1. Freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layout, images layout, nested grid, fluid grid, metro style layout, pinterest like layout with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
It is based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scanning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).

Source

2. S Gallery

S Gallery is a jQuery image gallery plugin that displays images in a responsive grid. It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard. Returning back to the grid view is possible with a click and, also, a fullscreen option exists (uses HTML5 Fullscreen API).

Source

3. Mason.js

There are various JavaScript-powered solutions for creating dynamic-column grid layouts (like Pinterest). Although most of them are great, sometimes, the grids contain gaps or ragged edges. Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly. One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid. It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

Source

4. jQuery.Shapeshift

There are various jQuery plugins for creating Pinterest-like dynamic grid layouts. jQuery.Shapeshift is a strong alternative to them with an an extra touch :the items can be drag ‘n’ dropped (uses jQuery UI). The drag ‘n’ drop doesn’t affect the grid negatively as the grid auto-fills the gaps when needed. It also works on touch devices and responsive layouts. The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

Source

5. jQuery Nested

Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps. The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements. There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout. Its usage is very easy by simply targeting a container element through a jQuery function. And, various options exist for customization like enabling/disabling animation, min. number of columns and more.

Source

6. Wookmark jQuery Plugin

The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes. Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly. The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all. Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).

Source

7. Grid-A-Licious

Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts. There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution. Regardless of the screen size or device, the grid fits perfectly as it is floating (no absolute positioning is used) and fluid. The plugin has options to customize the width, gutter and animation (speed, duration, effect, etc.). And, it supports appending/prepending new items to the grid which is useful for dynamic layouts.

Source

8. jPhotoGrid

jPhotoGrid takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed. Nearly all of the styling for this plugin is done in css. The trick is to layout the grid by floating the list items. The first thing the plugin will then do, is convert these all to absolutely positioned. This is what allows the plugin to zoom in on an individual image and then return it to its place.

Source

9. Gridster

Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag ‘n’ dropped and re-ordered. The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid. And, we are not limited with the elements loaded initially but can add and remove new ones dynamically.

Source

10. Photoset Grid

Photoset Grid is a simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for the Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but they have since expanded it and released a jQuery plugin for us.

Source

11. Flex

Flex is a fluid asymmetrical animated grid plugin for jQuery. You can mouse over the tiles to see them expand. Flex is an idea inspired by the old flash homepage on Adidas.com.

Source

12. Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Source

13. Griddy

Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space. There are few options, including: rows, row height, row gutter, columns, column height, column width, color and opacity.

Source

14. jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. There are some parameters can be added when you call jSquares, e.g. caption size, opacity of the images, shuffle speed and etc. It works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Source

15. jqGrid

jqGrid is an Ajaxed jQuery grid plugin with amazing features. As the grid is a client-side solution that loads data with Ajax callbacks, it can be used with any server-side language like ASP, PHP, ASP.NET, JSP and so. A clever feature is sub grids which shows you a sub grid when a master column is called.

Source