Projekktor (HTML5 Video Player)
pro·jekk·tor (pr-jkk-tr)
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. To explain the mission´s goal simple: Create the best HTML5 centric media player out there - period.
View a Live Demo
The Projekktor Library Features
- Pre- & Postroll Ads
- True Fullscreen (where applicable)
- Build Playlists, stream Channels
- Flash fallback with RTMP support
- Youtube HTML5 support
- Easy to integrate and theme
- Unified Javascript API
Dependencies
- File (in core)
- jQuery Update (jQuery version 1.7 or higher)
- Libraries
Works With
- Field Collection
- Link
- Media (tested on Media 7.x-2.x branch)
- Media YouTube
- Node Reference
- Video
- Views
- YouTube Field
Current Module Integration
7.x-1.x
- Field formatters for above modules
- Field collection support: Lump several HTML5 video formats into a single playlist item.
- Playlist support
- Play YouTube videos from the link module, Media YouTube module or YouTube Field module.
- You can also embed videos into text areas, including html5 YouTube using the video tag.
- jCarousel support (media youtube and field collection so far)
- Views support
7.x-2.x
This branch is under heavy development and should be used only by contributors and developers. Plans are for responsive/fluid layout support, more modularity, player entities, iframe embed options, projekktor plugin support, and better theming.
Basic Installation
- Download the Projekktor plugin at http://www.projekktor.com and place it in your libraries folder so the javascipt file is available at sites/[whatever]/libraries/projekktor/projekktor-[version#].min.js.
- Optionally add themes to the projekktor theme directory of the plugin (sites/[whatever]/libraries/projekktor/theme/). They can be downloaded from the Projekktor website.
- Change the name of the stylesheets in any added themes from style.css to projekktor.style.css. The default name "style.css" conflicts with drupal core.
- Download the jCarousel plugin at http://sorgalla.com/jcarousel/ and place it in your libraries folder so the javascipt file is available at sites/[whatever]/libraries/jquery.jcarousel/lib/jquery.jcarousel.min.js. Use jcarousel version 0.2.9.
- Optionally add skins to the jcarousel skins directory of the plugin (sites/[whatever]/libraries/jquery.jcarousel/skins/).
- Go to admin/config/projekktor to create an instance.
- Add a compatible field to your content and set the display formatter for "projekktor".
- Add content
HTML5 Native Video (with flash fallback)
| File extension | Type |
|---|---|
| .ogv | video/ogg |
| .webm | video/webm |
| .ogg | video/ogg |
| .anx | video/ogg |
| .mp4 | video/mp4 |
Flash Video
| File extension | Type |
|---|---|
| .flv | video/x-flv |
| .flv | video/flv |
| .mp4 | video/mp4 |
| .mov | video/quicktime |
| .m4v | video/mp4 |
Tip
Use a field collection to add items with multiple video types for cross browser compatability. Each "collection" of files becomes a single playlist item. A collection can also contain a poster image and a textfield for your video title. Add unlimited collections to your playlist.
Known Issues
- Themes won't get recognised unless you change the name of the css files as noted above.
- Views integration is getting feature additions.
Module Todos
- Enhance views support (getting done)
- WYSIWYG integration (in planning)
Your testing and feedback is appreciated.
For more information on the player visit http://www.projekktor.com