Well to get back to the roots of the site (tech) for a bit, here is something very interesting that happened while trying to force Limelight to use the HTML5 player on a site. One caveat is that Firefox does not support MP4 which is what Limelight uses when Flash is not available. Currently at the time of me writing this article Firefox does not support MP4, however they should be supporting this very soon, and are just awaiting a 3rd party package first.
Limelight will do everything in its power to try to force you to use their methods for showing video, which means 90% of the time it will use flash.
For this to work you will need a couple of things first.
- Limelight account with an uploaded video that you want to see always played in an HTML5 video player
- A browser that can override the user agent (Chrome is best for this)
1. Goto the URL http://support.video.limelight.com/sample-code/playerCode-demo.html
(Limelight Demo Page Local copy)
Limelight was nice enough to give a demo of their player and part of this demo shows how it degrades to the HTML5 player.
2. View the page source make a copy of the page and recreate the file somewhere on your computer.
3. Make sure the file that you just created on your computer is viewable, and that the flash video works with their sample.
4. The most important part of the code to change is this line
<param value=”deepLink=true&playerForm=LVPPlayer&channelId=ab6a524c379342f9b23642917020c082” name=”flashVars”>
Depending on whether you are using the channelId or mediaId it still works the same. Just replace channelId with mediaId. Find the video that you up loaded to limelight and replace ab6a524c379342f9b23642917020c082 with the code from within limelight. You can get this selecting the video you want and clicking “Embeded Code”. You will probably have to scroll the window to find the code.
5. Change the HTML param to match what you have in Limelight
Example: My videos channelId is 6d4242bd0cf94083a0195bfc2083e46 and I would change the line in my HTML editor to:
<param value=”deepLink=true&playerForm=LVPPlayer&channelId=6d4242bd0cf94083a0195bfc2083e46″ name=”flashVars”>
Note the channel ID that I used is not a real channel ID so use your own.
6. Open Chrome and disable Flash in Chrome. Type in the URL area, chrome://plugins/
Search the list of plugins and click disabled beside Flash.
7. Within Chrome still hit “F12” function key to bring up the inspector or Right click and “inspect element”.
With the inspector open look for the settings icon (bottom right hopefully) to open the overrides.
8. Setting the user agent. Since Limelight has mainly setup HTML5 because of the lack of support within Apple on their iPad devices, it is best to set the user agent to any of the iPad selections within Chrome.
9. Now that Chrome has Flash disabled and web sites believing that you are an iPad it is time to load the HTML file, that you created previously with the new channelId/mediaId in the browser. When the video loads this time it will be to an HTML5 video player.
10. Inspect the page again (f12) and look for the “video” tags
<video controls=”” style=”position: absolute; left: 0px; width: 100%; height: 100%; display: block;” src=”http://cpl.delvenetworks.com/media/6d4242bd0cf94083a0195bfc2083e46e/90ab7c3144c94337a8b94cf2c5c56407-fce880a5606f4964a712334238719dfe/wolverine-clip_h720p.mp4“></video>
11. Copy and paste the address into your chrome browser’s URL line and you will see that the video now plays in HTML5.
Congrats you now have full access and control to your video library within LimeLight.