User Tools

Site Tools


stage_video_-_html5

Video in TTG CE3 Stage

TTG CE3 Stage supports three types of video embed:

  • HTML5 video
  • Vimeo
  • YouTube

In all cases, video pages are responsive and will adapt to be viewed on desktop, tablet or mobile. Video playback is supported on all modern devices, including desktop and laptop computers, iPads, iPhones and Android devices, etc.

HTML5 video embedding allows you to host video locally in your own space; it's also the most complicated to setup. The Vimeo and YouTube options are much easier to implement, but require that your video be hosted on either the Vimeo or YouTube website, respectively.

To use, in the Color Palette control pane set Page Type as “CE3 Standard”:

In the Appearance control pane, in the Page: Staging control group set Gallery/Embed Style as one of the available video options:

Vimeo Setup

To embed video from Vimeo, get the video ID from the video's web address.

For example, the typical Vimeo URL will look like this:

https://vimeo.com/47564100

And you would just need to copy the ID –- 47564100 -– from the end, then paste it into Lightroom:

… then set a few options via the checkboxes. Easy, peasy.

As an additional step, you may wish to get correct width and height values for your video from Vimeo. On any Vimeo video, click the “Share” button, then click “Show Options” where it appears near the Embed section of the popup window. Dial in your desired width, then press the Tab key to move to another input field; Vimeo will automatically update the height for the correct aspect ratio. Use these values for your Native Video Width and Native Video Height within Lightroom.

See the demonstration.

YouTube Setup

To embed video from YouTube, get the video ID from the video's web address.

For example, the typical YouTube URL will look like this:

http://www.youtube.com/watch?v=nGsTi05YPms

And you would just need to copy the ID –- nGsTi05YPms -– from the end, then paste it into Lightroom:

… then set a few options via the checkboxes.

As an additional step, you may wish to get correct width and height values for your video from YouTube. On the YouTube video page, beneath the video, click “Share” and then “Embed”. You should then see a drop-list of available video sizes. Choose your desired size, then use these values to set Native Video Width and Native Video Height so that Stage can set the appropriate aspect ratio for your video.

See the demonstration.

HTML5 Video Setup

Compared to hosted video solutions like Vimeo and YouTube, HTML5 video is more difficult to implement:

  • It requires some one-time server-side setup to set appropriate MIME types for the video files, and …
  • Because each of the major browsers has different file support for video, it is necessary to create identical video files in a variety of formats.

See the demonstration.

Server-side Setup for HTML5 Video

To get running with HTML5 video, we must add MIME type directives to a .htaccess file so that browsers are able to properly recognize the video files. This is a one-time setup that you will not need to repeat when adding new video to your site.

Access the root of your website using an FTP client; if hosting with Bluehost, that's your /public_html/ folder. Make sure your FTP client is configured to show invisible files, because .htaccess is usually invisible.

If you have a preexisting .htaccess file, edit it. If there is no .htaccess file, create a new file and name it ”.htaccess”. For more information on creating a .htaccess file, see here.

Add these lines to your .htaccess file to set the video MIME types:

<IfModule mod_mime.c>
	AddType video/mp4 mp4 m4v f4v f4p
	AddType video/ogg ogv
	AddType video/webm webm
	AddType video/x-flv flv
</IfModule>

Save the .htaccess file.

Preparing the Video Files

Full HTML5 video support requires identical video files in three formats:

  • An h.264 MP4 file for Webkit browsers (Chrome, Safari, etc.)
  • An OGV file for Firefox and Opera
  • A WebM file for Internet Explorer

For older browsers lacking HTML5 video support, or browsers for which a video file is not supplied (i.e. if the OGV or WebM files are missing), then the h.264 video file will be played back using a Flash-based browser.

So while the ideal setup is the combination of MP4, OGV and WebM files, it is possible to supply only the MP4 file and to use the Flash fallback for other browsers. This is not recommended, however; if you are unwilling or unable to supply OGV and WebM video files, then please choose either the Vimeo or YouTube video methods above.

The easiest way to create the necessary video files is using a utility such as EasyHTML5Video (Mac/Win, commercial) or Miro Video Converter (Linux/Mac/Win, free).

Configure the Page for HTML5 Video

The most important aspect of the setup within Lightroom is correctly supplying the file name. The three video files and the poster image should be named identically, for example:

  • my-video.mp4
  • my-video.ogv
  • my-video.webm
  • my-video.jpg

The name of the video should then be entered into Lightroom without a file extension, “my-video”.

Supply a human-readable title for the video, and hit the checkboxes for all supplied video formats.

Publishing Your Video Page

Upon Export, you will be prompted for a save location. Within the exported folder, a /videos/ folder will be created. You should copy your video files and poster image into this /videos/ folder:

Having copied your videos into this folder, you're ready to publish. Upload everything to the Web.

stage_video_-_html5.txt · Last modified: 2013/05/30 03:32 by admin