个人中心
gpt4 book ai didi

javascript - "Autoplay"移动浏览器上的 HTML5 音频播放器

转载 作者：搜寻专家 更新时间：2023-10-31 22:12:56 25 4
gpt4 key购买 nike

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

问题是，当用户选择要播放的轨道时，他们会被带到“播放器”页面。然后我在 HTML5 音频元素中使用 AJAX，并将自动播放属性设置为 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 设备:

  • 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 浏览器可能不会。

这如何具体适用于您的情况:

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

关于javascript - "Autoplay"移动浏览器上的 HTML5 音频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26066062/

25 4 0
文章推荐： php - 获取一年中给定周数的 "Y-m-d"中的第一天
文章推荐： php - 使用另一个表的字段自定义搜索 sugarcrm
文章推荐： php - spl_autoload_register 不工作
文章推荐： php - 适用于 PHP 的 Azure : "ServiceDefinition.rd" does not exist in Service directory "ServiceDefinition.csx"
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com