HTML5提供了一種可以直接在網(wǎng)頁上錄制視頻的功能，而且與Flash等插件不同，使用HTML5進(jìn)行視頻錄制不需要任何額外的插件或軟件，這讓它成為了一個(gè)非常實(shí)用的工具。下面是一個(gè)HTML5視頻錄制代碼實(shí)例，你可以學(xué)習(xí)并嘗試它：
<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('創(chuàng)建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>在這個(gè)代碼實(shí)例中，我們使用了HTML5提供的MediaRecorder對(duì)象來錄制視頻。我們先在頁面中創(chuàng)建了一個(gè)video元素，然后創(chuàng)建了兩個(gè)button元素用于開始和停止錄制。
當(dāng)用戶點(diǎn)擊開始按鈕時(shí)，我們先初始化一個(gè)options對(duì)象用于指定錄制的視頻類型，然后創(chuàng)建MediaRecorder對(duì)象，并指定所要錄制的流（這里我們需要在前面的代碼中獲取用戶的媒體授權(quán)）。然后我們將MediaRecorder對(duì)象的onstop和ondataavailable事件處理函數(shù)設(shè)置為handleStop和handleDataAvailable，當(dāng)MediaRecorder對(duì)象停止錄制或有新的數(shù)據(jù)可用時(shí)，這兩個(gè)函數(shù)會(huì)被調(diào)用。
當(dāng)用戶點(diǎn)擊停止按鈕時(shí)，我們只需要簡(jiǎn)單地調(diào)用MediaRecorder對(duì)象的stop函數(shù)就可以停止錄制了。
當(dāng)錄制完成后，我們需要將錄制的視頻呈現(xiàn)在頁面中。為此，我們可以使用URL.createObjectURL函數(shù)將Blob對(duì)象轉(zhuǎn)換為一個(gè)可用于表示二進(jìn)制數(shù)據(jù)的URL，然后將這個(gè)URL賦給video元素的src屬性即可顯示出來。
這就是一個(gè)HTML5視頻錄制代碼實(shí)例，希望對(duì)你有所幫助。