为什么我的播放列表不起作用？答案

【问题标题】：Why won't my playlist work?为什么我的播放列表不起作用？
【发布时间】：2010-08-26 07:30:30
【问题描述】：

在Flowplayer forums上交叉发布，但那里还没有回复，所以我希望这里有人能提供帮助。

我在使用播放列表插件时完全没有成功。我已经密切关注http://flowplayer.org/plugins/javascript/playlist.html 的示例，并且我得到了初始剪辑，但播放列表插件似乎没有注册。视频加载并播放，因此 FlowPlayer 正确加载，但播放列表未将任何功能附加到我的播放列表对象。

我确认播放列表脚本正在加载：我将alert("playlist!"); 添加到flowplayer.playlist-3.0.8.js 的顶部，就在初始注释块之后和函数代码开始之前。当我加载我的网页时，我看到了警报。无论是使用脚本的缩小版还是普通版，以及使用flowplayer() 或$f() 调用flowplayer 函数，我都会得到相同的结果。我正在使用 flowplayer 3.2.3 和 playlist 3.0.8。

这是一个非常简单的静态页面，它尝试在画廊中呈现 FlowPlayer 和两个剪辑：FlowPlayer 出现，但单击任一画廊链接会将当前页面替换为直接在浏览器窗口中播放的视频，而不是让我留在 HTML 页面上并在 FlowPlayer 实例中播放视频。

如果我向 FlowPlayer 调用添加配置参数并提供默认剪辑，则该剪辑会播放，但画廊链接再次将我带到原始剪辑，而不是将剪辑推送到 FlowPlayer。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test flowplayer</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="/_library/script/flowplayer/flowplayer-3.2.3.min.js" type="text/javascript"></script>
    <script src="/_library/script/flowplayer/flowplayer.playlist-3.0.8.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="player" style="display: block; width: 776px; height: 432px;"></div>
    <div id="gallery">
        <a href="/resources/video/Empowerment_TV30_776.mp4">video 1</a>
        <a href="/resources/video/Commercial_776.mp4">video 2</a>
    </div>
    <script type="text/javascript">
        $(function () {
            $f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf")
            .playlist("gallery");
        });
    </script>
</body>
</html>

知道我做错了什么吗？任何帮助表示赞赏，如果您需要更多详细信息，请告诉我。

谢谢！ - 值

【问题讨论】：

标签： javascript flowplayer playlist

【解决方案1】：

$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf").playlist("gallery");

也许？

.playlist() 不是$(function () {}) 的函数

【讨论】：

是的，贾斯汀也指出了这一点。修复了它，JavaScript 错误消失了，但仍然没有播放列表功能。

【解决方案2】：

$(function () {})

是您为load event 注册事件处理程序的方式。因此，在浏览器触发load 事件之前，其中的代码不会执行，并且可能该插件尚不可用。

另外，您没有密切关注教程。有的代码是这样的

$(function() {
    // setup player without "internal" playlists
    $f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.3.swf", {
        clip: {baseUrl: 'http://blip.tv/file/get'} 
    // use playlist plugin. again loop is true
    }).playlist("div.petrol", {loop:true});
});

请注意，.playlist 是在 $f() 返回时调用的，而不是在 $(function(){...}) 上调用的。

【讨论】：

我也是这么想的，也试过了；刚刚用 $(function () { $f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf").playlist("gallery"); }); -- 现在，我没有收到抱怨“播放列表不是函数”的 JavaScript 错误，但我也没有获得播放列表功能——单击播放列表链接将 MP4 直接加载到窗口而不是播放器中。至于插件是否可用，我认为脚本调用是同步的，在加载 HEAD 中引用的脚本之前我们不会访问我的代码？
我修复了移动 .playlist() 调用以链接 $f() 调用的问题，并删除了对 JavaScript 错误的引用。仍然没有获得任何播放列表功能。

【解决方案3】：

好的，已修复。

许多示例使用播放列表容器上的类。在使用类的示例中，播放列表函数被传递一个 CSS 选择器——通常类似于 playlist("div.gallery")

我将标记更改为使用类，将参数更改为 playlist() 为完全限定的 CSS 选择器，它可以工作！！！

现在，我不想使用类——我只有一个播放列表元素，所以我想使用 ID。我将标记改回了 ID：

<div id="gallery">
    <a href="video1">video1</a>
    <a href="video2">video2</a>
</div>

并将调用者更改为对 ID 使用 CSS 选择器：

playlist("div#gallery");

这也有效！

最后，我想知道是否需要指定具有播放列表 ID 的元素，但我不需要——我可以只给它一个 CSS ID 选择器：

playlist("#gallery");

我认为我的问题是，使用主 flowplayer 脚本，您可以在没有 . 或 # 限定符的情况下处理占位符元素，例如 $f("player")；而不是$f("#player");。但是播放列表插件比较挑剔，必须使用限定符。

一个角色的所有痛苦！

【讨论】：