Flowplayer播放列表插件标题中有特殊字符的问题

Flowplayer playlist plugin issues with special characters in title

本文关键字：特殊字符 问题 播放列表 插件 标题 Flowplayer      更新时间：2023-09-26

我有一个播放列表的页面上的流播放器。我遇到的问题与轨道有标题，包括特殊字符。目前我有下面的代码，工作良好:

$(function(){
    $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
        clip: {
            baseUrl: "http://localhost/gbc/"
        },
        playlist: [
            {   url: "media/20140724_agoodsong.mp3",
                name: "20140724_agoodsong.mp3",
                title: "this title works",
                class: "audio",
                id: "3"
            }
        ]
    });
    $f("player").playlist("div.playlist:first", {loop:true});
});

然而，当我在标题中放入一个特殊字符时，它就不起作用了，比如title: "this doesn't work"。我看不出有什么错误;在开发人员工具控制台或Apache服务器日志中没有任何内容。一切显示正常，只是当我点击播放歌曲时，播放器变黑了，什么也没发生。我试过在它前面放回斜杠来逃避它，像这样的title: "this still doesn''t work"，但它没有改变任何东西。这就是什么让我认为它与Flowplayer播放列表插件处理它的方式有关。因为它在JavaScript中获取这些值，并将它们插入html中的模板中，如下所示:

<div class="playlist">
    <ul class="${class}">
        <li>
            <img data-name="${name}" class="audio" src="images/delete.png" id="${id}" />
            <a href="${url}">
                ${title}
            </a>
        </li>
    </ul>
</div>

这里是一个FIDDLE，显示了问题。目前它可以工作，但在标题中添加任何类型的特殊字符，它就会停止工作。即使为撇号添加&#39;等html代码也会阻止它工作。

有谁知道如何在标题中加入特殊字符吗?

所以我最终通过用unicode转义特殊字符来让它工作。因此，对于撇号，我在这里使用'u2019。

$(function(){
    $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
        clip: {
            baseUrl: "http://localhost/gbc/"
        },
        playlist: [
            {   url: "media/20140724_agoodsong.mp3",
                name: "20140724_agoodsong.mp3",
                title: "this title work'u2019s",
                class: "audio",
                id: "3"
            }
        ]
    });
    $f("player").playlist("div.playlist:first", {loop:true});
});

你可以看到上面的代码在这个FIDDLE中工作。

虽然这解决了我最初的问题，但在我的情况下，这些标题是用户输入，因此我必须找到一种方法来查找并将特殊字符转换为它们的unicode等效字符。在谷歌上搜索了很多之后，我没有找到任何具体的东西，所以我尝试了一种不同的方法。我没有使用flowplayer文档使用的模板，只是自己在html中打印出播放列表。所以现在在JavaScript中，我只是为flowplayer设置了基础url，并实例化了播放列表插件。

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
    clip: {
        baseUrl: 'http://localhost/gbc/'
    }
});
$f("player").playlist("div.playlist:first", {loop:true});

然后在我的PHP脚本中，我自己循环创建每个播放列表项，使用与我开始使用的模板相同的格式。

while ($row = mysqli_fetch_assoc($result))
    {
        $id = $row['id'];               
        $name = $row['name'];
        $title = stripslashes($row['title']);
        $type = $row['type'];
        $class = "audio";
        if (strpos($type,'video') !== false) {
            $class = "video";
        }
        print "<ul class='$class'>
                <li>
                    <img data-name='$name' class='deleteAudio' src='images/delete.png' id='$id' />
                    <a href='media/$name'>
                        $title
                    </a>
                </li>
              </ul>";
}

然后在页面文件中包含这个脚本来打印播放列表

<div class="playlist">
    <?php include "phpscripts/getAudio.php"; ?>
</div>

不确定这是否是最好的方法，但它对我有效!

相关文章：