Question

我有一个脚本（也使用了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');
}

});

更新：按照建议但没有去。我觉得它的模态代码搞砸了吗？

Answer 1

有两个重要原因可以解释为什么您的代码在JSBin上与本地代码正常工作：

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

通常，将所有代码放在<head></head>代码或<body></body>代码中是个好主意。请参阅Is it wrong to place the <script> tag after the </body> tag?的评论中的讨论，了解有关该方面的大量信息和意见。

我在https://jsbin.com/mojopalode/edit?html,css,output为您准备了一份工作示例（适用于我的Web服务器和JSBin）。

编辑：要解决附加的图片，看起来您仍然在桌面上运行此图片。请参阅我在上面提到的第2点，了解为什么这种情况将继续无法完成。如果你把它放在网络服务器上（因为我测试它），它应该没有问题。

Answer 2

你应该在主体标记之后放置脚本或者在$（document）.ready（{}）上初始化变量和监听器;

从查看代码开始，我只能看到问题是脚本在实际元素呈现之前运行，因此它不会将任何侦听器附加到元素上。

脚本在JSFiddle中工作，但在实际上不起作用

2 个答案: