18、音視訊標籤
阿新 • • 發佈：2019-01-28
常見的視訊格式
視訊的組成部分：畫面、音訊、編碼格式視訊編碼：H.264、Theora、VP8(google開源)
常見的音訊格式
音訊編碼：ACC、MP3、Vorbis
HTML5支援的視訊格式：
Ogg=帶有Theora視訊編碼+Vorbis音訊編碼的Ogg檔案
支援的瀏覽器:F、C、OMEPG4=帶有H.264視訊編碼+AAC音訊編碼的MPEG4檔案
支援的瀏覽器: S、CWebM=帶有VP8視訊編碼+Vorbis音訊編碼的WebM格式
支援的瀏覽器: I、F、C、O
Video屬性
Autoplay視訊就緒自動播放controls向用戶顯示播放控制元件
Width
Height設定播放器高度
Loop播放完是否繼續播放該視訊，迴圈播放
Preload是否等載入完再播放
Src視訊url地址
Poster載入等待的畫面圖片
Autobuffer設定為瀏覽器緩衝方式，不設定autoply才有效
HTML5支援的音訊格式：
Ogg 免費支援的瀏覽器:C、F、OMP3 收費支援的瀏覽器: I、C、S
Wav 收費支援的瀏覽器: F、O、S
audio 屬性
autoplay自動播放controls向用戶顯示播放控制元件
loop迴圈
preload是否等載入完再播放
src要播放的音訊的 URL。
Video audio API方法
play()pause()
load()
全屏: webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen();
退出全屏：
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();
Video audio API屬性
currentTime : 開始到播放現在所用的時間duration : 媒體總時間(只讀)
volume : 0.0-1.0的音量相對值
muted : 是否靜音 false /true
paused : 媒體是否暫停(只讀)
ended : 媒體是否播放完畢(只讀)
error : 媒體發生錯誤的時候，返回錯誤程式碼 (只讀)
currentSrc : 以字串的形式返回媒體地址(只讀)
video：
<!doctype html><!--聲明當前文件為html文件-->
<html lang="en"><!--語言為英語-->
<head><!--頭部-->
<meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼-->
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css樣式表的衣櫃*/
</style>
</head>
<body><!--身體-->
<!--
video屬性
Autoplay 視訊就緒自動播放
controls 向用戶顯示播放控制元件
Width 設定播放器寬度
Height 設定播放器高度
Loop 播放完是否繼續播放該視訊，迴圈播放
Preload 是否等載入完再播放
Src視訊url地址
Poster 載入等待的畫面圖片
Autobuffer設定為瀏覽器緩衝方式，不設定autoply才有效
-->
<!--
<video src="1.mp4" controls width="500" height="280" Autoplay Loop>您的瀏覽器不支援video標籤，請您更換瀏覽器！</video>
-->
<video controls width="500" height="280" Autoplay Loop>
<source src="1.mp4" type="video/mp4"></source>
<source src="1.ogg" type="video/ogg"></source>
您的瀏覽器不支援video標籤，請您更換瀏覽器！
</video>
</body>
</html>
<!doctype html><!--聲明當前文件為html文件-->
<html lang="en"><!--語言為英語-->
<head><!--頭部-->
<meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼-->
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述">
<title>Document</title>
<style>/*css樣式表的衣櫃*/
</style>
</head>
<body><!--身體-->
<!--
audio 屬性
autoplay 自動播放
controls 向用戶顯示播放控制元件
loop 迴圈
preload 是否等載入完再播放
src 要播放的音訊的 URL。
-->
<audio id="myMusic" controls src="music/Beyond-海闊天空.mp3"><audio>
<script>
var myMusic = document.getElementById("myMusic");
myMusic.addEventListener("ended",function(){//增加監聽事件，其中的ended必須是對應的物件的屬性才能監聽
alert("播放完畢！");
});
</script>
</body>
</html>