H5新標(biāo)簽audio&video

H5新標(biāo)簽audio&video

audio

<audio id="audio" controls autoplay loop muted >您的瀏覽器不支持audio標(biāo)簽</audio>
  • controls顯示播放器頁(yè)面(默認(rèn)隱藏)
  • autoplay自動(dòng)播放
  • loop 設(shè)置或返回音頻/視頻是否再播放結(jié)束時(shí)再次播放
    • true再次播放
    • false不再次播放（默認(rèn)值）
  • muted靜音
  • currentSrc(只讀) 返回當(dāng)前音頻/視頻的URL
  • duration(只讀) 返回當(dāng)前音頻/視頻的長(zhǎng)度（以秒計(jì)）
  • currentTime 設(shè)置或返回音頻/視頻的當(dāng)前播放位置（以秒計(jì)）
  • volume 設(shè)置或返回音頻/視頻的當(dāng)前音量，范圍0~1
  • muted 設(shè)置或返回音頻/視頻是否靜音
  • playbackRate 設(shè)置或返回音頻/視頻的當(dāng)前播放速度
    • 1.0（正常速度，默認(rèn)值）
    • 0.5 半速
    • 2.0 倍速
  • ended(只讀) 返回音頻/視頻是否播放完畢
    • true播放結(jié)束
    • false播放未結(jié)束
  • paused(只讀) 設(shè)置或返回音頻/視頻是否暫停
    • true暫停
    • false未暫停

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!--controls 顯示播放器頁(yè)面-->
        <!--autoplay 自動(dòng)播放-->
        <!--loop 無(wú)限循環(huán)-->
        <!--muted 靜音-->
        <audio id="audio" src="我們愛過(guò)嗎只是睡過(guò)吧.mp3" controls <!--autoplay--> loop <!--muted-->>
             您的瀏覽器不支持audio標(biāo)簽
        </audio>
        <br />
        <button id="play">播放</button>
        <button id="pause">暫停</button>
        <button id="seek">指定時(shí)間開始播放</button>
        <button id="muted">靜音</button>
        <button id="pp">播放/暫停</button>
    </body>
    <script type="text/javascript">
        var audio=document.getElementById("audio");
        var playBtn=document.getElementById("play");
        var pauseBtn=document.getElementById("pause");
        var seekBtn=document.getElementById("seek");
        var mutedBtn=document.getElementById("muted");
        var ppBtn=document.getElementById("pp");
        
        playBtn.onclick=function(){
            audio.play();
        }
        pauseBtn.onclick=function(){
            audio.pause();
        }
        seekBtn.onclick=function(){
            //調(diào)節(jié)當(dāng)前時(shí)間
            //audio.fastseek(5);    safari支持
            
            //使用currentTime進(jìn)行時(shí)間的調(diào)節(jié)，進(jìn)行音樂進(jìn)度的控制
            audio.currentTime=60;
        }
        mutedBtn.onclick=function(){
            //使用volume調(diào)節(jié)聲音大小，可以用來(lái)做靜音按鈕
            audio.volume=0;
        }
        var playStatus=false;
        ppBtn.onclick=function(){
            if(playStatus==false) {
                audio.play();
            }else{
                audio.pause();
            }
            playStatus=!playStatus;
        }
    </script>
</html>

video

<video id="video" src="許嵩、黃齡 - 驚鴻一面.mkv" width="500" controls loop poster="img/bj.jpg">
    您的瀏覽器不支持video標(biāo)簽
</video>
  • controls顯示播放器頁(yè)面(默認(rèn)隱藏)
  • autoplay自動(dòng)播放
  • loop無(wú)限循環(huán)
  • muted靜音
  • poster規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像

另一種方式，匹配視頻

<video id="video" width="500" height="" controls loop poster="img/bj.jpg">
    <source src="許嵩、黃齡 - 驚鴻一面.mp4" type="video/mp4"></source>
    <source src="許嵩、黃齡 - 驚鴻一面.ogv" type="video/ogg"></source>
    <source src="許嵩、黃齡 - 驚鴻一面.webm" type="video/webm"></source>
    <source src="許嵩、黃齡 - 驚鴻一面.mkv" type="video/mkv"></source>
    <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
        <param name="movie" value="myvideo.swf" />
        <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
    </object>
    當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻： <a href="myvideo.webm">下載視頻</a>
</video>

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <video id="video" src="許嵩、黃齡 - 驚鴻一面.mkv" width="500" controls loop poster="img/bj.jpg">
            您的瀏覽器不支持video標(biāo)簽
        </video>
        <br />
        <button id="load">重新加載</button>
        <button id="play">播放</button>
        <button id="pause">暫停</button>
        <button id="muted">靜音</button>
        <button id="pp">播放/暫停</button>
        <button id="max">最大化</button>
    </body>
    <script type="text/javascript">
        var video=document.getElementById("video");
        var loadBtn=document.getElementById("load");
        var playBtn=document.getElementById("play");
        var pauseBtn=document.getElementById("pause");
        var mutedBtn=document.getElementById("muted");
        var ppBtn=document.getElementById("pp");
        var max=document.getElementById("max");
        
        var playStatus=false;
        
        loadBtn.onclick=function(){
            video.load();
        }
        playBtn.onclick=function(){
            video.play();
        }
        pauseBtn.onclick=function(){
            video.pause();
        }
        mutedBtn.onclick=function(){
            if (playStatus==false) {
                video.volume=0;
            } else{
                video.volume=0.5;
            }
            playStatus=!playStatus;
        }
        ppBtn.onclick=function(){
            if (playStatus==false) {
                video.play();
            } else{
                video.pause();
            }
            playStatus=!playStatus;
        }
        max.onclick=function(){
            video.webkitRequestFullScreen();
        }
    </script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容