切圖網一個客戶項目中,用到了背景音樂,采用了html5 audio標簽, 并且設置了 autoplay 自動播放,在PC上正常,但是一到手機下就無法自動播放。
即便使用JS ,調用audio 對象的播放方法 play() 也不能自動播放! 這是為什么呢?
于是打破砂鍋問到底的決心,做了好多種demo,例子
http://m.slicy.cn/bg-music.html
測試,蘋果、安卓還是不行,最后發現真相的我,眼淚掉下來 。 原因在這:
為了防止不必要的自動播放浪費流量,手機網頁訪問帶有audio的頁面是不會自動播放的。
Safari屏蔽了autoplay,必須由用戶交互事件觸發,因為autoplay在移動網絡環境下可能會造成用戶流量費劇增
下面是引自Safari Reference
In Safari on iPhone OS (for all devices, including iPad), where theuser may be on a cellular network and be charged per data unit,
autobuffering 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()
method is triggered by user action.
、插入音樂視頻的代碼
在網頁中插入播放聲音(如mp3等)、AVI動畫和電影文件(如MPG等)的代碼:
在代碼窗口中的<body>和</body>之間插入以下代碼:
<Embed src="url"width="寬度"height="高度"AUTOSTART="TRUE│false" LOOP="TRUE"></Embed>
【注解】
<EMBED…………………起始標記
SRC="url"……………源文件名
width="450"…………播放器的寬度
height="380"…………播放器的高度
HIDDEN="TRUE"………隱藏方式(對播放聲音文件有用,對播放視頻無用)
AUTOSTART="TRUE"……自動播放
autostart="false"……不自動播放,點擊播放按鈕后才播放。
LOOP="TRUE"…………循環播放
NAME="MySound"………嵌入對象名
</EMBED>………………結束標記
【例3】打開網頁并點擊播放器的播放按鈕后才播放視頻文件kkk.mpg:
<Embed src="kkk.mpg"width="450"height="380" autostart="false" ></Embed>
【技巧】此法對制作課件特別有用,可在網頁當前頁播放視頻動畫。但是,打開網頁時播放器總在網頁的左側,如何定位播放器的位置呢?其實插入此代碼可以在設計視圖中利用層來完成,實現方法是:在DW中的設計視圖,插入層,鼠標定位于層內,在層內插入代碼(按右鍵\點插入HTML,在彈出的“插入HTML<>”窗口中的括號<>中間輸入代碼。如果要編輯修改代碼,這樣做:右擊標簽\編輯標簽。)。通過移動層就可以準確定位播放器的位置了。
【視頻格式轉換】用超級解霸或會聲會影可將VCD中的某個視頻文件(.DAT)轉換為視頻文件(.mpg)。
【例4】打開網頁后自動播放(就象背景音樂)聲音文件mlh.mp3:
<Embed src="mlh.mp3" HIDDEN="TRUE" AUTOSTART="TRUE"></Embed>
2、插入播放背景音樂(wav、midi、mp3)的代碼
只要在代碼窗口中的<head>和</head>標簽之間以下代碼即可:
<bgsound src="Music File Name" loop=n>
【注】①Music File Name是背景音樂文件名,其格式可以是:.mid,.mp3,.wav,.wma,.rmi。
②n表示循環次數,若n為-1則表示無限循環。
③網頁文件和音樂文件要在同一文件夾中。
【例5】無限循環播放背景音樂mlh.mp3:
<bgsound src="mlh.mp3" loop="-1">
<!DOCTYPE html>
<html>
<head>
<title>html5添加音樂</title>
<meta charset="utf-8">
<!--embed標簽寫在<head>里面的title標簽下-->
<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 說明:
1、src:文件路徑。
2、hidden="true"表示隱藏音樂播放按鈕,相反使用hidden="false"表示開啟音樂播放按鈕。
3、autostart="true" 表示是打開網頁加載完后自動播放。
4、loop="true"表示 循環播放 如僅想播放一次則為:loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白氣球.mp3">
</audio>
<!-- 說明:
1、autoplay="autoplay",則背景音樂將在音網頁打開后就自動馬上播放。
2、controls="controls",則為了在頁面內顯示顯示控件,如播放按鈕。
3、"loop="loop",則是為了使背景音樂重復播放。
4、preload="auto",則音頻在頁面加載的同時進行加載,并預備播放。
5、src="",即是在""內加入背景音樂的保存路徑,如:src=""。
注:若是想播放按鈕隱藏,則使用以下語句:
直接使用css 的display控制audio標簽的顯示: -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。