Question

我试图通过将其嵌入HTML源代码来播放YouTube和其他视频，以便在iOS中显示它们。

<embed>和<object>技术都有效，但当视频无法播放或传递给它的网址错误时，其中任何一个都无法调用回调函数 （因此无法播放）。

我正在使用此HTML代码和JavaScript进行适当的回调：

<!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" -->

使用实际的YouTube网址替换错误的网址会播放该视频。但错误的URL应该触发JavaScript功能，而这种情况并没有发生。

我检查了documentation of <object>和corresponding events。 <object>代码文档说明它回复的事件没有onerror或onload。但另一方面，onerror event object文档声明它受<img>，<object>，<script>＆amp; <style>代码。

所以，我尝试插入“onerror”事件，并将其作为<param>传递给<object>标记，以便插件可以处理它，或者也尝试将其作为{的属性进行尝试{1}}标签（只是试试我的运气）。对象的“onclick”属性确实响应，但不响应“onerror”和“onload”。

虽然我的问题是，为什么在传递错误的URL时，<object>传递给带有onerror和onload的插件不会触发？

我尝试使用embed tag，但没有使用embed标记附加onerror和onload处理程序的范围。

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

PS：我偶然发现了一些讨论这个问题的链接，但是他们都没有找到解决方案，这就是我开始这个新问题的原因，而我正在针对特定于iOS的案例这样做。

Detect <embed> tag failing to load video

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

感谢您的任何建议和帮助;帮助

附加： <param>＆amp;之间标签中的替代内容加载<object>将在iPad模拟器中显示内容，但不在设备本身上显示。即使这是我难以破解的难题之一。

PS：我已经尝试过这个方法，对于youtube特定的我已尝试添加onError回调，但它永远不会触发！使用了正常的youtube指定方式，我们可以为youtube插入onError回调：https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

上面的问题是，我们必须创建一个</object>并将videoID设置为该对象。这样就无法播放其他来源的视频。所以使用了一种略微不同寻常的方式：

YT.Player

虽然它正常播放视频，但它至少没有得到Youtube链接的错误回调！

Answer 1

您在type="application/x-shockwave-flash"中定义了object tag，但您在哪里定义iOS的后备广告。如果您尝试专门定位iOS，那么为什么不使用video标记。 http://websitehelpers.com/video/html.html中提供的文档将帮助您在iOS中播放视频。iOS您需要定义video tag，否则它无法理解，或者您可以使用任何一个Flash播放器例如flowplayer，它对iOS有后备支持。您可以参考http://flash.flowplayer.org/plugins/javascript/ipad.html中的文档。如果这可以解决您的问题，请尝试告诉我

更新：

尝试以下<iframe id="frame" title="Youtube Video" width="320" height="194" scrolling="no" src='http://www.youtube.com/embed/J_DV9b0x7v4' frameborder="1"></iframe>。这适用于desktop和ipad。 J_DV9b0x7v4是您要播放的视频。查看iOS中http://jsfiddle.net/AAUgG/的演示。这应该按照你的意愿解决目的。

Answer 2

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

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

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

您可以点击“分享”按钮，然后点击“嵌入”按钮，找到此嵌入代码（在任意YouTube视频页面中）。

更新：您将找到一个可在iOS设备上播放来自任何提供商的视频的常规解决方案。提供商必须对视频进行专门编码，以便可以通过Safari中的<video>元素播放。

我建议：

查找您支持的每个视频网站的嵌入代码（不是FLV源网址，网站为用户提供的嵌入代码）。
如果网站使用<iframe>，那么他们可能支持在iOS上播放。逐字使用此代码。
如果网站使用Flash播放器，请使用SWFObject嵌入视频而不是<embed>代码。如果SWFObject检测到浏览器不支持Flash，它可以显示一些替代内容（例如“抱歉，您需要让Flash观看此视频”这样的消息）。

使用巨大的switch声明：

switch (videoType):
case 'YouTube':
    // use YouTube iframe code
    break;

case 'Vimeo':
    // use Vimeo iframe code
    break;

// ...on and on...

default:
    // use SWFObject to embed
}

<embed />或<object>标记视频播放错误处理程序 - JavaScript </object>

2 个答案: