html5實(shí)現(xiàn)自動(dòng)播放的案例

發(fā)布時(shí)間：2020-09-26 09:30:05 來源：億速云閱讀：203 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)html5實(shí)現(xiàn)自動(dòng)播放的案例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

html5 audio標(biāo)簽用法的定義：

<audio> 標(biāo)簽定義聲音，比如音樂或其他音頻流。

html5 audio標(biāo)簽實(shí)例

一段簡單的 HTML 5 音頻：

<audio src="someaudio.wav">
您的瀏覽器不支持 audio 標(biāo)簽。
</audio>

html5 audio標(biāo)簽的屬性：

html5實(shí)現(xiàn)自動(dòng)播放的案例

來個(gè)html5 audio標(biāo)簽的使用實(shí)例教程

html5 audio標(biāo)簽自動(dòng)播放和暫停

這有一個(gè)移動(dòng)端的微信的H5活動(dòng)頁面，其中有個(gè)需求是：打開頁面后背景音樂就要自動(dòng)開始播放，點(diǎn)擊音樂圖標(biāo)按鈕可以控制其播放與暫停。

移動(dòng)端，音樂播放，自動(dòng)播放與暫停，audio標(biāo)簽是必須的，于是直接就開寫：

<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>

html5實(shí)現(xiàn)自動(dòng)播放的案例

在chorme瀏覽器上模擬，點(diǎn)擊小喇叭，可以同步操控audio標(biāo)簽進(jìn)行播放與暫停，也能自動(dòng)播放。

于是放到手機(jī)上實(shí)測一番，結(jié)果。。。。。

安卓手機(jī)上一切正常；

但是在蘋果手機(jī)上，剛進(jìn)入頁面的時(shí)候是不能自動(dòng)播放的

后來查了許多資料后才知道，這是因?yàn)樘O果為了防止用戶是在流量環(huán)境下，這樣會(huì)導(dǎo)致流量的偷跑，所以禁止了audio的自動(dòng)播放，除非用戶主動(dòng)觸發(fā)。當(dāng)然，還是有辦法達(dá)到需求的，畢竟是在人家微信瀏覽器下跑起來的，人在屋檐下，不得不低頭啊！

再一個(gè)引入微信的開發(fā)者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> <!--控制音樂圖標(biāo)-->
    <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> 標(biāo)簽是 HTML 5 的新標(biāo)簽。

提示和注釋

提示：可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。

感謝各位的閱讀！關(guān)于html5實(shí)現(xiàn)自動(dòng)播放的案例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

html5實(shí)現(xiàn)自動(dòng)播放的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽