具有自动加载功能的html5播放器无法正常工作 [英] html5 player with autoload not working

问题描述

我正在使用此html5音频播放器

I am using this html5 audio player

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

我对此有疑问.

当我在此处放置自动加载"功能时，它无法正常工作，播放器播放了两次.

When i put there "autoload" its not working and player play two time.

这是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插件中存在错误.我不会解决此问题，您可以在其插件页面上进行报告.

I was trying to solve this issue since yesterday. Finally I have found that there is a bug in your audioPlayer plugin. I am not going to fix that, you can report on their plugin page.

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

The problem is when you add autoplay into your <audio> tag the browser starts playing the audio and also your plugin start the same. As a result you have played twice your track. You can fix this using the following method.

1. 从<audio>标记中删除autoplay.
2. 在$( 'audio' ).audioPlayer();
之后添加$('.audioplayer-playpause').trigger('click');

1. Remove autoplay from your <audio> tag.
2. Add $('.audioplayer-playpause').trigger('click'); after $( 'audio' ).audioPlayer();

PS:该解决方案仅基于您的audioPlayer插件.

P.S: The solution is only based on your audioPlayer plugin.

最终的解决方案将是:

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/

这篇关于具有自动加载功能的html5播放器无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！