Question

我正在使用这个html5音频播放器

http://osvaldas.info/audio-player-responsive-and-touch-friendly

我有问题。

当我放在那里＆＃34; autoload＆＃34;它不起作用，玩家玩两次。

这是html5代码：

 <audio autoplay="autoplay" preload="none" controls="" class="sppaudioplayer" id="spp-audio-player"><source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source></audio>

以下是javascript代码：

 $( function()
    {
        $( 'audio' ).audioPlayer();
    });

这是小提琴： http://jsfiddle.net/bcHsy/40/

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

尝试上面的代码。这样可以正常工作。 JQuery不需要启动音频播放器。 HTML5将负责这一点。

Answer 2

我从昨天起就试图解决这个问题。最后，我发现您的audioPlayer插件中存在错误。我不打算解决这个问题，你可以报告他们的插件页面。

问题是，当您将autoplay添加到<audio>标记中时，浏览器会开始播放音频，并且您的插件也会启动相同的内容。结果你已经播放了两倍的曲目。您可以使用以下方法解决此问题。

从autoplay代码中删除<audio>。
在$('.audioplayer-playpause').trigger('click');

$( 'audio' ).audioPlayer();

P.S：该解决方案仅基于您的audioPlayer插件。

最终解决方案将是：

html5代码：

<audio preload="none" controls="" class="sppaudioplayer" id="spp-audio-player"><source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source></audio>

javascript代码：

$( function()
{
    $( 'audio' ).audioPlayer();
    $('.audioplayer-playpause').trigger('click');
});

工作小提琴： http://jsfiddle.net/bcHsy/45/

Answer 3

另外，根据插件脚本，您可以添加“loop”属性，如下所示，以避免播放两次。

<audio autoplay preload="auto" loop="" controls="" class="sppaudioplayer" id="spp-audio-player">
 <source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source>
</audio>

自动加载的html5播放器无法正常工作

3 个答案: