1

我想要做的是遍历我的数据库中的 2 个 url。到目前为止，我已经让它在第一行工作，但我需要它遍历两行。截至目前，它只循环通过数据库中的第一个 url 两次。我尝试将 '#jquery_jplayer_1' 设为一个类，但这似乎仍然不起作用。有什么想法或帮助吗？

<!DOCTYPE html>
<html lang="en">
<head>
<?php include("vh.php"); ?>
<?php $query = $this->db->query("SELECT * FROM music");
      foreach ($query->result() as $row) {
?>
        <!-- Example code to create a simple player using jPlayer 2.1.0 -->

        <!-- Skins are defined in CSS. Uncomment the following CSS reference and comment out the one below it to switch skins -->

        <!--<link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />--> 
        <link href="http://jplayer.org/latest/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
        <script type="text/javascript" src="http://jplayer.org/2.1.0/js/jquery.jplayer.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                $(".jquery_jplayer_1").jPlayer({
                    ready: function(event) {
                        $(this).jPlayer("setMedia", {
                            mp3: "<?=$row->songURI?>",
                        });
                    },
                    swfPath: "http://www.jplayer.org/2.1.0/js",
                    supplied: "mp3"
                });
            });
        </script>

    </head>
    <body>
        <div class="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio">
            <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">

                        <!-- comment out any of the following <li>s to remove these buttons -->

                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>

                    <!-- you can comment out any of the following <div>s too -->

                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>                   
                </div>

                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
    </body>

    <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<?php } ?>
4

1 回答 1

3

所以你在这里有一些问题。他们中的大多数都在js中。我还查看了 jplayer api，似乎它一次只能播放一首歌曲，这就是我想你在那里有那个循环的原因。

以下是您的问题：

  • 理想情况下，您希望在 jquery 中有一个文档就绪功能。这使您的代码在所有地方都减少了。如果你能帮助它，我会做一个功能，在这种情况下你可以。
  • 在您的代码中，选择器$(".jquery_jplayer_1")将返回一个包含 2 个元素的 jquery 对象（因为循环后页面上有该类的 2 个 div），但是由于您有 2 个函数将 jplayer 初始化到这 2 个元素（首先使用 mp3#1然后是 mp3#2) 您将在第二次初始化时破坏 jplayer 或将它们都设置为 mp3#2
  • 您的 setMedia 对象中有一个尾随逗号：mp3: "<?=$row->songURI?>",- 这会以非常神秘的 js 错误破坏较旧的 IE。删除尾随逗号。
  • 你在空的 jplayer div 上有 2 个类属性！

正确的方法是：

  • 将循环移动到 2 个 jplayer divcontainer和空播放器 div周围
  • 在循环中确保将容器输出为jquery_jplayer_1和jquery_jplayer_2 相同的类

  • 在 ready 函数中放置第二个循环，以将单独的 init 调用输出到 jplayer。这是第二次循环迭代输出的样子：

           $(".jquery_jplayer_2").jPlayer({
            ready: function(event) {
                $(this).jPlayer("setMedia", {
                    mp3: "<?=$row->songURI?>"
                });
            },
            cssSelectorAncestor: '.jp_container_2',
            swfPath: "http://www.jplayer.org/2.1.0/js",
            supplied: "mp3"
        });

请注意，我添加了cssSelectorAncestor: '.jp_container_2'你需要在你的 init 函数中有它来告诉它使用哪个容器。每个玩家都应该有一个单独的容器。

我希望这有帮助

此外，底部还有一些额外的文档类型废话。

于 2012-05-15T11:03:49.103 回答