在移动浏览器上“自动播放”HTML5音频播放器

2018-06-25 09:54:19

我正在为移动用户创建一个HTML5音乐网站。目标是让它完全在移动浏览器中运行。

问题在于，当用户选择要播放的曲目时，它们将被带到“播放器”页面。然后，我将AJAX放入一个HTML5音频元素中，并将autoplay属性设置为true。这在桌面上非常适用，而不是在移动设备上。

虽然一旦达到该页面，曲目并不播放，而用户需要明确地从该播放器页面点击播放以便开始播放音频。关于如何调整我的流量以便加载播放页面后自动播放音频的任何想法？

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Mobile Websites</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,800italic,700italic' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/amazingaudioplayer.js'></script>

</head>

<body>
<div class="right-part">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-color">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <div class="back"><a href="index.html">back</a></div>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
      <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
        <div class="song-name">Player</div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
        <div class="playerr"></div>
      </div>
    </div>
  </div>
  </div>
  <div class="bg">
 <div class="container filter-main-div">
    <div class="song-main-div row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 player-div">
   <!--  <ul class="share-song">
    <li><a class="fav" href="#123"></a></li>
   <li><a class="share" href="#123">share</a></li>
    <li><a class="rbt" href="#123">RBT</a></li>
    </ul>-->
      <div id="primary">

    <div class="demo-slider">

    <link rel="stylesheet" type="text/css" media="all" href="css/initaudioplayer.css" />
      <div id="amazingaudioplayer-7" style="display:block;position:relative;width:320px;height:164px;margin:0px auto 0px;"><div class="suffle">Suffle</div>
        <ul class="amazingaudioplayer-audios" style="display:none;">
          <li data-artist="pinkzebra" data-title="In The Moment of Inspiration" data-album="AudioJungle" data-info="" data-image="images/diamon-img.png" data-duration="154">
            <div class="amazingaudioplayer-source" data-src="audio/devesh.mp3" data-type="audio/mpeg" />
          </li>
        </ul>
      </div><div class="play-fav"><a class="fav" href="#123">sdfsdfsdfdsf</a></div>
    </div>
</div>


  <script src="js/initaudioplayer.js"></script> 
</div>
       </div>
    </div>
  </div>


<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
</body>
</html>

initaudioplayer.js：

jQuery(document).ready(function(){

    var jsFolder = "images";

    jQuery("#amazingaudioplayer-7").amazingaudioplayer({

        jsfolder:jsFolder,

        volumeimagewidth:24,

        barbackgroundimage:"",

        imagewidth:100+'%',

        showtime:true,

        titleinbarwidth:80,

        showprogress:true,

        random:false,

        titleformat:"%TITLE%",

        height:164,

        prevnextimage:"prevnext-48-48-0.png",

        showinfo:true,

        imageheight:100+'%',

        skin:"MusicBox",

        loopimage:"repeat-img.png",

        loopimagewidth:33,

        volumebarheight:80,

        prevnextimageheight:40,

        infoformat:"By %ARTIST% %ALBUM%<br />%INFO%",

        showstop:false,

        showvolumebar:true,

        width:320,

        showtitleinbar:false,

        showloop:true,

        volumeimage:"volume-24-24-1.png",

        playpauseimagewidth:75,

        loopimageheight:36,

        tracklistitemformat:"%ORDER%. %TITLE% %DURATION%",

        prevnextimagewidth:40,

        tracklistarrowimage:"tracklistarrow-16-16-0.png",

        playpauseimageheight:75,

        showbackgroundimage:false,

        progresswidthmode:"fixed",

        stopimage:"stop-48-48-0.png",

        showvolume:true,

        playpauseimage:"playpause-48-48-0.png",

        showprevnext:true,

        backgroundimage:"",

        volumebarpadding:8,

        progressheight:8,

        showtracklistbackgroundimage:false,

        progresswidth:296,

        showtitle:true,

        tracklistarrowimageheight:16,

        heightmode:"fixed",

        titleinbarformat:"%TITLE%",

        showtracklist:true,

        stopimageheight:48,

        volumeimageheight:24,

        stopimagewidth:48,

        tracklistbackgroundimage:"",

        showbarbackgroundimage:false,

        showimage:true,

        tracklistwidth:320,

        tracklistarrowimagewidth:16,

        timeformat:"%CURRENT% / %DURATION%",

        autoplay:true,

        loop:1,

        tracklistitem:10

    });

});

这个问题已经在其他地方得到了回答。

关于Apple设备：

你能在iPad上自动播放HTML5视频吗？

“苹果公司决定禁用iOS设备上的视频自动播放，通过脚本和属性实现，在Safari中，iOS上（包括iPad在内的所有设备上），用户可能在蜂窝网络上，每个数据单元，预加载和自动播放都是禁用的，直到用户启动它才会加载数据。“

Safari HTML5音频和视频指南 - 特定于iOS的注意事项

“在iOS上的Safari（包括iPad在内的所有设备上），用户可能在蜂窝网络上并按数据单元收费，预加载和自动播放功能被禁用，在用户启动它之前不会加载任何数据，这意味着JavaScript除非用户操作触发play（）或load（）方法，否则play（）和load（）方法在用户启动播放之前也处于非活动状态。换句话说，用户启动的Play按钮可以工作，但onLoad =“ play（）“事件不会。”

谷歌搜索将揭示更多。

我已经在几个地方看到，Android上的Chrome浏览器也采用这种方式，尽管其他Android浏览器可能不会。

具体如何适用于您的案例：

通常，如果玩家在同一页面中，只需单击链接就可以正常工作，因为点击该链接将被视为有效的用户交互来启动媒体播放。但是，您正在加载一个新页面，该页面会重置此检查以进行用户交互，因此媒体在用户以某种方式与新页面进行交互之前不会启动。因此，用户必须滚动，触摸，点击，滑动或其他，才能自动播放，或者只需点击媒体播放器上的播放按钮即可。

链接地址: http://www.djcxy.com/p/71143.html

上一篇: "Autoplay" HTML5 audio player on mobile browsers

下一篇: Jscrollpane mousedrag not working in popup on opera 12.12