【发布时间】:2012-06-14 07:50:39
【问题描述】:
我正在尝试通过将 YouTube 和其他视频嵌入到 HTML 源中以在 iOS 中显示它们来播放它们。
<embed> 和 <object> 技术都有效,但当视频播放失败或传递给它的 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 <object> 和corresponding events。 <object> 标签文档说它响应的事件没有 onerror 或 onload。
但另一方面,onerror event object 文档声明它受到<img>、<object>、<script> 和<style> 标签的支持。
所以,我尝试插入“onerror”事件,同时将其作为<param> 传递给<object> 标签,以便插件处理它,或者,也尝试将它作为<object> 标签的属性(只是试试我的运气)。对象的“onclick”属性会响应,但不会响应“onerror”和“onload”。
虽然我的问题是,为什么 <param> 不通过 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
感谢您的任何建议和帮助。
补充:
在<object> 和</object> 之间的标签中加载的替代内容将在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