自动加载的html5播放器不工作

html5 player with autoload not working

本文关键字：播放器 工作 html5 加载      更新时间：2023-09-26

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

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

我对此有意见。

当我把"自动加载"放在那里时，它不起作用，玩家玩了两次。

这是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/

从昨天开始，我一直在努力解决这个问题。最后我发现你的audioPlayer插件中有一个bug。我不会解决这个问题，你可以在他们的插件页面上报告。

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

  1. 从<audio>标签中删除autoplay
  2. 在$( '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');
});

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

 <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会解决这个问题。

此外，根据插件脚本，您可以添加如下所示的"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>
相关文章：