"自动播放"移动浏览器上的HTML5音频播放器 [英] "Autoplay" HTML5 audio player on mobile browsers
本文介绍了"自动播放"移动浏览器上的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设备： 谷歌搜索会显示更多。 我已经在几个地方看到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.
这篇关于"自动播放"移动浏览器上的HTML5音频播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
