I spent my entire day at work today testing HTML5 players. Which included integrated third party Players. So I decided to come home and create one myself. I call it the AQ HTML5 PLAYER.
http://hisandhernews.com/aq_first_html5.html - copy and paste in a supported HTML5 browser (Chrome, Safari, IE9, FF). Right click to view source code.
- I created a simple html page with <HTML> <HEAD> <TITLE> tags open and close
- I added some CSS for the background with <STYLE> tags open and close
- I used <BODY> tags to house the <video> tags open and close
- I used <video> tags and added <source> and scr tags
- I added poster=”imagename.jpg” for Thumbnail image when video loads
- I added controls=”controls for the player controls
- I added tabindex=”0” to be able to allow the option to use keyboard to play/pause
- I added autoplay=”autoplay for playback preference
- I downloaded and utilized microconverter to convert my mp4 file to ogg and webm which are the 3 supported formats for html5
When I uploaded all the files to my Yahoo Small Business Account I was able to preview thumbnail image with player controls. However, it does not Autoplay. When it is clicked it launches in a smaller window and the Thumbnail image disappears.
DEBUGGING the issue:
Loaded in Google Chrome and hit CTRL + SHIFT + I
The Developer Debugging Console throws the below call as an error and tells me to remove it. It also advises that this is being called directly from the Server. Which means it is being called from my Yahoo Server (hence the “webhosting.yahoo” call)
Is that I will have to contact Yahoo Small Business. However, I don’t believe this is a call that can be removed. I will have to do more research on the matter. In the meantime I will find another server to host my player on to confirm if this is the only issue. The resizing is a separate issue that I am investigating as well.