移動瀏覽器上的“自動播放” HTML5音頻播放器
[英]“Autoplay” HTML5 audio player on mobile browsers
問題描述
我正在為移動用戶創建HTML5音樂網站。目標是使其完全在移動瀏覽器中運行。
問題是，當用戶選擇要播放的曲目時，它們將被帶到“播放器”頁面。然后，我將HTML5音頻元素中的AJAX設置為true，將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
});
});
1 個解決方案
解決方案1
9 已采納 2014-09-26 19:20:45
這個問題以前在其他地方已經回答過。
關於Apple設備：
- 您可以在iPad上自動播放HTML5視頻嗎？
- “ Apple已決定通過腳本和屬性實現來禁用iOS設備上的視頻自動播放。在Safari中，iOS（對於包括iPad在內的所有設備）上的用戶可能在蜂窩網絡上並需要付費每個數據單元都禁用預加載和自動播放。在用戶啟動之前，不會加載任何數據。”
- Safari HTML5音頻和視頻指南-iOS特定注意事項
- “在iOS上的Safari（適用於包括iPad在內的所有設備）上的Safari中，用戶可能位於蜂窩網絡上，並且按數據單元收費，因此將禁用預加載和自動播放功能。在用戶啟動數據之前，不會加載任何數據。這意味着JavaScript在用戶啟動播放之前，除非用戶通過動作觸發play（）或load（）方法，否則play（）和load（）方法也處於非活動狀態。換句話說，用戶啟動的Play按鈕起作用，但是onLoad =“ play（）“事件不存在。”
谷歌搜索會發現更多。
我在一些地方已經讀到，Android上的Chrome也會以這種方式運行，盡管其他Android瀏覽器可能不會。
具體如何適用於您的情況：
通常，如果播放器在同一頁面中，則單擊鏈接就可以正常工作，因為單擊該鏈接將被視為有效的用戶交互，以開始媒體播放。 但是，您正在加載一個新頁面，該頁面會重置此檢查以進行用戶交互，因此，只有在用戶以某種方式與新頁面進行交互之后，媒體才會啟動。 因此，用戶必須滾動，觸摸，點擊，滑動或其他方式才能自動播放，或僅點擊媒體播放器上的播放按鈕。
當音頻動態啟動（自動播放）時，控件在 html5 音頻播放器和 android 本機播放器之間不起作用
[英]Controls not working between html5 audio player and android native player when audio is started dynamically (autoplay)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.