html5 自动加载播放器不工作

Question

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

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

我对此有疑问。

当我放在那里时 "autoload" 它不起作用，玩家玩了两次。

这里是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();
    });

这里是fiddle: http://jsfiddle.net/bcHsy/40/

Answer 1

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

试试上面的代码。这会很好用。 JQuery 不需要启动音频播放器。 HTML5 会处理的。

Answer 2

此外，根据插件脚本，您可以添加 "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>

Answer 3

我从昨天开始就在努力解决这个问题。最后，我发现您的 audioPlayer 插件中存在错误。我不会解决这个问题，您可以在他们的插件页面上报告。

问题是当您将 autoplay 添加到 <audio> 标签时，浏览器开始播放音频，您的插件也会开始播放。结果，您播放了两次曲目。您可以使用以下方法解决此问题。

从您的 <audio> 标签中删除 autoplay。
在$( 'audio' ).audioPlayer();

$('.audioplayer-playpause').trigger('click');

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');
});

工作 fiddle: http://jsfiddle.net/bcHsy/45/

html5 自动加载播放器不工作

html5 player with autoload not working

html

javascript

jquery

html5-audio