Zen EE

A video encoding module and fieldtype for ExpressionEngine, powered by Zencoder.

Download .zip Download .tar.gz View on GitHub

Zen EE Screenshot

FAQ

What does Zen EE do?

Zen EE allows you to utilize Zencoder, a cloud-based video encoding service from within ExpressionEngine. It uses the power of cloud computing to quickly convert between video formats, all without hammering your server. Learn how Zencoder works.

What formats can be converted?

Nearly anything can be used as an input. For output we use WebM and MP4 for full HTML5 video support.

Why not just use YouTube/Vimeo/Wistia/Viddler/SublimeVideo?

Video hosting services are great in most cases, but a few reasons to self-host include:

  • Control over output formats and look-and-feel
  • Privacy, e.g. videos are behind a corporate firewall
  • Centralization: no need to leave the CMS to manage a third-party service

How does it work?

  1. Tell Zen EE where your input videos live. This can be an EE upload directory, any accessible directory on your server, or a public URL.
  2. Tell Zen EE where you'd like the output videos to be placed. Output can be transported via SSH, FTP, or SFTP to your web server, Amazon S3, or Rackspace Cloud Files account.
  3. Create an encoding job from the Zen EE admin
  4. Use the Zen EE fieldtype to select your desired video. Reference your video files, thumbnails, and meta information using EE's trademark templating.
  5. That's it!

What HTML5 video player(s) can I use?

We recommend Video.js, created by Steve Heffernan of Zencoder. Some alternatives include:

Who created this?

Judd Lyon & Sebastian Brocher for Trifecta Interactive.

Installation

  1. Copy third_party/zen_ee to your ExpressionEngine third_party directory
  2. Click the install link (Add-ons → Modules → Zen EE → Install )
  3. Install both the module and fieldtype

Configuration

  1. Sign up for Zencoder
    • Create an API key: API → Full Access API Keys → New Full Access Key
    • Copy your API key to the Zen EE API field on the Zen EE Settings screen
  2. Add the server path to your input videos. This can be any publicly viewable directory such as an ExpressionEngine upload directory
  3. Add the URL of your input videos directory
  4. Add the server path to your output videos. Supported protocols: FTP, SFTP, Rackspace Cloud Files, and Amazon S3. Output API reference
  5. Add the URL of your output videos
  6. Test Mode:
    • On = Zencoder jobs will be run in test mode. You will not incur charges. Videos will be shortened to 5 seconds and watermarked.
    • Off = production mode, you will incur charges. Test Mode API reference

Config Overrides

You can set configuration options in config.php if you prefer.

  • $config['zen_ee_zencoder_api'] = '';
  • $config['zen_ee_input_videos_dir'] = '';
  • $config['zen_ee_input_videos_url'] = '';
  • $config['zen_ee_output_videos_path'] = '';
  • $config['zen_ee_output_videos_url'] = '';
  • $config['zen_ee_enable_test_mode'] = ''; // 'On' or 'Off'

Usage

Creating an encoding job

  1. Upload videos to your input video folder
    • You should now be able to view these in the Videos tab of the Zen EE Module
    • Click Encode on the video you'd like to convert
    • Enter a desired Name, Video Width, Video Height, and the Thumbnail Time. The Thumbnail Time is the second in the video where you'd like the thumbnail image generated from.
  2. Click Encode, you should get a message saying The video encoding job was successfully created.
  3. Select the Jobs tab to monitor the job. The Job Status column will indicate Created, Finished, or Failed.
  4. Created means the job has been created and is in-progress. Refresh your browser occasionally to check the status.
  5. Finished means the job is done and is available to your Fieldtype
  6. Failed means something went wrong - log into your Zencoder account find out exactly what failed or try the job again. Usually this is an input or output path issue.

Using the Fieldtype

  1. Create an ExpressionEngnine Fieldtype as usual and select Zen EE as the Type.
  2. Your Field will show a dropdown menu of all successful (Finished) encoding jobs. Simply select the one you'd like to insert into your page.

Template Tags

Your Zen EE custom field can be output as a tag pair. The following variables are available:

  • {thumb_url}: the thumbnail URL
  • {input_url}: the path to the original input file
  • {name}: the name you selected for your video
  • {zencoder_job_id}: useful in case you need to troubleshoot
  • {width}: the width you designated for the output video
  • {height}: the height you designated for the output video
  • {mp4_status}: the MP4 file's output status
  • {mp4_zencoder_job_output_id}: the job ID of the MP4 file
  • {mp4_url}: the URL to the MP4 output file
  • {webm_status}: the WebM file's output status
  • {webm_zencoder_job_output_id}: the job ID of the WebM file
  • {webm_url}: the URL to the WebM output file

Example using Video.js

  1. Include the following in your page HEAD:

    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
  2. Include the following in your page template. Adjust the Channel Entries tag as needed and use your Custom Field's actual name:

    {exp:channel:entries channel='test'}
      {zen_custom_field}
        <h2>{name}</h2>
        <video id="my_video_1" class="video-js vjs-default-skin" controls
          preload="auto" width="{width}" height="{height}" poster="{thumb_url}" data-setup="{}">
          <source src="{mp4_url}" type='video/mp4'>
          <source src="{webm_url}" type='video/webm'>
        </video>
      {/zen_custom_field}
    {/exp:channel:entries}
    
  3. Note: you may need to add MP4 and WebM as MIMETYPES on your server.
    .htaccess or httpd.conf
    AddType video/mp4 .mp4
    AddType video/webm .webm

Support

Feature suggestions and pull requests welcome! Please use the issue tracker for bugs.