Skip to content. | Skip to navigation

Personal tools
Log in
Sections
You are here: Home How To Plone 3 Plone 4 Streaming Flash & iOS Video

Plone 4 Streaming Flash & iOS Video

Here I stitch together instructions to convert video to a Flash and iOS compatible source, and then embed it on a Plone 4 site for viewing from almost any client.

 

Introduction and Shameless Promotion

Sometimes you want to make your own video and host it on your own site, avoiding services like YouTube. You also want the video to be viewable from any client, including iPad, iPod, iPhone, Windows, Android, and Linux clients--and you want your users to all have the same seamless experience. And you don't want to spend a lot of money. In fact, you may not want to spend any money.

Here I explain how to achieve this video streaming Nirvana using free open source software. I describe the critical parts of a process to get a video converted to a Flash stream from your Plone 4 site. The process uses Flowplayer as a back-end to the redturtle.video Plone add on. The good news is that you don't actually need to know anything about Flash to get streaming Flash content in your Plone site.

I should mention that as of 1/2/2012 the following instructions seem to be the only instructions on the web to get the video splash image to appear correctly in an in-line flowplayer video or to seamlessly serve video to all popular platforms. Additionally, this is also probably the most secure way to embed these videos on a Plone page because it requires no changes to settings that affect plone security. In my opinion, these instructions are the preferred way to embed a Flowplayer Flash stream on a Plone website.

 

Example

Here is what you can accomplish with the instructions:

 

 

Successful Clients

I have not tried all clients available to me because of time. But I have tried the oldest and have had a 100% success rate. The only caveat is that for some clients, I had to update to the most recent compatible browser and most recent version of Flash, a process that does not cost the typical user any money. If an operating system isn't mentioned here, it means I haven't tested it yet. Using the same movie container, I have tested all of these with success (note the Ubuntu and Windows XP systems run operating systems are several years old):

  • Safari 5.1 (Flash 11 enabled) on Intel OS X 10.6.8
  • Firefox 3.6 (Flash 11 enabled) on Intel OS X 10.6.8
  • Safari on iPad iOS 4.3.3 (iOS does not support Flash, but it still works!)
  • Internet Explorer 8.0 (Flash 9? enabled) on Windows XP SP2
  • Internet Explorer 8.0 (Flash 11 enabled) on Windows XP SP3
  • Firefox 6, 9, & 10 (Flash 11 enabled) on Windows XP SP3
  • Firefox 3.6 (Flash 9 enabled) on Intel Ubuntu 8.0.4 Dapper Drake.
  • Firefox 10 (Flash 11 enabled) on Windows 2000 SP4

 

The Instructions

  1. Use ffmpeg to convert images or video to the MP4 (.mp4) format, which will be streamed for Flash by Flowplayer. There are many examples of ffmpeg commands that merge audio and video to make movies of various formats. The format we want is the MP4 container and the libx264 codec (requiring a libx264 build of ffmpeg). Following is the command I used to make the example movie. This example does not include audio, which according to the MP4 format could be in the MP3 codec as well as many others.
    ffmpeg -i frame-%04d.png -acodec libfaac -vcodec libx264 -f mp4 movie.mp4
  2. Install redturtle.video and collective.rtvideo.youtube using buildout.
    1. Stop Plone
      cd /path/to/plone/zinstance/bin
      sudo ./instance stop
    2. In the file "zinstance/buildout.cfg", make sure the two relevant eggs are included in the "eggs" section:
      eggs =
      Plone
      redturtle.video
      collective.rtvideo.youtube
    3. Run the buildout (assuming the user you use has write permissions in the instance). Running the buildout downloads and installs all components as necessary:
      cd /path/to/plone/zinstance
      ./bin/buildout
    4. Start Plone again
    5. cd /path/to/plone/zinstance/bin
      sudo ./instance start
    6. Enable RedTurtle and Flowplayer in your plone site: Site Setup → Add-ons → ☑ RedTurtle Video & ☑ flowplayer setup without types → Activate
  3. Upload your Flash video.
    1. As an administrator, navigate to the Plone folder where you want to store the Flash movie.
    2. In the toolbar, click Add new... → Video file
    3. It is nice to have a splash image for your video to serve as a preview. To specify the splash, find an image with the same size as the video. This image is specified in the Image entry in the dialog.
    4. Click Save. It may take up to several minutes to upload your movie depending on its size. Be patient.
    5. If everything is working as expected, you will be able to play the movie directly after it is uploaded. If it works, then Congratulations! you know have streaming Flash video on your Plone site.
  4. Enable the splash screen for this video.
    1. In Plone, navigate to the video you uploaded in the previous step.
    2. Edit → Look → ☑ Use image as splash screen?
    3. You may also want to change the Video width and Video height from the default 400 x 300 px to the dimensions of the movie dimensions. These dimensions only affect the view page. The video can be shown in different sizes in different locations on your Plone site using the instructions below.
    4. Click Save.
  5. Embed your video in a Plone page.
    Note: Embedding the video as shown on the video page in the Put this video on your site entry will not work with the default Plone settings. Instead of using that method (described here in more detail), I suggest the following, which takes just a little more work but has more flexibility and allows for the splash image and a more pleasing user experience. The method I advise is also more XHTML compliant and is more secure.
    1. In your browser, show the page source of the video. In Firefox, for example this would be View → Page Source.
    2. Find the part that looks like this (search for "autoFlowPlayer" to find it quickly):
      <div class="autoFlowPlayer video videoContent internalVideoContent"style="height: 622px; width: 474px;">
      <a class="videoWrapper" style="height: 622px; width: 474px;" href="http://www.jamesstroud.com/site-multimedia/site-mp4-movies/example-mp4-movie/at_download/file">
      <img alt="Video splashscreen" src="http://www.jamesstroud.com/site-multimedia/site-mp4-movies/example-mp4-movie/@@images/c10ffd5d-e702-4f57-82da-125ff30a8c90.png" height="622" width="474" />
      <span class="iconPlay" style="left: 195px; top: 269px"></span>
      </a>
      </div>
    3. Copy those six lines (from div to div).
    4. Navigate to the Plone page that you want to embed the video in, click Edit to edit the page.
    5. Paste the above code into the page as HTML.
      1. First, you may want to put some dummy text in your Plone page to help you find your place in the HTML. Maybe some text that stands out, like "PUT VIDEO HERE". You can use the editor for this step.
      2. In the editor toolbar, click HTML.
      3. In the pop-up, find the dummy text in the HTML.
      4. Replace the dummy text (e.g. "PUT VIDEO HERE") with the HTML you copied from the source (<div class="autoFlowPlayer" … </div>).
    6. Save the changes to the page.
    7. Note that the default Plone editor will strip out the in-line styles (style attributes) because in-line style is considered to reduce security.
      You will correct the styling in the approved, secure way, using style sheets (CSS), described below. If you use an editor that is not the Plone default to introduce the HTML, it is a good idea to manually remove the in-line styles if you set the size with the global stylesheets as described in Steps 6-8.
      Although it is possible to use in-line styles, I recommend sizing the movie with the following steps. Using global style sheets will reduce the potential for problems if the page is edited in the future using an editor that strips in-line styles.
  6. Endow your video with id attributes so that it may be styled by custom CSS. Also change the size of the splash image.
    1. Decide what size you want. In the above example, 622 x 474 px is pretty big. I want to maintain the aspect of the image, so I multiply both dimensions by the same number (0.5), to get 237 x 311 px (width = 237, height = 311).
    2. Pick some good IDs and add them to the autoFlowPlayer (<div>) and to the iconPlay (<span>) tags. Also change the size of the splash image (<img>). Note for the splash image, the width and height will be specified at the end of the tag when copied from the browser, but I have moved them towards the start for clarity. The relevant changes and additions are in bold:
      <div class="autoFlowPlayer video videoContent internalVideoContent" id="example-flash-player" >
      <a class="videoWrapper"  href="http://www.jamesstroud.com/site-multimedia/site-mp4-movies/example-mp4-movie/at_download/file" >
      <img alt="Video splashscreen" height="311" width="237" src="http://www.jamesstroud.com/site-multimedia/site-mp4-movies/example-mp4-movie/@@images/c10ffd5d-e702-4f57-82da-125ff30a8c90.png" />
      <span class="iconPlay" id="example-flash-playbutton" ></span>
      </a>
      </div>
  7. Customize the CSS for this particular image.
    Note for advanced CSS/XHTML users: if you have many movies the same size, you can reuse the CSS with CSS selectors.
    1. If you don't already have a ploneCustom.css in /portal_skins/custom, go to Site Setup → Zope Management Interface → portal_skins → plone_styles → ploneCustom.css and click Customize.
    2. Enter the the styling information specifying width and height of the elements.
      Note also the positioning of the example-flash-playbutton <span>. This centers the playbutton on the splash preview. Also, there are more sophisticated (shorter) ways to express this CSS using multiple ids, classes instead of ids, pattern matching, etc., but I'm giving the most straightforward way:
    3. #example-flash-player {
      width : 237px ;
      height : 311px ;
      }

      #example-flash-playbutton {
      width : 237px ;
      height : 311px ;
      top : 0px ;
      left : 0px ;
      }
    4. Click Save Changes.
  8. Purge the CSS cache to check out your movie.
    1. Go to Site Setup → Zope Management Interface → portal_css and click Save (you must scroll down pretty far on the page to find the "Save" button).
    2. Reload the Plone page that has the embedded movie.

 

Appendix I: ffmpeg Example Commands

Here are some helpful pages that give many examples of how to use ffmpeg:

 

Appendix II: Building libx264 Enabled ffmpeg for OS X Users

Because the ffmpeg that comes with the latest version of fink (as of this writing) is broken for me, to get the ffmpeg compiled for libx264 on OS X with fink I had to

  1. Remove from fink all libx264 with the "--recursive" flag (use "fink list 264" to see what is installed)
  2. Ensure my environment variables included the following equivalents (don't know which were the important ones)
    setenv CPPFLAGS "-I/usr/local/include -I/sw/include"
    setenv CFLAGS "-I/usr/local/include -I/sw/include"
    setenv LDFLAGS "-L/usr/local/lib -L/sw/lib"
    setenv LD_LIBRARY_PATH "/usr/local/lib:/sw/lib"
  3. Then I built the latest x264 with
    ./configure --enable-shared --enable-static
  4. Then I unset the above $LDFLAGS and $LD_LIBRARY_PATH environment variables (I don't know if this was necessary).
  5. Then I built ffmpeg with this configuration (again, I don't know if the "--extra-ldflags" option was necessary):
    ./configure --enable-gpl --enable-static --disable-shared --enable-libx264 \
    --enable-pthreads --disable-doc --enable-avfilter --disable-ffplay \
    --disable-ffserver --disable-ffprobe --extra-ldflags=-L/usr/local/lib
  6. I was happy to get it built. Fink is helpful, but sometimes it has libraries that are not configured properly, causing havoc.

 

Appendix III : MediaElement.js – A Potential Alternative

As a matter of record, I'm listing here a potential alternative to Flowplayer called MediaElement.js. The plone add-on for MediaElement.js is collective.mediaelementjs. I will probably look into this alternative in the near future.