脚本在 JSFiddle 中有效，但在实际中无效答案

【问题标题】：Script works in JSFiddle but not on actual脚本在 JSFiddle 中有效，但在实际中无效
【发布时间】：2015-08-09 04:48:47
【问题描述】：

我有一个脚本（也使用 froogaloop2 https://developer.vimeo.com/player/js-api）来更改 vimeo vid 上的播放按钮。它在 JSFiddle 中工作，但无法在我的实际站点上工作。按下播放按钮不做任何事情，视频根本不播放。我的脚本是这样组织的，在<header> 标签中。播放/暂停脚本位于底部<body> 标签之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script type="text/javascript"  src="js/TweenMax.min.js"></script>
<script type="text/javascript"  src="js/remodal.min.js"></script> 
<script type="text/javascript" src="js/froogaloop2.min.js"></script>

我的完整代码：https://jsbin.com/fawowaleci/edit?html,css,output
视频脚本：https://jsfiddle.net/uxhxdcwp/5/
内部模态：https://jsfiddle.net/qhrmtass/14/

播放/暂停脚本：

$(function () {
var iframe = document.getElementById('video');
var player = $f(iframe);

player.addEvent('ready', function () {
    player.addEvent('finish', onFinish);
});

$('.playpause').click(function () {
    player.api('paused', function (paused) {
        if (!paused) {
            player.api('pause');
            $(".playpause").removeClass('pause');
        } else {
            player.api('play');
            $(".playpause").addClass('pause');
        }
    });
});

function onFinish(id) {
    $(".playpause").removeClass('pause');
}

});

更新：按照建议，但不行。我觉得它的模式代码搞砸了？

【问题讨论】：

@Vidul 我需要一些魔法！ :)
可能是因为与安全相关的沙盒问题。
@user2252219 是您在本地开发机器上的实际站点，还是我们可以在某个地方看到它？
@jcuenod 它现在只是本地的。也许我会直接发布它，看看问题是否仍然存在。
@user2252219 但有一个大红色块表示：“您需要在 Web 服务器上运行，而不是直接在浏览器中打开文件。Flash 和 JS 安全限制将阻止 API在本地运行时停止工作。”

标签： javascript jquery html

【解决方案1】：

您看到自己的代码在 JSBin 上运行良好而不是在本地运行的主要原因有两个：

如果您右键单击输出元素并查看其结构，您会发现所有脚本都在开始和结束正文标记内运行，这与您编写代码的方式相反。
我假设您根据查看 Vimeo API page 上的文档整理了您的示例。请注意页面顶部的红色框，表示您将无法在本地运行它。将以下代码托管在 Web 服务器上，您将能够看到它按预期执行。

一般来说，最好将所有标签放在<head></head> 标签或<body></body> 标签中。有关这方面的大量信息和意见，请参阅Is it wrong to place the <script> tag after the </body> tag? 的 cmets 中的讨论。

我已在https://jsbin.com/mojopalode/edit?html,css,output 为您整理了一个工作示例（可在我的 Web 服务器和 JSBin 中使用）。

编辑：为了解决您附加的图片，看起来您仍在桌面上运行它。请参阅我在上面提出的第 2 点，了解为什么这将继续对您不起作用。如果你把它放到网络服务器上（正如我测试过的那样），它应该可以正常工作。

【讨论】：

@Marcos Dimitrio 我和你一样设置了它，但没有。我在 OP 中添加了一张图片。 :)
其实，@Xaniff 已经回答了这个问题，我只是对其进行了编辑以修复头部/身体标签。
@Xaniff Ahhhh 我明白了。我误解了你。嗯不错！谢谢！ :)

【解决方案2】：

你应该把脚本放在body标签之后或者在$(document).ready({})上初始化变量和监听器；

通过查看您的代码，我可以看到的唯一问题是您的脚本在实际元素呈现之前运行，因此它不会将任何侦听器附加到元素。

【讨论】：

我认为所有脚本都需要在 /body 之前？
并非如此，这实际上取决于您在脚本中执行的操作。
只是试了一下，但什么也没做。按钮仍然没有做任何事情。 :(