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.
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 ?
File & Play - the Video Player-Modules: video player modules for displaying your video-content
Most Wanted Modules: the most important Modules for embedding 3rd party content from portals like vimeo, youtube etc.
Integration-Example: display a video in a thickbox with views & colorbox
Video Distributions: a short overview on the current drupal distributions focused on video
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:
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.
Transcoding: Depending on your target audience and their devices you need maybe need to produce some variants of the original file format depending
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.
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!
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:
Use a Flash player, and accept that iPhone, iPad, and maybe newer Mac users can't see your video.
Use the <video> tag with an .mp4 file format without support for IE and Firefox users. Bad idea!
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)
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.