Secure HTML5 Video Player

Firefox currently does not support the MPEG4/h.264 video format that most other browsers and devices support. Most versions of Firefox support the OGV (Ogg Vorbis Theora) video format, and some versions support the WEBM video format. To achieve the greatest amount of compatiblity, you must provide videos in both OGV and MP4. (WEBM is not necessary because every browser that supports WEBM playback supports one of the other video formats as well.) The plugin automatically detects the presence of multiple video file formats as long as they have the same file name (differing by file extension), and as long as they're placed in the same video directory location of whatever way you're serving the videos. If you're self serving the a video named "myvid.mp4" from a directory, you'll want to have the short code be: [video file="myvid"] and then you will need to:

1. Make sure the MP4 video is encoded as "MPEG4/h.264". There are other types of MPEG4, but only this one type is defined as the video supported codec supported by HTML5 compliant browsers.
2. Create an OGV version of the video using your favorite video conversion program. (We usually use Miro Video Converter).
3. Place the OGV video in the same video directory as the MP4 file, and name it "myvid.ogv"
4. Make a placeholder image in PNG or JPEG format. We usually take a capture of the representative frame of the video.
5. Name the PNG or JPEG placeholder image: "myvid.png" or "myvid.jpg", respectively, and place it in the same video directory.
6. Test the page where you input the short code and make sure the video plays on all browsers.

If your video is not playing in IE, then its likely your mp4 file is not in the proper encoding scheme compatible with HTML5 video. It has to be in MP4/h.264 format. See: http://diveintohtml5.info/video.html for more information.

Besides the requirement of the video being MP4/h.264 format, some versions of Safari, especially those running on iOS, have limitations placed on the maximum allowed framerate for the video encoding. This is because the decoding is done using a specialized processor in the device with a given, set limitation. As a rule of thumb, 30 FPS should not be exceeded in the encoding process. If there are device presets available in the video encoding software (as there is in Handbrake, Miro, or Adobe Video Encoder), utilizing those presets would ensure compatibility.

We use the Secure HTML5 Video Player in conjunction with another plugin that handles user accounts and page permissions granted to specific users. If the user has access to a page, they then have access to the video embedded on that page with a secure, randomized access URL created at the moment the page is served. The URL to the media acts as a temporary license for viewing the video on the page for a set limited amount of time. In this way, only members can see the videos, and non-members will not know how to access the videos, even if they know the file names. Another option is to use the built in features of Wordpress to password protect the post where the video short-tag is used. Although this means that users that are granted access to a page have download permission for the videos in question, that would be the case for any video embedding technology, and certainly is the case for every HTML5 embedded video. Anything that can be played on a computer screen can be recorded to a digital file for later playback with the right software or plugin. We personally don't have a problem with them saving the mp4, if they are on a page that they are allowed to be on. For some websites, this could be viewed as a desirable feature.

1. Sign on to aws.amazon.com and go to the S3 page. If you haven't already done so, create a bucket with a specified region, and in the bucket, create a directory where all the videos will reside.
2. Go to the top level bucket list in S3 and click on the magnifying glass icon to the left of the bucket name. This should reveal the properties of the bucket.
3. In the properties of the bucket, make note of the "Region”. This is the physical location of the bucket in Amazon's network and maps to what S3 server you're using. Even if you think you've created the bucket with a certain region, sometimes that's not the case because Amazon had a bug before where it would create a bucket in the default region even if you specified a different one.
4. If your intention is to secure the videos, make sure the permissions on the bucket don't have a permission level that lets everyone download the files in the bucket.
5. Under the top user menu, select "Security Credentials” and then "Access Keys”. If you haven't done so already, create an access key and secret. If you forgot what the secret was, you will have to create a new one and write it down somewhere.
6. In the WordPress admin settings, navigate to Settings -> Secure HTML5 Video Player, and then to the S3 tab.
7. Check on the "enable simple storage service” setting.
8. Under S3 server, select the region that matches the bucket region in step 3.
9. Under Access Key and Secret Key, copy and paste in the values from step 5.
10. Under S3 bucket, paste in the name of the bucket from step 1.
11. Under S3 video directory, paste in the name of the directory from step 1.
12. Save the options.
13. In the S3 console (or with whatever program you use to upload files to S3), upload your video files the the S3 bucket video directory. For any given movie, the base file name should be the same across all of the different video formats you want to support and the same as the poster image. For ex: if you have a video name "myvid.mp4″ you should also have "myvid.ogv” and "myvid.jpg” to support Ogg and a JPG poster image. These media files should all have the same aspect ratio as well. All media files of the same video should be uploaded so that they're in the same directory.
14. Make note of the directory where you uploaded the video. If you uploaded it to "video/myvid.mp4″ and "video” was your S3 video directory, then the name of the video "file”, as it is referred in the shortcode later, is "myvid”. You can also upload to a subdirectory, but then the name of the video file has to have the subdirectory's path prefixed to it. So if you uploaded it to: "video/a/b/c/myvid.mp4″ then the video file is "a/b/c/myvid”.
15. In a WordPress post or page, insert in the short code of the video. From step 14, this is: [video file="myvid"] Save the post. The video should now be playable when you view the post in the website.