隨著互聯(lián)網(wǎng)的飛速發(fā)展以及HTML5的應(yīng)用，越來越多的項目中用到video，audio當(dāng)常用標(biāo)簽。

audio 標(biāo)簽屬性

<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">親 您的瀏覽器不支持html5的audio標(biāo)簽</audio>

當(dāng)然audio元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：

再如下面：

<audio controls="controls"> <source src="music.ogg" /> <source src="music.mp3" /> <source src="music.wav" /> </audio>

video標(biāo)簽屬性

下面先介紹下video標(biāo)簽的一般用法

video標(biāo)簽的屬性如下：

注：control 屬性供添加播放、暫停和音量控件。

一般用法：

<div class="videoCon"><video width="750" height="300" id="videoP" src="video.mp4"></video> </div>

當(dāng)然可以暫停，播放該視頻，使用方法如下：

function playPause() {var myVideo = document.getElementById('videoP');if (myVideo.paused){myVideo.play();}else{myVideo.pause();} }

當(dāng)然video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

如下：

<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag. </video>

獲取HTMLVideoElement和HTMLAudioElement對象

//audio可以直接通過new創(chuàng)建對象 Media = new Audio("http://www.abc.com/test.mp3"); //audio和video都可以通過標(biāo)簽獲取對象 Media = document.getElementById("media");

Media方法和屬性

//錯誤狀態(tài) Media.error; //null:正常 Media.error.code; //1.用戶終止 2.網(wǎng)絡(luò)錯誤 3.解碼錯誤 4.URL無效//網(wǎng)絡(luò)狀態(tài) Media.currentSrc; //返回當(dāng)前資源的URL Media.src = value; //返回或設(shè)置當(dāng)前資源的URL Media.canPlayType(type); //是否能播放某種格式的資源 Media.networkState; //0.此元素未初始化 1.正常但沒有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒有找到資源 Media.load(); //重新加載src指定的資源 Media.buffered; //返回已緩沖區(qū)域，TimeRanges Media.preload; //none:不預(yù)載 metadata:預(yù)載資源信息 auto://準(zhǔn)備狀態(tài) Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA Media.seeking; //是否正在seeking//回放狀態(tài) Media.currentTime = value; //當(dāng)前播放的位置，賦值可改變位置 Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0 Media.duration; //當(dāng)前資源長度 流返回?zé)o限 Media.paused; //是否暫停 Media.defaultPlaybackRate = value; //默認(rèn)的回放速度，可以設(shè)置 Media.playbackRate = value; //當(dāng)前播放速度，設(shè)置后馬上改變 Media.played; //返回已經(jīng)播放的區(qū)域，TimeRanges，關(guān)于此對象見下文 Media.seekable; //返回可以seek的區(qū)域 TimeRanges Media.ended; //是否結(jié)束 Media.autoPlay; //是否自動播放 Media.loop; //是否循環(huán)播放 Media.play(); //播放 Media.pause(); //暫停//控制 Media.controls; //是否有默認(rèn)控制條 Media.volume = value; //音量 Media.muted = value; //靜音//TimeRanges(區(qū)域)對象 TimeRanges.length; //區(qū)域段數(shù) TimeRanges.start(index) //第index段區(qū)域的開始位置 TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置

事件

eventTester = function(e){Media.addEventListener(e,function(){console.log((new Date()).getTime(),e);}); } eventTester("loadstart"); //客戶端開始請求數(shù)據(jù) eventTester("progress"); //客戶端正在請求數(shù)據(jù) eventTester("suspend"); //延遲下載 eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起）， eventTester("error"); //請求數(shù)據(jù)時遇到錯誤 eventTester("stalled"); //網(wǎng)速失速 eventTester("play"); //play()和autoplay開始播放時觸發(fā) eventTester("pause"); //pause()觸發(fā) eventTester("loadedmetadata"); //成功獲取資源長度 eventTester("loadeddata"); //提示當(dāng)前幀的數(shù)據(jù)是可用的 eventTester("waiting"); //等待數(shù)據(jù)，并非錯誤 eventTester("playing"); //開始回放 eventTester("canplay"); //可以播放，但中途可能因為加載而暫停 eventTester("canplaythrough"); //可以播放，歌曲全部加載完畢 eventTester("seeking"); //尋找中 eventTester("seeked"); //尋找完畢 eventTester("timeupdate"); //播放時間改變 eventTester("ended"); //播放結(jié)束 eventTester("ratechange"); //播放速率改變 eventTester("durationchange"); //資源長度改變 eventTester("volumechange"); //音量改變

轉(zhuǎn)載于:https://www.cnblogs.com/moqiutao/p/4834552.html

總結(jié)

以上是生活随笔為你收集整理的HTML5 audio与video标签实现视频播放，音频播放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。