Mozilla Firefox 所需的 Youtube iFrame javascript API 解决方案答案

【问题标题】：Youtube iFrame javascript API solution needed for Mozilla FirefoxMozilla Firefox 所需的 Youtube iFrame javascript API 解决方案
【发布时间】：2014-01-14 19:39:49
【问题描述】：

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

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 上运行吗？

【问题讨论】：

你用 Firebug 调试过这个吗？如果你在谷歌上搜索onYouTubeIframeAPIReady，那么调试类似行为的人会获得很多成功。你看过这些链接吗？
我浏览了 Google 的参考资料 developers.google.com/youtube/iframe_api_reference，但没有找到我需要的东西。是的，我正在搜索其他帖子，但同样没有多少帮助。
Java 控制台给出了相当多的错误。由于我不精通javascript，因此找不到解决方案。特别是在不同的浏览器上有不同的行为对我来说是一个复杂的话题。

标签： javascript html iframe youtube-api

【解决方案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 链接；它本身并没有被弃用，但它非常不受欢迎（更不用说不利于可访问性）。相反，您应该：

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

【讨论】：

谢谢！我已经测试了您的建议，它确实有效！你节省了很多时间！真的谢谢！