2019-09-02 09:58:48 4217瀏覽
本篇文章扣丁學堂HTML5培訓小編給讀者們介紹一下canvas繪制視頻封面的方法的相關資料，文中從提出需求帶最后的解決問題都講述的非常完整，對canvas繪制視頻封面的方法感興趣的小伙伴就隨小編來了解一下吧。
一、需求：上傳視頻，同時截取視頻某一幀作為視頻的封面。
二、實現(xiàn)思路：利用canvas繪制圖像的功能，繪制圖像某一幀，這里繪制了第一幀，很簡單就實現(xiàn)了。
三、代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
<style type="text/css">
video,#container{width: 300px;height: 200px;}
#container>img{width: 100%;}
</style>
</head>
<body>
<video id="video" controls="controls">
<source src="video/video_test.mp4">
</video>
<div id="container"></div>
<script type="text/javascript">
(function() {
var video, container;
var scale = 0.8;
var initialize = function() {
container = document.getElementById("container");
video = document.getElementById("video");
video.addEventListener('loadeddata', captureImage);
};
var captureImage = function() {
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");//轉(zhuǎn)換成base64圖片，地址拿出來就可以直接使用
container.appendChild(img);
};
initialize();
})();
</script>
</body>
</html>
想了解更多內(nèi)容的小伙伴可以登錄扣丁學堂官網(wǎng)咨詢。想要學好HTML5開發(fā)小編給大家推薦口碑良好的扣丁學堂，扣丁學堂有專業(yè)老師制定的HTML5學習路線圖輔助學員學習，此外還有與時俱進的HTML5課程體系和HTML5視頻教程供大家學習，想要學好HTML5開發(fā)技術(shù)的小伙伴快快行動吧。扣丁學堂H5技術(shù)交流群：673883249。
【關注微信公眾號獲取更多學習資料】 【掃碼進入HTML5前端開發(fā)VIP免費公開課】
查看更多關于“HTML5開發(fā)技術(shù)資訊”的相關文章>>
全國免費咨詢熱線
郵箱：codingke@1000phone.com
官方群：148715490
返回頂部