覆盖jPlayer中的负剩余时间

Posted

技术标签:

【中文标题】覆盖jPlayer中的负剩余时间【英文标题】:Override negative remaining time in jPlayer 【发布时间】:2015-05-02 12:16:15 【问题描述】:

我想知道 jPlayer 插件中是否有任何方法可以覆盖 jp-duration div 中的 剩余时间 文本。简单地说,我只想删除分钟/秒之前的-。所以我只想要03:26 而不是-03:26。是否有任何预构建的功能可以让我这样做,或者是否需要编写一些自定义脚本来完成我想要做的事情?

JSFiddle

HTML

<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-single">
        <div class="jp-gui jp-interface">
            <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-controls-holder">
                <div class="jp-controls">
                    <button class="jp-play" role="button" tabindex="0">play</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-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-toggles">
                    <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                </div>
            </div>
        </div>
        <div class="jp-details">
            <div class="jp-title" aria-label="title">&nbsp;</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>

JS

$(document).ready(function() 

    $("#jquery_jplayer_1").jPlayer(
        ready: function(event) 
            $(this).jPlayer("setMedia", 
                title: "Bubble",
                m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            );
        ,
        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "mp3, oga",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    );
);                                      

【问题讨论】:

不明白为什么这被否决了? 【参考方案1】:

不幸的是,负剩余时间是硬编码的,无法通过选项控制。

最简单的解决方案是下载jPlayer latest release并修改dist/jquery.jplayer.js如下:

替换以下行:

durationText = (remaining > 0 ? '-' : '') + this._convertTime(remaining);

与:

durationText = this._convertTime(duration);

您可以选择缩小修改后的文件(例如,here)。

最后,您需要在页面上包含修改后的文件而不是原始版本。

【讨论】:

以上是关于覆盖jPlayer中的负剩余时间的主要内容,如果未能解决你的问题,请参考以下文章

JPlayer 音频问题

jplayer点击播放没有任何反应

jPlayer 在 iOS iPhone 上无法正常工作

jPlayer - 通过 Javascript 实现倒带功能

jPlayer - 设置播放一次且只播放一次

如何使用 jPlayer 在所有页面上连续播放音频?