jPlayer 播放列表中的图像答案

【问题标题】：Image in jPlayer playlistjPlayer 播放列表中的图像
【发布时间】：2020-04-20 17:32:48
【问题描述】：

我正在开发 jplayer，但我想将图像添加到播放列表中，即在海报 URL 中。所以，基本上我希望点击图像来显示或播放歌曲，而不仅仅是文本。

以下是我从 jplayer 演示中复制的代码。但我没有找到任何可以针对每首歌曲将图像添加到播放列表的解决方案。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../dist/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [
        {
            title:"Cro Magnon Man",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
            oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
            poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
        }
    ], {

        play:function(a){
            console.log(a.jPlayer.status.media.poster);   
        },
        swfPath: "../../dist/jplayer",
        supplied: "oga, mp3",
        wmode: "window"
    });
});
//]]>
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-playlist">
        <div class="jp-gui jp-interface">
            <div class="jp-controls">
                <button class="jp-previous" role="button" tabindex="0">previous</button>
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-next" role="button" tabindex="0">next</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
            </div>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-controls">
                <button class="jp-mute" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
            </div>
            <div class="jp-toggles">
                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
            </div>
        </div>
        <div class="jp-playlist">
            <ul>
                <li>&nbsp;</li>
            </ul>
        </div>
    </div>
</div>
</body>

</html>

【问题讨论】：

标签： javascript jquery jplayer

【解决方案1】：

将脚本中的标题更改为以下。添加内联代码时避免换行，这会破坏js

 title:"<div> <button onclick='location.href=\"https://miltonkeyneswebsitedesign.com\";' style='padding: 0px; margin: 0px'> <img align='top' src='https://via.placeholder.com/150'></button > Cro Magnon Man </div> ",

【讨论】：