bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

html5實現(xiàn)自動播放的案例-創(chuàng)新互聯(lián)

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

目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設、域名、雅安服務器托管、綿陽服務器托管、企業(yè)網(wǎng)站設計、克山網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

html5 audio標簽用法的定義：

<audio> 標簽定義聲音，比如音樂或其他音頻流。

html5 audio標簽實例

一段簡單的 HTML 5 音頻：

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

html5 audio標簽的屬性：

html5實現(xiàn)自動播放的案例

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

html5實現(xiàn)自動播放的案例

在chorme瀏覽器上模擬，點擊小喇叭，可以同步操控audio標簽進行播放與暫停，也能自動播放。

于是放到手機上實測一番，結果。。。。。

安卓手機上一切正常；

但是在蘋果手機上，剛進入頁面的時候是不能自動播放的

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

再一個引入微信的開發(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> <!--控制音樂圖標-->
    <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 的新標簽。

提示和注釋

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

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

名稱欄目：html5實現(xiàn)自動播放的案例-創(chuàng)新互聯(lián)
文章源于：http://vcdvsql.cn/article22/cscijc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、定制開發(fā)、虛擬主機、網(wǎng)站內(nèi)鏈、建站公司、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化