Drupal Doing Video

Thank you for your contribution: 

1. Introduction

As video is the media getting more and more important this chapter will show and describes the basic things how video could be integrated into drupal.

  1. Introduction
     
  2. The Video-Workflow: the steps necessary to get a video to a website.
    • Basics, Videoformats & Codecs: some facts you should I keep in mind.
    • Display-Methods: depending on the target device you need to keep aware to use the right code & content
    • Methods to deliver your video: Streaming, Progressive Download or just Download ?
       
  3. File & Play - the Video Player-Modules: video player modules for displaying your video-content
     
  4. Most Wanted Modules: the most important Modules for embedding 3rd party content from portals like vimeo, youtube etc.
     
  5. Integration-Example: display a video in a thickbox with views & colorbox
     
  6. Video Distributions: a short overview on the current drupal distributions focused on video
     
  7. Conclusion & Resources

2. The Video-Workflow

The figure above shows the typical steps which you need to go through to bring a video to your website. Depending on your needs and your chosen technology-environment some steps can be grouped together or skipped, e.g. if you select a 3rd party video-hosting service, they should offer the upload-, endcoding & storage-service.

The Video Workflow

Figure 01: The Video Workflow

The main steps explained:

  1. Source-Files & Upload:
    The first thing you need is a video to upload and here could begin the first challenge on chosing the right file-format(s) and video-codec(s) depending on your needs. The best choices for a quick integration of a single video is a webready file-format like "mp4" (the codec here is h264!!!) which has the most support currently or a Flash-Video-File (SWF or FLV, which normally uses also the h264 codec). If the video file would be transcoded/encoded, e.g. for various sizes or devices you should use the best possible quality, e.g. a Quicktime-File (.Mov) with a lossless codec or a low compression. If you don´t have the possibility or plan to transcode your video on a server for different devices you need to deliver the needed versions here.
     
  2. Transcoding:
    Depending on your target audience and their devices you need maybe need to produce some variants of the original file format depending
     
  3. Presenting your media with the right player:
    Also like in step 2 here you need a player which supports several plattforms & devices.

Basics, Videoformats & Codecs

What makes getting video onto your website a pain is that there´s no easy solution for everything!

There´s no video-/file format which is compatible with every browser, especially since the age of mobile devices and according to latest statistics & news, that the iPhone is one of the most used devices to watch videos (http://www.reelseo.com/mobile-video-grows). Flash-Video was a good choice in the past for the desktop but now you have to get around with more browsers & plattforms than ever before.

For a little more confusion some more in deep informations, cause often there´s a missunderstanding between the file-types and codecs (how the video is encoded).
The key to understanding web video is realizing that there are actually three different parts:

  • The file format that holds the video, e.g. " .mp4", ".flv", ".ogv" or ".avi".
  • The video format, called codec, e.g. H.264, MPEG-4, WebM or Theora.
  • The player that makes it available to your site visitors, such as the Adobe Flash Player or the new <video></video> tag.

The file-format is just a “container” for the data. It´s basically no difference between a H.264 encoded “.mov” or a “.flv”-file. The video content inside the file should not differ at all. Both file types can use this codec. The main issues concerning the codec is, if it´s lossless or not. This is often important for the quality. Standard-Codec and most promising, cause it´s also used for HTML5-Delivery (69 percent in June, 2011) currently is H.264 (also known as m4v or mp4, the main container-formats). This codec uses compression and it´s not a lossless codec.

Choose the right codec.
Figure 02: a MP4 is not a Web-MP4!
Therefore you should consider to limit additional transcoding phases cause every recompression/transcoding step results a poorer quality if the video data is really modified. Often it´s enough to change the container-file-format. This is only possible if the video needs no resizing!

Details on the topics can be found at here:

How to play right? Display-Methods!

Basically there is no one format that works on everything!

Flash works on most browsers, but not on the iPhone or the iPad and isn't preinstalled everywhere.
The <video> tag works on those, but not with Internet Explorer 8 or earlier versions. IE 9 will support it.
The <video> tag works in Safari, Chrome, and Firefox, but Firefox doesn't support .mp4 with that tag, only the more obscure .ogv.

Now you can check your options:

  1. Use a Flash player, and accept that iPhone, iPad, and maybe newer Mac users can't see your video.
  2. Use the <video> tag with an .mp4 file format without support for IE and Firefox users. Bad idea!
  3. Use the <video> tag and feed it both an .ogv file (for Firefox) and an .mp4 file (for everything else) and miss the IE8 users (most used IE currently)
  4. Wrap the <object> tag for Flash video inside the <video> tag, and make both an .mp4 and an .ogv file available on your server. 
    This will support most devices, since the browser in question will use whatever it can support.  This is the most-compatible solution and requires more code and more than just one video file. You need to create a .mp4 version and a .ogv version.

The resulting code should look like this:

Source: http://websitehelpers.com/video/html.html

Hopefully in the future the <video> tag will be supported by all major devices and browsers.

Methods to deliver your video

Additionally to this there are several methods on getting your data around. How do you want to serve your videos?

  • Streaming:
    - needs a streaming server (= extra software to install) with power depending on the number of viewers
    - for good quality a fast connection is necessary for the server & the viewer
    + your user sees results very soon quality can vary & be optimized for the client by the streaming-server
    + you are in a better situation to keep control of your video & rights (basically, a lot rippers/screenrecorders are available)
     
  • Progressive Download:
    - for good quality a fast connection is necessary for the server & the viewer
    - video content is cached by the client and can be copied
    o your user sees results depending on his connection
    + no streaming server is necessary, works just with http-protocol
     
  • File-Download: (should be only chosen as additional option)
    - your user does not see what he really gets, there´s no player used, some clients maybe support you provided file-format
    - for good quality file-size is often huge & takes long to download
    - the video is under control of the client
    + no streaming server is necessary, works just with http-protocol
    + offers best quality (other codecs) for huge files
    + more options for codecs & formats, e.g. Quicktime

3. File & Play - the Video Player-Modules:

In this section you will get a comparision of some selected player projects.

ModuleD6D7URLs

Flow Player

Video-Players: the flowPlayer
Figure 03
6.x-1.0-beta17.x-1.0-alpha1

Pros

+ Good integration with API for other modules
+ Takes advantage of Drupal JavaScript Behaviors
+ Global custom styling options
+ Integration with Embedded Media Field & Video
+ Playlist-Module (Project-Page)

Cons

- Only basic Branded Player is Open Source
- Still in alpha or beta
- No native cck-file-support

jPlayer

Video-Players: the jPlayer
Figure 04
6.x-1.0-beta3 (for mp3 only)7.x-2.x-dev (for all media)

Pros

+ jQuery based
+ Free & Open Source
+ comprehensive documentation
+ extensive platform support
+ skinnable using HTML and CSS
+ consistent API and interface in all browsers, HTML5 or Adobe® Flash™
+ integration for cck-file

Cons

- currently only ".m4v" file format works for videos

VideoJS

Video-Players: the videoJS-Player
Figure 05
6.x-1.6
7.x-1.3

Pros

+ HTML5 & Flash-Video Player + Free & Open Source
+ Huge Plattform-Support with fallback to Flash
+ Video Module-Integration
+ 100% skinnable using CSS
+ Library independent
+ Good documentation
+ Extendable
+ Consistent look between browsers

Cons

- still some bugs in D7 Version with video module & cck-field

Media Element

Video-Players: MediaElementjs
Figure 06
-7.x-1.1

Pros

+ Support audio & video tags for even old browsers via Silverlight/Flash
+ consistent player-interface on all supported browsers
+ Testcontent (sites/all/libraries/mediaelement/media)

Cons

- problems with other players & modules
- no integration with video module
- only supports h.264 file-formats
more player modules:

Mediafront

6.x-1.17.x-1.2

Pros

+ 100% Open Source (Open Standard Media (OSM) Player!)
+ Written in the popular jQuery framework.
+ Good documentation.
+ Huge Plattform-Support & Flash fallback for non-standard media
+ Seamless Vimeo and YouTube integration.
+ Easily themable using the incredible ThemeRoller system.
+ Playlist support & Player to Player communication.

Cons

- configuration/integration needs advanced knowledge

JW Player (Flash & HTML5)

6.x-1.4-

Pros

+ HTML5 & Flash-Video Player
+ Good documentation
+ Huge Plattform-Support

Cons

- Commercial licence necessary
- No D7 Version (maybe early Q4/2011)

HTML5 Media

-7.x-1.x-dev

Pros

+ promising for Drupal 7 & 8

Cons

- very early development stage
- not recommended by now for live-sites!!!

Besides some players don´t work on a page if you try to display more than one video at once using the default fields, e.g. to display videos as a list !!! Two good and more detailed reviews on current HTML 5 Players can be found here at the Mediacore-Website, besides Mediacore offers a CMS specialized on Video-Content and hopefully there will be a Drupal-Modul out soon or a similar solution integrated in Drupal. Nevertheless it´s a good example on how things can be made. And another one at the TemplateMonsterBlog.

4. Most wanted Modules

The following section gives you a brief overview of the most important modules to integrate video into drupal.

ModuleD6D7URLs

Media

-7.x-1.0-beta5
7.x-1.x-dev
7.x-2.x-dev
+ Offers a lot add ons for e.g. Vimeo, Youtube ...
+ Extends file management capabilities in core
+ Provides a framework for media meta-data
+ A consistent user interface for managing files.
+ Works with MediaElement.js
- Media Browser is not optimized for a huge
amount of media files
- No encoding services integration
- still beta or in development
DrupalDoingVideo_Figure-07a_Media-Module_Admin DrupalDoingVideo_Figure-07b_Media-Module_Admin DrupalDoingVideo_Figure-07c_Media-Module_Admin
Figure 07a, Figure 07b, Figure 07c

Conclusion

A good choice if you need no encoding or do this via Vimeo or Youtube and if you have a smal amount of videos.

Video

6.x-4.27.x-1.0-alpha2
7.x-2.x-dev
+ Video upload and Playback
+ Thumbnail- & Encoding-Integration (FFMPEG, Zencoder ...)
+ Amazon S3-Support (D7 only)
+ Transcoding Presets with a admin interface
+ Features, Chaostools integration
+ Support for a lot devices incl. mobiles
+ Support for VideoJS & JW-Player
- Encoding with ffmpeg is no easy installation - ask a unix-hero !!!!
- Zencoder, FLVTool2 may need some modifications to work
- Zencoder-Service needs public access (Details here)
- No admin-interface for Encoding-Process within Drupal
- Yet no support for MediaElement.js
- No Integration with the Media-Browser (check this)
DrupalDoingVideo_Figure-08a_Video-Module_Admin DrupalDoingVideo_Figure-08b_Video-Module_Admin DrupalDoingVideo_Figure-08c_Video-Module_Admin DrupalDoingVideo_Figure-08d_Video-Module_Admin
Figure 08a, Figure 08b, Figure 08c,Figure 08d

Conclusion

D7-Versions are unfortunately still buggy by now. Even with Zencoder no easy setup without troubles.
D6-Version is more recommended currently.

Kaltura

6.x-1.5
6.x-2.0-beta2
7.x-2.0-beta2

+ Very easy setup
+ Very good UI & Configuration via KMC on Kaltura.com
+ Thumbnail- & Encoding-Integration
+ Commercial (Free 10 GB Trial) or Selfhosting-Solution
+ Video upload and Playback-Integration (also Streaming)
+ CCK- & Metadata-Support
+ Full integration with Drupal Views
+ Contentbrowser within the Kaltura module settings
+ Advanced features like Built-in online video editor
+ Kaltura is a open source video platform

- Flash Based-Interface
- No Integration with the Media-Browser (check this)
DrupalDoingVideo_Figure-09a_Kaltura-Module_Admin DrupalDoingVideo_Figure-09b_Kaltura-Module_Admin DrupalDoingVideo_Figure-09c_Kaltura-Module_Admin DrupalDoingVideo_Figure-09d_Kaltura-Module_Admin DrupalDoingVideo_Figure-09e_Kaltura-Module_Admin
Figure 09a, Figure 09b, Figure 09c, Figure 09d, Figure 09e

Conclusion

That´s a Designers friend. 7.x-2.0-beta2 worked like a charm! Guess the D6-version will work also, not tested yet, please send some feedback on this! No technical hassles, no problems with the Kaltura.com-Encoding. Easy & working. My favorite !!!6.x-2.5

Embedded Media Field (incl. Embedded Video Field) and MediaMover

6.x-2.5
5.x-1.13

6.x-1.0-beta9
6.x-2.x-dev

-

+ Provides basic support for a wide range of media
+ Offers a lot add ons for nearly every videoservice e.g. Vimeo, Brightcove ...
+ Supports Feeds, Media Actions, Media Mover, Colorbox ...
+ Video upload and Playback
+ Thumbnail- & Encoding-Integration (FFMPEG)
+ Amazon S3-Support
+ Video-Transcoding
+ YouTube-Upload
+ API for other modules & Views support
+ very flexible with all media types

- Encoding with ffmpeg is no easy installation - ask a unix-hero !!!!
- Powerfull & flexible but configuration is not easy for beginners
- MediaMover is still not final
- Brightcove-Integration uses an older API (http://echove.net/examples.php & http://code.google.com/p/echove/download...)
- not all display modes work as expected

DrupalDoingVideo_Figure-10a_emField-Module_Admin DrupalDoingVideo_Figure-10b_emField-Module_Admin DrupalDoingVideo_Figure-10c_mediamover-Module_Admin
Figure 10a, Figure 10b, Figure 10c

Conclusion

For D6 the Embedded Media Field, MediaMover and it´s other Modules can solve a lot of things you can do with video.

more interesting modules:

Video Upload

The Video Upload module provides a CCK field type that allows for the end user to upload video directly to YouTube, using a single account for the site.
6.x-1.6
6.x-2.x-dev
 

5. Integration-Example: display a video in a thickbox with views & colorbox

Step1: Figure 11a
DrupalDoingVideo_Figure-11a_ViewsTrigger_Admin
First set the 2 fields for the video to be displayed. One with displaying the video-thumbnail, the other one displaying the video in full-size. Then exclude both fields from display, cause with a third field, the "Views Trigger" we will manage that the thumbnail is displayed and a click on it will display the video in full-size within a thickbox.
 
Step1: Figure 11b
DrupalDoingVideo_Figure-11b_ViewsTrigger_Admin
This figure shows the results. The left image shows a page with the thumbnail of 3 nodes and the left the video within a thickbox.
 

6. Video Distributions:

A short overview on the current drupal distributions focused on video & media.

DistributionD6D7URLs

Media Mosa

2.3.14 (build 1411)3.0.2 (build 1724)

MediaMosa is an open source “Media Distribution Platform” based on Drupal. The main features:

+ Delivery platform for multimedia content
+ Streaming of any format (e.g. Flash, H.264, MPEG-4 ...)
+ Transcoding using FFmpeg
+ Flexible Metadata
+ Media access management functions
+ Enhanced still functions
+ REST API
+ Open Source GPLv2 license

- Installation & setup needs advanced knowledge

Videola

6.x-alpha-

Videola is an enterprise-level video management system and video delivery platform. It´s aim is to be a flexible, general use, video platform with the following main features:

+ Subscription access to a collection of streaming videos
+ Create your own subscription intervals & pricing
+ Listings of videos by date, popularity & category
+ Custom categorization and tagging of videos
+ Listing of “similar videos” on each video page
+ Option to show preview videos to non-subscribed users
+ Option to show preview images to non-subscribed users
+ User Queues where users can add/remove their videos
+ In-stream advertising and branding bumpers
+ Extensive video analytics, inlcuding per subscriber
+ High-definition, adaptive bitrate, secure video streaming
+ iOS & Android compatible mobile streaming via wifi or 3G
+ Video content delivery network for peak performance

 

- Installation needs advanced knowledge
- Still not reached the first final 1.0 version
- No D7 version available

Kaltura

6.x-1.5
6.x-2.0-beta2
7.x-2.0-beta2

+ Very easy setup
+ Very good UI & Configuration via KMC on Kaltura.com
+ Thumbnail- & Encoding-Integration
+ Commercial (Free 10 GB Trial) or Selfhosting-Solution
+ Video upload and Playback-Integration (also Streaming)
+ CCK- & Metadata-Support
+ Full integration with Drupal Views
+ Contentbrowser within the Kaltura module settings
+ Advanced features like Built-in online video editor
+ Kaltura is a open source video platform

- Flash Based-Interface
- No Integration with the Media-Browser
- Not a 100% Drupal Solution
more interesting distributions:

Open Media Project

A great one with a lot of features & modules, but unfortunately not up to date with the current module versions. But a good starting point.
6.x-1.2 -

7. Conclusion

The basic integration from 3rd party service works very well with the offered modules, but to get the whole workflow from transcoding to asset-managment done with drupal is no easy journey. If you need this you should try one of the distributions and modify them to your needs. Hopefully the "media"-project for D7 will get a final v2 release soon and some more advanced features.

 

 

 

 

 

 

 

Comments

Thank you for this nice Overview.

I tried most of the above modules but I didn't feel comfortable with any of them. Most promising was media mover, but I encountered a lot of bugs and missed some features like sending messages. The video module is nice, easy to set up but it provides its own content type. This makes it more complicate to upgrade to another technology later. Somehow I felt looked in.

Lucky me, I found the holly grail, a very lightweight but flexible solution. The combination of FFmpeg Wrapper and FFmpeg Converter. FFmpeg Wrapper simply executes the ffmpeg transformation. FFmpeg Converter offers Rules integration. When the node is saved, rules will ad the node to a queue. Later the cron job will run the transcoding. The source file will be read from a cck field and saved back to the same or to another cck field. You can add as much transcodings as you want. The module provides more flexibility than media mover (because of rules integration) and is as easy to use as the video module.

Another part I underestimated is the video playback. It is not easy to find a good video player that works with views, may have different presets/sizes, is able to show a poster image and is easy to set up. Currently I don't need html5 but flash. I just have one flv file (not different files with different resolution/bitrate) so I ended up with the flowplayer. But maybe later I will extend the functionality to take advantage from html5 and provide different resolutions and bitrates. Thanks to FFmpeg Converter I don't worry to upgrade the features later.

The last thing I need to implement is a view/download counter, which allows each user to see the stats of her/his videos. There is an app for this ... I didn't find, most are using private file system or some ajax calls to drupal, very bad with performance, so I have to code my own module.

Best regards, Lars Schröter.

--
Lars Schröter
Drupal Developer, Dresden, Germany
Web: http://lars-schroeter.com

Finally I finished the business video portal project, you can find it at: bizztube.ch and more description under: http://lars-schroeter.com/de/referenzen/... ... but only in German :(