<embed> or <object> tag video playback

2020-03-25 19:18发布

站内问答 / JavaScript
2164 2 6

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!

2条回答
虎瘦雄心在
2楼-- · 2020-03-25 19:44

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.

I suggest:

  • 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
}
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2020-03-25 19:49

You are defining type="application/x-shockwave-flash" in the object tag but where are you defining the fallback for iOS. If you trying to do target iOS specifically then why not use video tag. The documentation given in http://websitehelpers.com/video/html.html will help you to play video in iOS For iOS you need to define the video tag otherwise it does not understand or you can use any one flash player like flowplayer which has a fallback support for iOS. You can refer the documentation from http://flash.flowplayer.org/plugins/javascript/ipad.html. Try and let me know if this solves your issue

Update :

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)