Question

我正在尝试创建多个Jplayers实例，每个实例都从我的Laravel数据库（名为archives的表）中播放不同的音频文件，而且我遇到了jQuery代码符合Laravel代码的问题。

到目前为止音频播放器播放但它们播放相同的文件。

当我深入网站时，我也遇到了麻烦。例如：使用mydomain.com/segments/，音频播放器将“segment”添加到url而不仅仅是公共目录。我知道类似的问题可以用Laravel中的URL：资产解决，但我不知道如何使用它，因为它是获取文件的jquery。

<小时/> 这是我尝试使用laravel Forloop创建我的多个jplayer实例的地方（我需要从2开始，因为播放器1正在其他地方使用）我对如何混合Laravel和Jquery代码感到困惑。

这完全在我的footer.blade.php

中

<!--{{{$counter = 2}}}-->
    @foreach ($archives as $archive)

        <script>
        var counter = "{{$counter}}";
        var file = "archiveAudio/{{$archive->audioFile}}";

    $(document).ready(function(){
    $("#jquery_jplayer_"+ counter).jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Hidden",
                mp3: file,
                oga: ""
            });
        },
        play: function() { // To avoid multiple jPlayers playing   together.
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "../../js",
        supplied: "mp3, oga",
        cssSelectorAncestor: "#jp_container_" + counter,
        wmode: "window",
        globalVolume: true,
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true
    });
   counter ++;

    });


        </script>

    @endforeach

主页Blade View（需要从＃2玩家开始为其创建的每个玩家添加1到玩家ID）

<div id="latest">
    <!--  {{ $count = 2}} -->
    @foreach ($archives as $archive)
        <div class="singleLatest">

            <img src = "/images/segments/{{$archive->segment->image}}"   width="100px;"/>

    <div class="playerAndInfo">
                <h3> {{ $archive->archiveTitle}}<br>{{$archive->segment->name}}</h3>

        <div id="jquery_jplayer_{{$count}}" class="jp-jplayer"></div>
                <div id="jp_container_{{$count}}" class="jp-audio" role="application" aria-label="media player">
                <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                <div class="jp-controls">
                    <button class="jp-play" role="button" tabindex="0">play</button>
                </div>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>

                <div class="jp-time-holder">
                    <div class="jp-current-time" role="timer" aria-label="time"> </div>
                    <div class="jp-duration" role="timer" aria-label="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>
                </div>
            </div><!--end playerAndInfo-->
        </div> <!-- end single latest -->

<!--  {{ $count = $count +1}} -->
    @endforeach
</div><!-- End latest -->

谢谢！

来自Laravel DB的多个Jplayer音频播放器

0 个答案: