移动浏览器

移动浏览器

关注
发信
关注(28)粉丝(399)

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

本文介绍了"自动播放"移动浏览器上的HTML5音频播放器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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


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


一旦到达此页面，该轨道就无法播放，而用户则需要明确点击此播放器页面中的播放以便音频播放开始。
在加载播放页面之后，我可以如何调整自己的流量以使音频播放自动播放？

这是我的HTML代码：
$ b 

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/> 
< meta name =descriptioncontent => 
< meta name =authorcontent => 
< link rel =iconhref =../../ favicon.ico> 
< title>移动网站< / title> 
< link href =css / bootstrap.min.css =stylesheet> 
< link rel =stylesheettype =text / csshref =css / style.css> 
< link rel =stylesheettype =text / csshref =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>播放器< / 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 =favhref =＃123>< / a>< / li> 
< li>< a class =sharehref =＃123>分享< / a>< / li> 
< a>< a class =rbthref =＃123> RBT< / a>< / li> 
< / ul>  - > 
< div id =primary> 
 
< div class =demo-slider> 
 
< link rel =stylesheettype =text / cssmedia =allhref =css / initaudioplayer.css/> 
< div id =amazingaudioplayer-7style =display：block; position：relative; width：320px; height：164px; margin：0px auto 0px;>< div class =suffle > Suffle< / DIV> 
< ul class =amazingaudioplayer-audiosstyle =display：none;> 
 
  • < div class =amazingaudioplayer-sourcedata-src =audio / devesh.mp3data-type =audio / mpeg/> 
    < / li> 
    < / ul> 
    < / div>< div class =play-fav>< a class =favhref =＃123> sdfsdfsdfdsf< / a>< / div> 
    < / div> 
    < / div> 
     
     
    < script src =js / initaudioplayer.js>< / script> 
    < / div> 
    < / div> 
    < / div> 
    < / div> 
     
     
    <！ -  Bootstrap核心JavaScript 
     ========================== ========================  - > 
      < / body> 
    < / html>

    • initaudioplayer.js： 

      jQuery（document）.ready（function（）{
     
     var jsFolder =images; 
     
     jQuery ＃amazingaudioplayer-7）。amazingaudioplayer（{
     
     jsfolder：jsFolder，
     
     volumeimagewidth：24，
     
     barbackgroundimage：，
     
     imagewidth：100 +'％'，
     
     showtime：true，
     $ b titleinbarwidth：80，
     
     showprogress：true， 
     
     random：false，
     $ b titleformat：％TITLE％，
     
     height：164，
     
     prevnextimage： prevnext-48-48-0.png，
     
     showinfo：true，
     
     imageheight：100 +'％'，
     
    皮肤： MusicBox，
     
     loopimage：repeat-img.png，
     
     loopimagewidth：33，
     
     volumebarheight：80，
     
     prevnextimageheight：40，
     
     infoformat：按％ARTIS T％％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，
     $ b stopimageheight：48，
     
     volumeimageheight：24，
     
     stopimagewidth：48，
     
     tracklistbackgroundimage：，
     
     showbarbackgroundimage：false，
     
     showimage：true，
     $ b tracklistwidth：320，
     
     tracklistarrowimagewidth ：16，
     
    时间格式：％CURRENT％/％DURATION％，
     
    自动播放：true，
     
    循环：1，
     
     tracklistitem：10 
     
    }）; 
     
    }）;


    解决方案

    此问题已在其他地方得到解答。 / h2>

    特别针对Apple设备：





      • Apple已决定通过脚本和属性实施禁用iOS设备上的视频自动播放。在Safari中，在iOS（包括iPad在内的所有设备上），用户可能处于一个蜂窝网络，并按每个数据单元收费，预先加载和自动播放被禁用，没有数据加载直到用户启动它为止。 li>


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




        谷歌搜索会显示更多。



        我已经在几个地方看到Chrome在Android上的表现也如此，尽管其他Android浏览器可能不会。

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



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


        I am creating a HTML5 music website for mobile users.The goal is to get it running completely in mobile browsers..

        The issue is that when a user selects a track to play, they are taken to the "player" page.I then AJAX in a HTML5 audio element in with the autoplay attribute set to true. This works great on desktops, not so much on mobile.

        The track is not playing though once this page is reached, and the user instead needs to explicitly click play from this player page in order for audio playback to start.Any ideas on how I can adjust my flow in order for audio playback to autoplay after loading the playing page?

        Here's my HTML code:

        <!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

    });

});
        解决方案

        This question has been answered in other places before.

        Regarding Apple devices specifically:

        • Can you autoplay HTML5 videos on the iPad?
          • "Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations. In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it."
        • Safari HTML5 Audio and Video Guide - iOS-Specific Considerations
          • "In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not."

        Googling will reveal more.

        I have read in a few places that Chrome on Android also behaves this way, though other Android browsers may not.

        How this applies to your case specifically:

        Normally, just clicking on a link would work fine if the player were in the same page, since the click on that link would be counted as valid user interaction to start the media playback. But, you're loading a new page, which resets this check for user interaction, and so media will not start until the user interacted with the new page in some way. Thus, the user has to scroll, touch, tap, swipe, or something, in order to auto play, or just hit the play button on the media player.

        这篇关于&QUOT;自动播放&QUOT;移动浏览器上的HTML5音频播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

    08-06 15:19
    Powered by LMLPHP ©2024 移动浏览器 0.050067