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

3
我将尝试通过在HTML源代码中嵌入视频以在iOS设备上显示视频,包括YouTube和其他视频。
使用<embed><object>技术都可以实现,但它们都无法在视频播放失败或URL错误时调用回调函数(因此无法播放视频)。
我正在使用此带有JavaScript的HTML代码来进行适当的回调:
<!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替换错误的URL可以播放视频。但是错误的URL应该触发JavaScript函数,但这并没有发生。
我已经检查了<object>的文档和相应的事件<object>标记文档表示它响应的事件不包括onerroronload。 但另一方面,onerror事件对象文档说明它被<img><object><script><style> 标记支持。
因此,我尝试将“onerror”事件作为<param>传递给<object>标记,并尝试将其作为<object>标记的属性(只是试试手气)。对象的“onclick”属性会响应,但“onerror”和“onload”不会响应。
我的问题是,为什么在传递带有onerror和onload的<param>到插件时,当传递错误的URL时不会触发?
我尝试使用embed tag,但是使用embed标记无法附加onerror和onload处理程序。
是否有一种方法可以在HTML中从内部触发JavaScript函数(使用嵌入或对象技术),每当视频加载/播放失败时?
PS:我偶然发现了一些讨论此问题的链接,但没有一个解决方案,这就是为什么我开始提出这个新问题的原因,而且我正在为特定于iOS的情况做这件事。

检测 <embed> 标签未能加载视频

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

感谢任何建议和帮助。

补充:<object></object>标签之间的替代内容将在iPad模拟器中显示内容,但不会在设备本身上显示。这是我难以解决的难题之一。

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

以上问题是,我们必须创建一个YT.Player并将视频ID设置为该对象。这将使播放来自其他来源的视频变得不可能。因此,使用了略微不同寻常的方法:

<!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链接,它没有获取错误回调!

1
我可以告诉你为什么“它会在iPad模拟器中显示内容,但不会在设备本身上显示”。模拟器只是一个模拟器。苹果公司作弊,基本上将您的iOS调用转换为可以处理Flash和其他内容的Mac OS调用。更糟糕的是,没有机制来警告您当您在模拟器上执行iOS设备无法执行的操作时。虽然显而易见的是“模拟器!=真实设备”,但在许多方面确实如此。您可以让模拟器执行许多真实设备无法或不会执行的操作。 - Russ
2个回答

1
使用新的<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源URL,而是网站提供给用户的嵌入代码)。

  • 如果该网站使用<iframe>,则它们可能支持在iOS上播放。直接使用此代码。

  • 如果该网站使用Flash播放器,请使用SWFObject来嵌入视频,而不是他们的<embed>代码。如果SWFObject检测到浏览器不支持Flash,则可以显示一些替代内容(例如“抱歉,您需要有Flash才能查看此视频”)。

  • 使用一个巨大的switch语句:

    switch (videoType):
    case 'YouTube':
        // 使用YouTube iframe代码
        break;
    
    case 'Vimeo':
        // 使用Vimeo iframe代码
        break;
    
    // ...继续...
    
    default:
        // 使用SWFObject进行嵌入
    }
    

感谢您的输入,请查看我添加到问题中的细节。我已经尝试过<iframe>方法,而为什么它不适合我已经在我的新编辑中解释了。 - Raj Pawan Gumdal

1
你正在定义type="application/x-shockwave-flash"object tag中,但是你在哪里定义了iOS的回退。如果你想要特别针对进行目标设置,为什么不使用video标签呢?http://websitehelpers.com/video/html.html中提供的文档将帮助您在中播放视频。对于,您需要定义video tag,否则它无法理解,或者您可以使用任何一个具有回退支持的Flash播放器,例如flowplayer。您可以参考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>。这在桌面iPad上都能很好地工作。J_DV9b0x7v4是您想要播放的视频。在iOS中查看http://jsfiddle.net/AAUgG/的演示。这应该可以解决您所需的问题。


一定会尝试你建议的方法,在此之前,我忘记在问题里提到了一个重要的事情。如果我使用<video>标签,那么问题就是我不能使用YouTube的URL来播放视频,因为YouTube的流媒体URL被包含在指向该特定页面的URL内,而且YouTube的流媒体URL被隐藏起来,只有在YouTube页面本身才能访问。 - Raj Pawan Gumdal
<video>标签无法直接播放Youtube的URL,所以我想我们不能使用<video>标签,因此也不能采用HTML 5方法。如果我有任何错误,请纠正我。 - Raj Pawan Gumdal
你可以使用iframe或QuickTime播放器在桌面上播放,但在iPad上无法使用。因此,对于iPad,您需要传递URL,以便它使用YouTube播放器打开。我在iPad的Safari地址栏中尝试了您问题中的URL,它在应用程序中打开了YouTube链接URL并在那里播放,而在桌面上则不行。因此,您不能使用任何播放器,而是需要将URL传递给应用程序进行播放。 - user850234
1
你需要订阅onError事件(YouTube iframe API),并检查返回值。 - steveax
2
@Raj 如@jeffery-to所指出的,您将不得不单独处理每个来源的错误事件 - 没有通用解决方案来处理来自YouTube,Vimeo等的视频。 除此之外,似乎您甚至没有加载YouTube iframe API JavaScript,并且在您的评论中提到的Google组线程之后,只有在尝试“playVideo”事件之后才触发错误事件。 我无法让YouTube js在fiddle中运行良好,但这里是演示 - steveax
显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接