移动浏览器上的“自动播放” HTML5音频播放器
[英]“Autoplay” HTML5 audio player on mobile browsers
问题描述
I am creating a HTML5 music website for mobile users.The goal is to get it running completely in mobile browsers.. 
我正在为移动用户创建HTML5音乐网站。目标是使其完全在移动浏览器中运行。
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. 问题是，当用户选择要播放的曲目时，它们将被带到“播放器”页面。然后，我将HTML5音频元素中的AJAX设置为true，将autoplay属性设置为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: 这是我的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 : 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
});
});
1 个解决方案
解决方案1
9 已采纳 2014-09-26 19:20:45
This question has been answered in other places before. 这个问题以前在其他地方已经回答过。
Regarding Apple devices specifically: 关于Apple设备：
- Can you autoplay HTML5 videos on the iPad? 您可以在iPad上自动播放HTML5视频吗？
- "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." “ Apple已决定通过脚本和属性实现来禁用iOS设备上的视频自动播放。在Safari中，iOS（对于包括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 Safari HTML5音频和视频指南-iOS特定注意事项
- "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." “在iOS上的Safari（适用于包括iPad在内的所有设备）上的Safari中，用户可能位于蜂窝网络上，并且按数据单元收费，因此将禁用预加载和自动播放功能。在用户启动数据之前，不会加载任何数据。这意味着JavaScript在用户启动播放之前，除非用户通过动作触发play（）或load（）方法，否则play（）和load（）方法也处于非活动状态。换句话说，用户启动的Play按钮起作用，但是onLoad =“ play（）“事件不存在。”
- "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. 我在一些地方已经读到，Android上的Chrome也会以这种方式运行，尽管其他Android浏览器可能不会。
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. 因此，用户必须滚动，触摸，点击，滑动或其他方式才能自动播放，或仅点击媒体播放器上的播放按钮。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.