Question

这是一个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>

有人做过这样的事吗？

Answer 1

在JavaScript中，您只需要将要播放的文件的URL加载到播放器中，就像这样。

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

Answer 2

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

这将开始播放指定索引的播放列表项目 - 请注意，播放列表中的第一项将具有0的索引。

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

BTW：从JW7开始， playerInstance.getState（）将状态报告为小写字符串......

如何创建多个jwplayer播放按钮

2 个答案: