Question

如何通过单击列表项触发MediaElements.js中的playpause按钮？它会播放，但它不会停顿。

我在播放器下面有一个无序列表，如下所示：

HTML

<audio id="#MainPlayer"> 
    <source src="Random.mp3" type="audio/mpeg">
</audio>
<ul>
    <li class="sel" AudioLnk="Audio1.mp3"> Audio 1 </li>
    <li class="sel" AudioLnk="Audio2.mp3"> Audio 2 </li>
    <li class="sel" AudioLnk="Audio3.mp3"> Audio 3 </li>
</ul>

JQuery的

$(".sel").click(function(){
    $("#MainPlayer").attr({
        "src" : $(this).attr("AudioLnk")
    });
    $(".mejs-playpause-button").trigger('click');
});

预期行为：
单击列表项会更改音频播放器中的源，并播放或暂停播放，具体取决于播放器在单击项目时是否正在播放。

实际行为：单击列表项可更改音频播放器中的源并开始播放。 但是，点击永远不会暂停播放器。

Answer 1

我最终直接访问了play（）和pause（）方法，而不是试图触发按钮（我会把它留给其他人解释为什么不起作用）。无论如何，下面的代码按照我想要的方式工作：单击列表项会播放该轨道，再次单击它会暂停轨道。

注意：我切换到链接并使用.preventDefault（）;这意味着当不支持脚本时仍可访问音频。

<强> HTML

<audio style="align:right" id="MainPlayer" controls="controls">
    <source src="Random.mp3" type="audio/mpeg">
</audio>
<ul id="RecPlaylist" style="list-style-type: none; list-style-position: inside; padding-left: 0px; text-decoration: none; margin-top: 0px; margin-bottom: 0px;">
    <li><a class="sel" href="Audio1.mp3">Audio 1</a>
    <li><a class="sel" href="Audio2.mp3">Audio 2</a>
    <li><a class="sel" href="Audio3.mp3">Audio 3</a>
</ul>

<强> JQuery的

$('audio').mediaelementplayer({ 
    success: function(media, domElement, player) {
        $('.sel').on('click', function( event ) {
            if ($(this).attr("href") != media.src) {
                media.setSrc($(this).attr("href"));
            }
            if (media.paused) {
                media.play();
            } else {
                media.pause();
            }
            event.preventDefault();
        });
    },
    audioHeight: 5,audioWidth: 200,features: ['progress','duration','tracks','playpause']
});

在mediaelements.js中触发playpause

1 个答案: