html5頁面怎么播放音頻和視頻
一、總結
一句話總結：html5 音頻和視頻標簽：（audio And video），局限是不同瀏覽器對音頻視頻的格式支持很讓人頭痛
1、最基礎的音頻和視頻標簽的使用？
直接是標簽里面帶src接對應音頻視頻的位置
<audio controls src="http://www.w3school.com.cn/i/song.mp3"> </audio>
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls> 您的瀏覽器不支持video元素 </video>
2、video標簽如何帶字幕？
video標簽的使用（帶字幕文件）
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg"> <!--此處添加字幕文件--> <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default> 您的瀏覽器不支持html5 video </video>
<!--字幕文件的格式如下：--> <pre> WEBVTT 1 00:00:00.240 --> 00:00:04.130 大家好 最近 Visual Studio 2013 做了一些更新 2 00:00:04.140 --> 00:00:08.110 那我們今天請到 twMVC 的 Dino 來為我們介紹這個更新里面關於 SASS Editor 的部分 3 00:00:18.120 --> 00:00:19.280 </pre>
3、音頻視頻標簽多source的情況怎么選擇？
audio source元素
<audio controls> <source src="http://www.w3school.com.cn/i/song.mp3"> <source src="http://www.w3school.com.cn/i/song.ogg"> </audio>
source提供多個音頻元素，供瀏覽器自身播放能力自動選擇，如果支持的不知一種，瀏覽器會選擇第一個來源。
4、抓取視頻的新途徑？
通過canvas
1 <!doctype html> 2 <meta charset="utf-8"> 3 <html> 4 <title></title> 5 <body> 6 <video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px"> 7 </video> 8 <canvas id="timeLine" width="1920px" height="758px"> 9 </canvas> 10 </body> 11 <script> 12 var updataInterval = 100;//抓取幀的時間間隔 13 var frameWidth = 1920;//時序中幀的尺寸 14 var frameHeight = 758; 15 //時序中總的幀數 16 var frameRows = 4; 17 var frameColumns = 4; 18 var frameGrid = frameRows*frameColumns; 19 //當前幀 20 var frameCount = 0; 21 //播放完取消計時器 22 var intervalid; 23 var videoStart = false; 24 //添加updateFrame函數 25 function updateFrame(){ 26 var video = document.getElementById('movies'); 27 console.log(video.videoWidth); 28 console.log(video.videoHeight); 29 var timeline = document.getElementById('timeLine'); 30 var cxt = timeline.getContext('2d'); 31 //根據幀數計算出當前播放的播放的位置 32 //然后以視頻為輸入參數繪制圖像 33 var framePos = frameCount%frameGrid; 34 var frameX = (framePos%frameColumns)*frameWidth; 35 var frameY = (framePos%frameRows)*frameHeight; 36 cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight); 37 frameCount++; 38 } 39 function startVideo(){ 40 if(videoStart){ 41 return; 42 } 43 videoStart = true; 44 updateFrame(); 45 intervalId = setInterval(updateFrame,updataInterval); 46 } 47 //處理用戶輸入 48 var timeLine = document.getElementById('timeLine'); 49 timeLine.onclick = function(evt){ 50 var offX = evt.layerX - timeLine.offsetLeft; 51 var offY = evt.layerY - timeLine.offsetTop; 52 var clickedFrame = Math.floor(offY/frameHeight)*frameRows; 53 clickedFrame += Math.floor(offX/frameWidth); 54 var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame); 55 if(clickedFrame > (frameCount%16)){ 56 seekedFramed = frameGrid; 57 } 58 if(seekedFramed < 0){ 59 return; 60 } 61 var video = document.getElementById('movies'); 62 video.currentTime = seekedFramed*updataInterval/1000; 63 frameCount = seekedFramed; 64 } 65 function stopTimeLine(){ 66 clearInterval(intervalId); 67 } 68 </script> 69 </html>
二、html5 音頻和視頻（audio And video）
1、音頻和視頻
Web 上的視頻
直到現在，仍然不存在一項旨在網頁上顯示視頻的標准。
今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標准方法。
視頻格式
當前，video 元素支持三種視頻格式：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
補充：在火狐最新版本下發現其是支持MP4視頻格式的，感謝樓主@正在緩沖的補充！
Web 上的音頻
直到現在，仍然不存在一項旨在網頁上播放音頻的標准。
今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 audio 元素來包含音頻的標准方法。
audio 元素能夠播放聲音文件或者音頻流。
音頻格式
當前，audio 元素支持三種音頻格式：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
簡單的video元素創建
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls> 您的瀏覽器不支持video元素 </video>
視頻默認的大小是300*150
controls：顯示視頻的默認的控件
video標簽的使用（帶字幕文件）
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg"> <!--此處添加字幕文件--> <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default> 您的瀏覽器不支持html5 video </video>
<!--字幕文件的格式如下：--> <pre> WEBVTT 1 00:00:00.240 --> 00:00:04.130 大家好 最近 Visual Studio 2013 做了一些更新 2 00:00:04.140 --> 00:00:08.110 那我們今天請到 twMVC 的 Dino 來為我們介紹這個更新里面關於 SASS Editor 的部分 3 00:00:18.120 --> 00:00:19.280 </pre>
audio元素創建
<audio controls src="http://www.w3school.com.cn/i/song.mp3"> </audio>
controls:顯示通用的用戶控件，包括開始，停止，跳播，以及音量控制
audio source元素
<audio controls> <source src="http://www.w3school.com.cn/i/song.mp3"> <source src="http://www.w3school.com.cn/i/song.ogg"> </audio>
source提供多個音頻元素，供瀏覽器自身播放能力自動選擇，如果支持的不知一種，瀏覽器會選擇第一個來源。
媒體的控制 自動播放
<audio autoplay controls> <source src="http://www.w3school.com.cn/i/song.mp3"> 您的瀏覽器不支持audio </audio>
autoplay:設置音頻自動播放
2、可腳本話的視頻和音頻
判斷瀏覽器支持情況
// 判斷瀏覽器是否支持audio或者video元素最簡單的辦法是用腳本動態創建它，然后檢測特定的函數是否存在 var hasVideo = !!(document.createElement('video').canPlayType);
js中控制音頻或者視頻的內置的方法
load() 加載音頻或者視頻文件，為播放做准備。通常情況下不需要調用，除非是動態創建的的元素，用來在在播放前加載
play() 加載（如果還未加載完成）並播放音頻或視頻文件，除非音頻或視頻已經暫停在其他位置了，否則從頭開始
pause() 暫停處於播放的視頻或者音頻文件
canPlayType(type) 試video元素是否支持給定MIME類型的文件
js中控制音頻或者視頻的內置只讀屬性
duration 整個媒體文件的播放時長，以s為單位，如果無法獲取時長返回NaN paused 如果媒體文件當前被暫停，則返回true,如果還未開始播放也返回true ended 如果媒體文件已經播放完畢。返回true startTime 返回最早的播放起始時間，一般是0.0，除非是從緩沖過的文件，並且一部分已經不在緩沖區了！ error 在發生錯誤的時候返回的錯誤代碼 currentSrc 以字符串的形式返回當前正在播放的或已經加載的文件，對應於瀏覽器就是source選擇的文件
js中可被腳本修改並影響播放的部分媒體元素的特性
autoplay 將媒體文件設置為創建后自動播放，或者查詢是否已經設置autoplay
loop 如果媒體文件已經播放完畢后能重新播放則返回true,或者媒體將媒體文件設置為循環播放
currentTime 以s為單位返回從開始播放到現在所用的時間，在播放過程中，設置currentTime來進行搜索，並定位到媒體文件特定的位置
controls 顯示或隱藏用戶控制界面，或者查詢用戶控制界面當前是否可見
volume 在0.0到1.0之前設置音頻音量的值，或者查詢當前音量的相對值
muted 為音頻文件設置靜音或者消除靜音，或者檢測當前是否為靜音
autobuffer 通知播放器在媒體文件開始播放前是否進行緩沖加載，如果媒體文件設置autoplay,則忽略該屬性
video元素的額外特性
poster 在視頻加載完成之前，代表視頻內容的圖片的url地址，該屬性可讀可寫，可以隨意修改
width,height 取或設置顯示的尺寸。如果設置的寬度與視頻本身大小不匹配，可能導致四周會出現黑色區域
videoWidth,videoHeight 返回視頻固有的寬度和高度，只讀
3、html5通過canvas抓取視頻（實例演示）
<!doctype html>
<meta charset="utf-8">
<html>
<title></title>
<body>
<video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">
</video>
<canvas id="timeLine" width="1920px" height="758px">
</canvas>
</body>
<script>
var updataInterval = 100;//抓取幀的時間間隔
var frameWidth = 1920;//時序中幀的尺寸
var frameHeight = 758;
//時序中總的幀數
var frameRows = 4;
var frameColumns = 4;
var frameGrid = frameRows*frameColumns;
//當前幀
var frameCount = 0;
//播放完取消計時器
var intervalid;
var videoStart = false;
//添加updateFrame函數
function updateFrame(){
var video = document.getElementById('movies');
console.log(video.videoWidth);
console.log(video.videoHeight);
var timeline = document.getElementById('timeLine');
var cxt = timeline.getContext('2d');
//根據幀數計算出當前播放的播放的位置
//然后以視頻為輸入參數繪制圖像
var framePos = frameCount%frameGrid;
var frameX = (framePos%frameColumns)*frameWidth;
var frameY = (framePos%frameRows)*frameHeight;
cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight);
frameCount++;
}
function startVideo(){
if(videoStart){
return;
}
videoStart = true;
updateFrame();
intervalId = setInterval(updateFrame,updataInterval);
}
//處理用戶輸入
var timeLine = document.getElementById('timeLine');
timeLine.onclick = function(evt){
var offX = evt.layerX - timeLine.offsetLeft;
var offY = evt.layerY - timeLine.offsetTop;
var clickedFrame = Math.floor(offY/frameHeight)*frameRows;
clickedFrame += Math.floor(offX/frameWidth);
var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);
if(clickedFrame > (frameCount%16)){
seekedFramed = frameGrid;
}
if(seekedFramed < 0){
return;
}
var video = document.getElementById('movies');
video.currentTime = seekedFramed*updataInterval/1000;
frameCount = seekedFramed;
}
function stopTimeLine(){
clearInterval(intervalId);
}
</script>
</html>
html5的audio和video元素的引入，讓html5在媒體選擇上可以不需要通過引入插件的形式來播放音頻和視頻文件，此外音頻和視頻的集成API方法也可以方便我們控制音頻和視頻！
參考： html5 音頻和視頻（audio And video） - 史洲宇 - 博客園
https://www.cnblogs.com/shizhouyu/p/4845989.html