如何创建多个jwplayer播放按钮答案

【问题标题】：How to create multiple jwplayer playing buttons如何创建多个jwplayer播放按钮
【发布时间】：2023-03-31 18:49:01
【问题描述】：

这是一个 jwplayer 案例。我有一个带有音乐专辑页面的网站。现在我有一个 jwplayer 播放播放列表并且工作正常，但我想要一个按曲目编号列出所有歌曲的表格和一个在每行的第一行播放歌曲的播放图标。到目前为止，我设法创建了一个播放完整播放列表的播放图标，但没有运气如何创建与歌曲数量一样多的图标，并且每个图标都播放来自播放列表的不同歌曲。

这是我想要做的表示

播放图标（歌曲 1）|曲目编号 |主打歌1 |持续时间

播放图标（歌曲 2）|曲目编号 |主打歌2 |持续时间

我的当前代码是这个，它创建一个播放播放列表的播放图标。顺便说一句，这段代码非常棒，因为它会自动播放下一首歌曲并控制主播放器的暂停/播放。本网站在 joomla 上运行。

<script>
   var playerInstance = jwplayer('container');
    playerInstance.setup({
    playlist: [{
//DYNAMICALLY GENERATED PLAYLIST
        <?php
            $album_id = $this->item->id;
// Get default database object
            $db = JFactory::getDbo();
// Get a new JDatabaseQuery object
            $query = $db->getQuery(true);
            $query = 'SELECT position, name, length, filename FROM XXX WHERE `album_id` = ' . $db->quote( (int) $album_id ) . ' ORDER BY `num` ASC LIMIT 0 , 30';
            $db->setQuery($query);
            $results = $db -> loadAssocList();
            foreach($results as $row){
            echo "file: \"/". htmlentities($row['filename']). "\", ";
            echo "title: \"". htmlentities($row['name']). "\"";
            echo "},{";
            }
        ?>  }]
//END DYNAMICALLY GENERATED PLAYLIST
    controls: false
                        });
    playerInstance.on('play', function()    {
    document.getElementById("videoPlayPause").style.backgroundPosition = "-263px -70px";
                                            });
    playerInstance.on('pause', function()   {
    document.getElementById("videoPlayPause").style.backgroundPosition = "-287px -70px";
                                            });
</script>

<br/>

<div class="videoPlayerControls playing" id="videoPlayerControls">
<button id="videoPlayPause" onclick="playerInstance.play();" onmouseout="if(playerInstance.getState() == &quot;IDLE&quot; || playerInstance.getState() == &quot;PAUSED&quot;){document.getElementById(&quot;videoPlayPause&quot;).style.backgroundPosition = &quot;-62px 0&quot;;} if(playerInstance.getState() == &quot;PLAYING&quot;){document.getElementById(&quot;videoPlayPause&quot;).style.backgroundPosition = &quot;-62px -50px&quot;;}" onmouseover="if(playerInstance.getState() == &quot;PLAYING&quot;){document.getElementById(&quot;videoPlayPause&quot;).style.backgroundPosition = &quot;-263px -70px&quot;;}if(playerInstance.getState() == &quot;IDLE&quot; || playerInstance.getState() == &quot;PAUSED&quot;){document.getElementById(&quot;videoPlayPause&quot;).style.backgroundPosition = &quot;-287px -70px&quot;;}" type="button">Play/Pause</button>

有人做过这样的事吗？

【问题讨论】：

标签： audio joomla joomla3.0 jwplayer audio-streaming

【解决方案1】：

如果您有一个加载的播放列表，您可以使用 playerInstance.playlistItem(index) 方法直接访问（播放）播放列表中的任何项目。

这将在指定的索引处开始播放播放列表项 - 请记住播放列表中的第一项的索引为 0。

因此，您应该能够将点击事件附加到每个相应的“播放图标”，它会使用递增的 index 调用此方法，以便访问关联的播放列表项。

顺便说一句：自 JW7 以来，playerInstance.getState() 将状态报告为小写字符串...

【讨论】：

【解决方案2】：

在 JavaScript 中，您只需将要播放的文件的 URL 加载到播放器中，如下所示。

<script>
    jwplayer('yourPlayerDivId').setup({
        file: 'track1.mp4'
    });
</script>

【讨论】：