HTML5提供了一種可以直接在網頁上錄制視頻的功能，而且與Flash等插件不同，使用HTML5進行視頻錄制不需要任何額外的插件或軟件，這讓它成為了一個非常實用的工具。下面是一個HTML5視頻錄制代碼實例，你可以學習并嘗試它：
<html>
<head>
<title>HTML5視頻錄制</title>
</head>
<body>
<h1>HTML5視頻錄制</h1>
<video id="recorded" controls></video>
<div>
<button id="startButton">開始錄制</button>
<button id="stopButton">停止錄制</button>
</div>
<script>
var video = document.querySelector('#recorded');
var startButton = document.querySelector('#startButton');
var stopButton = document.querySelector('#stopButton');
var mediaRecorder;
var recordedBlobs;
startButton.addEventListener('click', function() {
var options = {mimeType: 'video/webm;codecs=h264'};
recordedBlobs = [];
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
console.error('創建MediaRecorder失敗', e);
return;
}
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
console.log('MediaRecorder正在錄制');
});
stopButton.addEventListener('click', function() {
mediaRecorder.stop();
console.log('MediaRecorder停止錄制');
});
function handleDataAvailable(event) {
if (event.data && event.data.size >0) {
recordedBlobs.push(event.data);
}
}
function handleStop(event) {
console.log('Recorder stopped: ', event);
var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
video.src = window.URL.createObjectURL(superBuffer);
}
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function(stream) {
window.stream = stream;
video.srcObject = stream;
});
</script>
</body>
</html>在這個代碼實例中，我們使用了HTML5提供的MediaRecorder對象來錄制視頻。我們先在頁面中創建了一個video元素，然后創建了兩個button元素用于開始和停止錄制。
當用戶點擊開始按鈕時，我們先初始化一個options對象用于指定錄制的視頻類型，然后創建MediaRecorder對象，并指定所要錄制的流（這里我們需要在前面的代碼中獲取用戶的媒體授權）。然后我們將MediaRecorder對象的onstop和ondataavailable事件處理函數設置為handleStop和handleDataAvailable，當MediaRecorder對象停止錄制或有新的數據可用時，這兩個函數會被調用。
當用戶點擊停止按鈕時，我們只需要簡單地調用MediaRecorder對象的stop函數就可以停止錄制了。
當錄制完成后，我們需要將錄制的視頻呈現在頁面中。為此，我們可以使用URL.createObjectURL函數將Blob對象轉換為一個可用于表示二進制數據的URL，然后將這個URL賦給video元素的src屬性即可顯示出來。
這就是一個HTML5視頻錄制代碼實例，希望對你有所幫助。
上一篇html5視頻控制代碼
下一篇html5視頻廣告代碼