< embed>或< object>标签视频播放错误处理程序 - JavaScript [英] <embed> or <object> tag video playback error handler - JavaScript

问题描述

我想通过将其嵌入到HTML源代码中以在iOS中显示来播放YouTube和其他视频。

两者< embed& 和< object> 技术可以工作，但当视频无法播放时，传递给它的网址错误（因此无法播放）。

我将此HTML代码与JavaScript一起用于适当的回调：

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 // ENhttp：//www.w3。 org / TR / html4 / strict.dtd> 
< html> 
< head> 
< title>视频测试< / title> 
< script type =text / javascript> 
 function errorEnouble（）
 {
 alert（'Found error'）; 
} 
 function loadCompleted（）
 {
 alert（loading completed）; 
 //document.getElementById('youtubeObject'）。onerror =errorEnouble（）; 
 //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 =errorEnought（）
 onclick =clickCompleted（）> 
< param name =movievalue =http：// asdfasdf/> 
< param name =onErrorvalue =errorEnouble（）/> 
<！ - < param name =onloadvalue =loadCompleted（）/> - > 
< param name =allowScriptAccessvalue =always/> 
< param name=enablejsapivalue =1/> 
< p> 
无法加载视频
< / p> 
< / object> 
< / div> 
 
<！ -  document.getElementById（'youtubeObject'）。onerror =errorEnouble（）; - > 
<！ -  document.getElementById（'youtubeObject'）。addEventListener（'onerror'，function（）{alert（'error playing video'）}，true）; - > 
 
< / body> 
< / html> 
 
<！ - 实际的YouTube网址http://www.youtube.com/v/J_DV9b0x7v4 - > 
  

将实际YouTube网址替换为错误的网址会播放视频。

我已经检查过 < object> 和相应的事件。 < object> 标记docs说，其响应的事件没有 onerror 或 onload 。
但另一方面， onerror事件对象文档声明它是由< img> ，< object> ，< script> code>& < style> 标签。

因此，我尝试插入onerror事件， < param> 到< object> 标记，以便插件可以处理它，作为< object> 标签的属性（只是试试我的运气）。对象的onclick属性确实响应但不响应onerror和onload。

虽然我的问题是，为什么< param> 传递给插件onerror和onload不会触发，当一个错误的URL传递给它？

嵌入代码，但是没有在error和onload处理程序上使用嵌入标签。

有办法视频加载/播放失败时，从HTML（使用嵌入或对象技术）触发JavaScript函数？

PS：我偶然发现了一些讨论这个问题的链接，他们最终得到一个解决方案，这就是为什么我开始这个新的问题，我这样做一个iOS特定的情况下。

检测< embed>标记无法加载视频

http://www.webdeveloper.com/forum/showthread.php?t=590

感谢您的任何建议和建议。

添加：
在标签中加载< object> & < / object> 将在iPad模拟器中显示内容，但不会显示在设备上。即使这是我发现很难破解的谜题之一。

PS：我已经尝试过该方法，对于youtube具体我试过添加onError回调，但是它从来没有触发！使用了正常的YouTube指定方式，我们可以插入onError callback for youtube： https：// developers。 google.com/youtube/iframe_api_reference#Loading_a_Video_Player

上述问题是，我们必须创建一个 YT.Player

code>并将videoID设置为对象。这将使其无法播放来自其他来源的视频。所以使用了一种非常规的方式：

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 // EN http://www.w3.org/TR/html4/strict.dtd\"> 
< html> 
< head> 
< title>视频测试< / title> 
< script type =text / javascript> 
 function errorEnouble（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'><脚本> 
 
< / head> 
< body id =mainBody> 
< iframe id =youtube_vidsrc =http://player.vimeo.com/video/28723846?color=ffffffframeborder =0width =640height =360> < / iframe> 
 
<！ - 从https://groups.google.com/forum/#!msg/youtube-api-gdata/myLe-SdMZ6w/tziw7W2LBv4J  - > 
<！ - < iframe id =youtube_vidsrc =asdfasdf>< / iframe> - > 
< script> 
 var player = document.getElementById（youtube_vid）; 
 new YT.Player（player，{
 events：{
'onStateChange'：function（）{console.log（arguments）}，
'onError'：errorEnarning 
} 
}）; 
< / script> 
< / body> 
< / html> 
  

虽然它播放视频正常，它不能得到错误回调的YouTube链接至少！ p>

解决方案

使用新的< iframe> 嵌入代码：

 < iframe width =420height =315src =http://www.youtube.com/embed/dQw4w9WgXcQ frameborder =0allowfullscreen>< / iframe> 
 

YouTube会检测用户使用的平台，并提供适当的代码，例如适用于桌面用户的Flash， < video> for iOS等。

您可以找到此嵌入代码（在任何YouTube视频页面）

更新：您是 strong>不会找到一个通用解决方案，将播放任何提供商的iOS设备上的任何视频。提供者必须对视频进行特殊编码，以便可以通过Safari中的< video> 元素播放。

我建议：

• 查找您支持的每个视频网站的嵌入代码（不是FLV源网址，




• 如果网站使用< iframe> 支持在iOS上回放。




• 如果网站使用Flash播放器，请使用 SWFObject 嵌入视频，而不是使用< embed> 代码。如果SWFObject检测到浏览器不支持Flash，则可以显示一些替代内容（例如，对不起，您需要让Flash观看此视频。）




• 使用巨大的开关语句：

    switch （videoType）：
   case'YouTube'：
   //使用YouTube iframe代码
   break; 
   
   case'Vimeo'：
   //使用Vimeo iframe代码
   break; 
   
   // ... on and on ... 
   
  默认值：
   //使用SWFObject嵌入
  } 
    




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!

解决方案

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
  }
  

这篇关于&lt; embed&gt;或&lt; object&gt;标签视频播放错误处理程序 - JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！