Question

我正在尝试使用javascript进入Youtube iFrame API。哈维尔提供了一个很好的例子：

http://poselab.com/youtube-javascript-player-api/

这里提供了更简单的演示示例：

http://poselab.com/contenidos/youtube-api/youtube-api-with-iframe.html

源代码如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube JavaScript Player API with iframe</title>

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

<script>    
    //create the player object
    var player = {};

    //add functions to player on ready
    function onYouTubeIframeAPIReady() {
        player.ytcplayer1 = new YT.Player('ytcplayer1');
    }
</script>

</head>
<body>
    <iframe id="ytcplayer1" type="text/html" width="570" height="321" src="http://www.youtube.com/embed/NvQBJDeV6G4?&amp;autoplay=0&amp;theme=dark&amp;enablejsapi=1" frameborder="0"></iframe>

    <p class="controls">
        <a href="javascript: player.ytcplayer1.playVideo();">Play</a>
        <a href="javascript: player.ytcplayer1.pauseVideo();">Pause</a>
        <a href="javascript: player.ytcplayer1.stopVideo();">Stop</a>
    </p>

</body>
</html>

示例非常好，非常清楚。但它适用于Chrome，但不适用于Mozilla Firefox。我没有在FireFox上播放youtube视频，而是让所有页面都消失了，这种输出：

[object Object]

有人可以建议如何重写javascript代码，以便它也能在Firefox上运行吗？

Answer 1

实际上，Firefox正确处理代码并且基于webkit的浏览器没有正确实现规范...当一个锚元素的href属性不是当前页面的URL片段时，它应该是根据提供的协议解析URL，并在窗口中加载生成的文档（如果有的话）或将其传递给外部程序处理（取决于协议的内容）。因此，当您单击引用带有javascript：协议的URL的锚点时，在这种情况下，生成的文档是一个对象（因为这就是这些特定的YouTube API调用返回的内容），这就是Firefox向您显示的内容。

Webkit的非标准行为是，当遇到具有javascript协议的href属性时，默认不返回任何内容到浏览器窗口。要在Firefox中实现相同的行为，您的代码应为：

<p class="controls">
    <a href="javascript:player.ytcplayer1.playVideo(); void(0);">Play</a>
    <a href="javascript:player.ytcplayer1.pauseVideo(); void(0);">Pause</a>
    <a href="javascript:player.ytcplayer1.stopVideo(); void(0);">Stop</a>
</p>

最后要提到的一点是，在实践中你应该尽量避免像这样完全没有任何javascript链接;它本身并没有被弃用，但它非常不受欢迎（更不用说对可访问性有害）。相反，你应该：

使用anchor元素的onclick属性来执行javascript或
使用外部JavaScript代码（以便分离您的功能和内容）将所需操作绑定到文本链接。

Mozilla Firefox需要Youtube iFrame javascript API解决方案

1 个答案: