»

HTML5 Video & HTML5 Video & Amazon Elastic Amazon Elastic

TranscoderTranscoder

FCIPFCIPAugust 26, 2014August 26, 2014

» What is HTML5 video?

• Before HTML5, there was no standard for showing videos/movies on web pages.

• Before HTML5, videos could only be played with a plug-in (like Flash).

• HTML5 defines a new element which specifies a standard way to embed a video or movie on a web page: the <video> element.

• Browsers support: Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

» Video Formats

• Unfortunately, not all browsers natively play the same video format

• The reasons include (in part) concerns browser manufacturers have over patent issues with different video formats

• The good news is that even since HTML5 video first became available there has been some convergence

» Video Formats

• Only two video formats needed to cover all modern browsers and mobile devices:

• MP4 = MPEG 4 files with H264 video codec and AAC audio codec (needed for Safari, iOS, IE)

• WebM = WebM files with VP8 video codec and Vorbis audio codec

• http://diveintohtml5.info/video.html excellent descriptions of containers, codecs, and more

» Browser Compatibility

» The HTML

Single source file example:

<video src="mymovie.webm" width="320" height="240" controls></video>

» The HTML

Realistic example<video width="320" height="240" controls>

<source src="mymovie.mp4" type="video/mp4">

<source src="mymovie.webm" type="video/webm">

<source src="mymovie.ogv" type="video/ogg">

Your browser does not support the video tag.

</video>

» Potentially useful HTML attributes• controls• loop• Preload• autoplay

Full attribute list:http://www.w3schools.com/tags/ref_av_dom.asp

» Demo

http://site10.codegeek.net/z-videotest.html

MP4 single-file example

Webm single-file example

Self selecting multiple-file example (MP4, webm)

» WordPress Shortcode for HTML5 Video

Single file:

[video mp4=”mymovie.mp4"]

Multiple files:

[video mp4="mymovie.mp4" webm="mymovie.webm" flv="mymovie.flv"]

More info: http://codex.wordpress.org/Video_Shortcode

Demo: http://site10.codegeek.net/jim-saulnier-video-test-page/

» WordPress Shortcode for HTML5 Video

Options:• Poster• Loop• Autoplay• Preload• Height• Width

» Video Transcoding

How to convert videos from one format to another?

Amazon Elastic Transcoder

Miro Video Converter is an open source, GPL-licensed program for encoding video in multiple formats.

http://www.mirovideoconverter.com/

» Amazon Web Services

Log into Amazon AWS

http://aws.amazon.com/

Go To S3

1. Create a "bucket" (folder) for your videos

2. Upload videos to convert into folder

» Amazon Elastic Transcoder

Converts video fileshttps://console.aws.amazon.com/elastictranscoder/

1. Select your region

2. Create a Pipeline

3. Create a Preset for webm (many already exist for MP4)

4. Create a Job

5. Copy the job, make changes as needed to make a different job (including re-running the same job - copy it)

» Pipeline essentials

• Name• Input Bucket

» Preset essentials

• Container (mp4, webm, mp3, ogg)• Video Codec (H.264, vp8)• Audio Codec (AAC, vorbis, mp3)

» Job essentials

• Select pipeline (from your pipeline(s))• Input Key (file name to convert)• Output Key Prefix (folder to save transcoded

file)• Preset (select one from the available list)• Output Key (desired name of output file)

» The Process

As soon as you create a job it will run as soon as AWS can get to it.

View Jobs list to see status (in progress, completed, error)

When transcoding is complete, go to S3 and download your files (or just serve them from S3, make those videos "public" first by right-clicking on them and selecting "Make Public")

Copy successful Jobs as needed to transcode more files

» Video with transparent background• Used for “walk on videos” • Only reliable using Flash

– But Flash not supported by most mobile devices including iOS

• Webm supports transparency in Chrome:http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

» Video with transparent background

Partial solution:• Use Flash as primary video

– embed using SWFObject 2

• Provide alternate video content– Using HTML5 video as described tonight

» SWFObject 2

• JavaScript API that aims to provide a complete tool set for embedding SWF files and retrieving Flash Player related information

• Intends to unify all existing Flash Player embed methods

• Breaks the cycle of being locked into vendor specific markup and promotes the use of web standards and alternative content

• Uses unobtrusive JavaScript and JavaScript best practices

• https://code.google.com/p/swfobject/wiki/documentation

» SWFObject 2 & Javascript

Overcomes issues that cannot be solved by markup alone:

• Avoids outdated Flash plug-ins breaking Flash content by detecting the Flash Player version and determines whether Flash content or alternative content should be shown

• If no Flash plug-in is installed the HTML object element automatically falls back to its nested alternative content

• http://alistapart.com/article/flashembedcagematch

» Ron’s Contact Info

• ronz@codegeek.net• 970-227-0489• www.codegeek.net