【问题标题】:<embed> or <object> tag video playback error handler - JavaScript<embed> 或 <object> 标记视频播放错误处理程序 - JavaScript
【发布时间】:2012-06-14 07:50:39
【问题描述】:

我正在尝试通过将 YouTube 和其他视频嵌入到 HTML 源中以在 iOS 中显示它们来播放它们。

&lt;embed&gt;&lt;object&gt; 技术都有效,但当视频播放失败或传递给它的 URL 错误时,它们都不能调用回调函数(因此无法播放)。

我正在将此 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 &lt;object&gt;corresponding events&lt;object&gt; 标签文档说它响应的事件没有 onerroronload。 但另一方面,onerror event object 文档声明它受到&lt;img&gt;&lt;object&gt;&lt;script&gt;&lt;style&gt; 标签的支持。

所以,我尝试插入“onerror”事件,同时将其作为&lt;param&gt; 传递给&lt;object&gt; 标签,以便插件处理它,或者,也尝试将它作为&lt;object&gt; 标签的属性(只是试试我的运气)。对象的“onclick”属性会响应,但不会响应“onerror”和“onload”。

虽然我的问题是,为什么 &lt;param&gt; 不通过 onerror 传递给插件,并且当错误的 URL 传递给它时不会触发 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

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

补充:&lt;object&gt;&lt;/object&gt; 之间的标签中加载的替代内容将在iPad 模拟器中显示内容,但不会在设备本身上显示。即使这是我发现难以破解的难题之一。

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

上面的问题是,我们必须创建一个YT.Player并将videoID设置为对象。这将无法播放来自其他来源的视频。于是用了一个稍微不合常规的方式:

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

虽然它可以正确播放视频,但它至少不会收到 Youtube 链接的错误回调!

【问题讨论】:

  • 好吧,我可以确切地告诉你为什么“[它将]在 iPad 模拟器中显示内容,而不是在设备本身上”。模拟器就是这样,一个模拟器。 Apple 作弊,基本上接听你的 iOS 电话并将它们转换为 Mac OS 电话,它可以处理 Flash 和其他事情。更糟糕的是,当您在模拟器上执行 iOS 设备无法执行的操作时,没有任何机制可以警告您。虽然很明显simulator != real device,但在很多方面都是如此。你可以让模拟器做很多真实设备不能或不会做的事情。

标签: javascript iphone html ios cocoa-touch


【解决方案1】:

使用新的&lt;iframe&gt; 嵌入代码:

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

YouTube 将检测用户正在使用的平台并提供适当的代码,例如用于桌面用户的 Flash、用于 iOS 的 &lt;video&gt; 等。

您可以通过单击“分享”按钮,然后单击“嵌入”按钮找到此嵌入代码(在任何 YouTube 视频页面中)。


更新:不会找到一个通用解决方案,可以在 iOS 设备上播放来自任何提供商的任何视频。提供者必须专门对视频进行编码,以便 Safari 中的&lt;video&gt; 元素可以播放。

我建议:

  • 查找您支持的每个视频网站的嵌入代码(不是 FLV 源 URL,即网站提供给用户的嵌入代码)。

  • 如果站点使用&lt;iframe&gt;,那么它们可能支持在 iOS 上播放。逐字使用此代码。

  • 如果网站使用 Flash 播放器,请使用 SWFObject 而不是 &lt;embed&gt; 代码嵌入视频。如果 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
    }
    

【讨论】:

  • 感谢您的意见,请检查我添加到问题的详细信息。我已经尝试过
【解决方案2】:

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

更新:

试试下面的&lt;iframe id="frame" title="Youtube Video" width="320" height="194" scrolling="no" src='http://www.youtube.com/embed/J_DV9b0x7v4' frameborder="1"&gt;&lt;/iframe&gt;。这在desktopipad 中运行良好。 J_DV9b0x7v4 是您要播放的视频。在iOS 中查看来自http://jsfiddle.net/AAUgG/ 的演示。这应该可以解决您想要的目的。

【讨论】:

  • 肯定会尝试您的建议,在此之前我忘了在问题中提及重要的事情。如果我使用
  • 是的,您不能为此使用
  • 您需要subscribe to the onError event (YouTube iframe API) 并检查返回值。
  • @Raj as @jeffery-to 注释,您必须分别处理每个来源的错误事件 - 没有通用的解决方案来处理来自 YouTube、Vimeo 等的视频。除此之外,似乎您甚至没有加载 YouTube iframe API JavaScript,并且由于您的 cmets 注释中的 google 组线程,错误事件仅在尝试 playVideo 事件后触发。我无法让 YouTube js 在小提琴中很好地播放,但是 here's a demo
猜你喜欢
  • 2014-11-23
  • 1970-01-01
  • 1970-01-01
  • 2013-11-02
  • 1970-01-01
  • 2019-01-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多