溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html5實現自動播放的案例的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
html5 audio標簽用法的定義：
<audio> 標簽定義聲音，比如音樂或其他音頻流。
html5 audio標簽實例
一段簡單的 HTML 5 音頻：
<audio src="someaudio.wav"> 您的瀏覽器不支持 audio 標簽。 </audio>
html5 audio標簽的屬性：
來個html5 audio標簽的使用實例教程
html5 audio標簽自動播放和暫停
這有一個移動端的微信的H5活動頁面，其中有個需求是：打開頁面后背景音樂就要自動開始播放，點擊音樂圖標按鈕可以控制其播放與暫停。
移動端，音樂播放，自動播放與暫停，audio標簽是必須的，于是直接就開寫：
<code class="language-html"><i class="icon-music-outer">
<i class="forbid icon-music"></i>
<audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3">
</audio>
</i>
<script>
var $music = $('.icon-music-outer');
var $forbid = $music.find('.forbid');
var audio = document.getElementById('bgMusic');
$music.on('click', function () {
if ($forbid.hasClass('icon-music')) {
$forbid.removeClass('icon-music').addClass('icon-forbidMusic');
} else {
$forbid.removeClass('icon-forbidMusic').addClass('icon-music');
}
if (audio.paused) {
audio.play();
return
}
audio.pause();
});
</script>
</code>
在chorme瀏覽器上模擬，點擊小喇叭，可以同步操控audio標簽進行播放與暫停，也能自動播放。
于是放到手機上實測一番，結果。。。。。
安卓手機上一切正常；
但是在蘋果手機上，剛進入頁面的時候是不能自動播放的
后來查了許多資料后才知道，這是因為蘋果為了防止用戶是在流量環境下，這樣會導致流量的偷跑，所以禁止了audio的自動播放，除非用戶主動觸發。當然，還是有辦法達到需求的，畢竟是在人家微信瀏覽器下跑起來的，人在屋檐下，不得不低頭啊！
再一個引入微信的開發者js文件，整體寫法如下：jq和原生寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/icon.css" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
.icon-music-outer{
display: inline-block;
width: 25px;
height: 25px;
position: fixed;
right: 5px;
top: 10px;
font-size: 25px;
color: #ffda51;
z-index: 100;
}
.forbid{
display: inline-block;
font-size: 25px;
width: 25px;
height: 25px;
}
.icon-forbidMusic{
display: inline-block;
font-size: 25px;
width: 25px;
height: 25px;
color: #d0f2fc;
z-index: 101;
}
audio{
position: absolute;
left: -300px;
}
</style>
</head>
<body>
<i class="icon-music-outer">
<i class="forbid icon-music"></i> <!--控制音樂圖標-->
<audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3">
</audio>
</i>
<script src="./js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var $music = $('.icon-music-outer');
var $forbid = $music.find('.forbid');
var audio = document.getElementById('bgMusic');
function audioAutoPlay(audio) {
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.play();
}, false);
}
audioAutoPlay(audio);
$music.on('click', function () {
if ($forbid.hasClass('icon-music')) {
$forbid.removeClass('icon-music').addClass('icon-forbidMusic');
} else {
$forbid.removeClass('icon-forbidMusic').addClass('icon-music');
}
if (audio.paused) {
audio.play();
return
}
audio.pause();
});
</script>
</body>
</html>HTML 4.01 與 HTML 5 之間的差異
<audio> 標簽是 HTML 5 的新標簽。
提示和注釋
提示：可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
感謝各位的閱讀！關于html5實現自動播放的案例就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
