Am trying to play YouTube and other videos by embedding it in the HTML source for displaying them in iOS.
Both <embed> and <object> technique works, but none of them are capable of calling callback functions when the video fails to play or if the URL passed to it is erroneous (and hence it could not play it).
I have checked the documentation of <object> and the corresponding events. The <object> tag docs says that the events it responds to does not has onerror or onload. But on the other hand, the onerror event object docs state that it is supported by <img>, <object>, <script> & <style> tags.
So, I tried plugging in "onerror" event with both passing it as a <param> to the <object> tag so that the plugin would handle it and alternatively, also tried it as a attribute of <object> tag (just trying my luck). The "onclick" attribute of object does respond but not the "onerror" and "onload".
Though my question is, why doesn't the <param> passed to the plugin with onerror and onload would not trigger when a erroneous URL is passed to it?
PS: I have stumbled upon some links discussing this issue, but none of them end up with a solution, that's why I started this new question, and I am doing this for a iOS-specific case.
Thanks for any suggestions & help.
Additions: The alternative content loading in the tags between <object> & </object> will display the content in iPad simulator, but not on the device itself. Even this is one of the puzzles I am finding hard to crack.
PS: I had already tried the method, for youtube specific I have tried adding the onError callback, but it never triggers! Have used the normal youtube specified way where we can plug in onError callback for youtube: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
Problem with the above is, we have to create a YT.Playerand set the videoID to the object. This would make it impossible to play videos from other sources. So used a slightly unconventional way:
This though it plays the video properly, it dows not get error callbacks for Youtube links atleast!
Use the new <iframe> embed code:
<iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
YouTube will detect what platform the user is using and serve the appropriate code, i.e. Flash for desktop users, <video> for iOS, etc.
You can find this embed code (in any YouTube video page) by clicking on the Share button, then the Embed button.
Update: You are not going to find a general solution that will play any video from any provider on iOS devices. The provider has to specifically encode the video so that is can be played by the <video> element in Safari.
Find the embed code for every video site you support (not the FLV source URL, the embed code that the site gives to users).
If the site uses <iframe> then they probably support playback on iOS. Use this code verbatim.
If the site uses a Flash player, use SWFObject to embed the video instead of their <embed> code. If SWFObject detects that the browser does not support Flash, it can show some alternate content instead (e.g. a message like "Sorry, you need to have Flash to view this video").
Use a giant switch statement:
switch (videoType): case 'YouTube': // use YouTube iframe code break; case 'Vimeo': // use Vimeo iframe code break; // ...on and on... default: // use SWFObject to embed }
Try the following <iframe id="frame" title="Youtube Video" width="320" height="194" scrolling="no" src='http://www.youtube.com/embed/J_DV9b0x7v4' frameborder="1"></iframe> . This works well in desktop and in ipad. J_DV9b0x7v4 is the video you want to play. Check the demo from http://jsfiddle.net/AAUgG/ in iOS. This should solve the purpose as you desired.