Question

我正在为移动用户创建一个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

    });

});

Answer 1

此问题之前已在其他地方得到解答。

具体针对Apple设备：

Can you autoplay HTML5 videos on the iPad?
- “Apple决定通过脚本和属性实现禁用在iOS设备上自动播放视频。在Safari中，在iOS上（适用于所有设备，包括iPad），用户可能在蜂窝网络上每个数据单元收费，预加载和自动播放都被禁用。在用户启动之前不会加载任何数据。“
Safari HTML5 Audio and Video Guide - iOS-Specific Considerations
- “在iOS上的Safari（适用于所有设备，包括iPad）中，用户可能在某个蜂窝网络上并按数据单元收费，预先加载和自动播放被禁用。在用户启动之前不会加载任何数据。表示JavaScript play（）和load（）方法在用户启动播放之前也是非活动的，除非用户操作触发了play（）或load（）方法。换句话说，用户启动的播放按钮有效，但是onLoad =“play（）”事件没有。“

谷歌搜索将揭示更多。

我已经在一些地方看到Android上的Chrome也有这种方式，但其他Android浏览器可能没有。

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

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

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

1 个答案:

此问题之前已在其他地方得到解答。

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