如何阻止Wordpress音频播放列表自动播放下一个音轨

时间:2016-05-03 18:51:02

标签: javascript wordpress audio

Wordpress有一个很酷的音频播放列表但不幸的是,每次播放完令人讨厌的歌曲时,它会自动跳到下一首曲目。我所知道的是它“可能”与位于此处的wp-playlist.min.js有关:

的wordpress \ WP-包括\ JS \ MediaElement的

我说的是因为我用Google搜索,我可以通过改变这一行来阻止它循环:

(this.index=0,this.setCurrent())}

到此:

(this.index=0)

但问题是如何阻止它自己跳到下一首曲目?

这是与wp-playlist.min.js相关的代码:

!function(a,b,c){"use strict";var d=c.View.extend({initialize:function(d){this.index=0,this.settings={},this.data=d.metadata||a.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new c.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),b.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),b.isUndefined(window._wpmejsSettings)||(this.settings=b.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(a){this.mejs=a,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(a){this.bindPlayer(a),this.playCurrentSrc()},setPlayer:function(a){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),a&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var a,b="wp-includes/images/media/video.png";"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf(b)&&this.playerNode.attr("poster",this.current.get("image").src),a=this.current.get("dimensions").resized,this.playerNode.attr(a)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var b=this,c=1,d=a('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(a){b.data.images||a.set("image",!1),a.set("artists",b.data.artists),a.set("index",b.data.tracknumbers?c:!1),d.append(b.itemTemplate(a.toJSON())),c+=1}),this.$el.append(d),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(a){a.preventDefault(),this.index=this.$(".wp-playlist-item").index(a.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0)},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var a=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),b=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),a!==b?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});a(document).ready(function(){a(".wp-playlist").each(function(){return new d({el:this})})}),window.WPPlaylistView=d}(jQuery,_,Backbone);

4 个答案:

答案 0 :(得分:4)

我使用以下脚本完成,将其添加到您的(子)主题functions.php:

add_action( 'wp_footer', function () {
?>
<script>
jQuery(function ($) {
    $('.mejs-mediaelement video').on('ended', function (e) {
        e.preventDefault();
        $(this)[0].player.pause();
    });
});
</script>
<?php
},99);

答案 1 :(得分:2)

soderlind的代码也适用于音频,但您需要在将其添加到函数文件之前进行调整。变化

$('.mejs-mediaelement video')

$('.mejs-mediaelement audio')

答案 2 :(得分:0)

如果您没有找到答案,并且觉得修改源文件很舒服,您可以编辑您指出的文件上的“已结束”事件。

ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())}

this.next()是改为下一首歌的那个。 this.index = 0返回播放列表的开头。

要停止播放器自己跳转到下一首歌曲,请注释this.next指令。

答案 3 :(得分:0)

需要根据您的要求对此文件进行更改:wordpress \ wp-includes \ js \ mediaelement \ wp-playlist.min.js

以下是视频播放列表和方案的更新代码

- &GT;完成第一个视频后,它会转到下一个视频,但会自动播放

- &GT;关于视频从列表中的更改,视频src在播放器中更改但自动播放

- &GT;如果视频在播放另一个视频时从列表中更改,则视频src将被更改但自动播放

! function(a, b, c) {
"use strict";

function d() {
    a(".wp-playlist:not(:has(.mejs-container))").each(function() {
        new e({
            el: this
        })
    })
}
window.wp = window.wp || {};
var e = c.View.extend({
    initialize: function(d) {
        this.index = 0, this.settings = {}, this.data = d.metadata || a.parseJSON(this.$("script.wp-playlist-script").html()), this.playerNode = this.$(this.data.type), this.tracks = new c.Collection(this.data.tracks), this.current = this.tracks.first(), "audio" === this.data.type && (this.currentTemplate = wp.template("wp-playlist-current-item"), this.currentNode = this.$(".wp-playlist-current-item")), this.renderCurrent(), this.data.tracklist && (this.itemTemplate = wp.template("wp-playlist-item"), this.playingClass = "wp-playlist-playing", this.renderTracks()), this.playerNode.attr("src", this.current.get("src")), b.bindAll(this, "bindPlayer", "bindResetPlayer", "setPlayer", "ended", "clickTrack"), b.isUndefined(window._wpmejsSettings) || (this.settings = b.clone(_wpmejsSettings)), this.settings.success = this.bindPlayer, this.setPlayer()
    },
    bindPlayer: function(a) {
        this.mejs = a, this.mejs.addEventListener("ended", this.ended)
    },
    bindResetPlayer: function(a) {
        this.bindPlayer(a), this.playCurrentSrc()
    },
    setPlayer: function(a) {
        this.player && (this.player.pause(), this.player.remove(), this.playerNode = this.$(this.data.type)), a && (this.playerNode.attr("src", this.current.get("src")), this.settings.success = this.bindResetPlayer), this.player = new MediaElementPlayer(this.playerNode.get(0), this.settings)
    },
    playCurrentSrc: function() {
        this.renderCurrent(), this.mejs.setSrc(this.playerNode.attr("src")), this.mejs.load(), this.mejs.play()
    },
    playnextSrc: function() {
        this.renderCurrent(), this.mejs.setSrc(this.playerNode.attr("src")), this.mejs.load()
    },
    renderCurrent: function() {
        var a, b = "wp-includes/images/media/video.png";
        "video" === this.data.type ? (this.data.images && this.current.get("image") && -1 === this.current.get("image").src.indexOf(b) && this.playerNode.attr("poster", this.current.get("image").src), a = this.current.get("dimensions").resized, this.playerNode.attr(a)) : (this.data.images || this.current.set("image", !1), this.currentNode.html(this.currentTemplate(this.current.toJSON())))
    },
    renderTracks: function() {
        var b = this,
            c = 1,
            d = a('<div class="wp-playlist-tracks"></div>');
        this.tracks.each(function(a) {
            b.data.images || a.set("image", !1), a.set("artists", b.data.artists), a.set("index", !!b.data.tracknumbers && c), d.append(b.itemTemplate(a.toJSON())), c += 1
        }), this.$el.append(d), this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)
    },
    events: {
        "click .wp-playlist-item": "clickTrack",
        "click .wp-playlist-next": "next",
        "click .wp-playlist-prev": "prev"
    },
    clickTrack: function(a) {
        a.preventDefault(), this.index = this.$(".wp-playlist-item").index(a.currentTarget), this.setCurrent()
    },
    ended: function() {
        if ( this.index + 1 < this.tracks.length ) {
            this.next();
        } else {
            this.index = 0;
            this.setCurrent();
        }
    },
    next: function() {
        this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1, this.setCurrent()
    },
    prev: function() {
        this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1, this.setCurrent()
    },
    loadCurrent: function() {
        var a = this.playerNode.attr("src") && this.playerNode.attr("src").split(".").pop(),
            b = this.current.get("src").split(".").pop();
        this.mejs && this.mejs.pause(), a !== b ? this.setPlayer(!0) : (this.playerNode.attr("src", this.current.get("src")), this.playnextSrc())
    },
    setCurrent: function() {
        this.current = this.tracks.at(this.index), this.data.tracklist && this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass), this.loadCurrent()
    }
});
window.wp.playlist = {
    initialize: d
}, a(document).ready(d), window.WPPlaylistView = e}(jQuery, _, Backbone);

是的,Code处于美化模式......:)

相关问题