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 am using this HTML code with JavaScript for appropriate callbacks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>video test</title>
<script type="text/javascript">
function errorEncountered()
{
alert('Found error');
}
function loadingCompleted()
{
alert("loading completed");
//document.getElementById('youtubeObject').onerror="errorEncountered()";
//alert(document.getElementById('youtubeObject'));
}
function clickCompleted()
{
alert("Clicked on embedded object");
}
</script>
</head>
<body >
<div>
<object
id="youtubeObject"
type="application/x-shockwave-flash"
data="http://asdfasdf"
width="643"
height="400"
onload="loadingCompleted()"
onerror="errorEncountered()"
onclick="clickCompleted()">
<param name="movie" value="http://asdfasdf" />
<param name="onError" value="errorEncountered()" />
<!-- <param name="onload" value="loadingCompleted()" /> -->
<param name="allowScriptAccess" value="always" />
<param name="enablejsapi" value = "1" />
<p>
Couldn't load the video
</p>
</object>
</div>
<!-- document.getElementById('youtubeObject').onerror="errorEncountered()"; -->
<!-- document.getElementById('youtubeObject').addEventListener('onerror',function(){alert('error playing video')},true); -->
</body>
</html>
<!-- Actual Youtube URL "http://www.youtube.com/v/J_DV9b0x7v4" -->
Replacing the erroneous URL with the actual YouTube URL plays the video. But erroneous URL should trigger the JavaScript functions, that's not happening.
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?I tried with embed tag, but there is no scope of attaching onerror and onload handlers using embed tag.
Is there a way to trigger JavaScript functions from within HTML (using embed or object technique) whenever video loading / playing fails?
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.
Detect <embed> tag failing to load video
http://www.webdeveloper.com/forum/showthread.php?t=590
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:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>video test</title>
<script type="text/javascript">
function errorEncountered(event)
{
alert('Found error');
}
function errorFound()
{
alert('Found error');
}
</script>
<script type='text/javascript' src='http://www.sandeshkadur.com/wp-content/themes/Gaia/js/video.js?ver=1.0'></script>
</head>
<body id="mainBody">
<iframe id = "youtube_vid" src="http://player.vimeo.com/video/28723846?color=ffffff" frameborder="0" width="640" height="360"></iframe>
<!-- From https://groups.google.com/forum/#!msg/youtube-api-gdata/myLe-SdMZ6w/tziw7W2LBv4J -->
<!-- <iframe id="youtube_vid" src="asdfasdf"></iframe> -->
<script>
var player = document.getElementById("youtube_vid");
new YT.Player(player, {
events: {
'onStateChange': function(){console.log(arguments)},
'onError': errorEncountered
}
});
</script>
</body>
</html>
This though it plays the video properly, it dows not get error callbacks for Youtube links atleast!
No comments:
Post a Comment