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.

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.

Details on the topics can be found at here:

• http://www.streamingmedia.com
• http://www.onlinevideo.net/2011/03/the-ultimate-html5-video-guide
• http://en.wikipedia.org/wiki/Codec
• http://en.wikipedia.org/wiki/Video_codec
• http://diveintohtml5.org/video.html
• http://www.reelseo.com/file-formats-containers-compression
• http://www.reelseo.com/basics-web-video-file-formats-video-containers
• http://www.videohelp.com
• http://websitehelpers.com/video

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.

Module	D6	D7	URLs
Flow Player Figure 03	6.x-1.0-beta1	7.x-1.0-alpha1	Drupal Project Page Player-Homepage Documentation Demonstration
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 Figure 04	6.x-1.0-beta3 (for mp3 only)	7.x-2.x-dev (for all media)	Drupal Project Page Player-Homepage Documentation
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 Figure 05	6.x-1.6	7.x-1.3	Drupal Project Page Player-Homepage Documentation
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 Figure 06	-	7.x-1.1	Drupal Project Page Player-Homepage Documentation
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.1	7.x-1.2	Drupal Project Page Player-Homepage Documentation
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	-	Drupal Project Page Player-Homepage
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	Drupal Project Page
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.

Module	D6	D7	URLs
Media	-	7.x-1.0-beta5 7.x-1.x-dev 7.x-2.x-dev	Projectpage Documentation Development Profile
+ 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
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.2	7.x-1.0-alpha2 7.x-2.x-dev	Projectpage Home page Read documentation
+ 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)
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	Projectpage Home page Read documentation Demonstration
+ 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)
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	-	Projectpage emfield emfield Homepage Documentation Demonstration Projectpage MM a short Review of MMv2 Integrate MM and mobile technology Video recipe Developer documentation
+ 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
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		Projectpage Documentation

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

Step1: Figure 11b

6. Video Distributions:

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

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.