第一步：創(chuàng)建video用于存放需要截取的視頻文件
<video id="player01" preload="auto" width="640" height="360" playsinline webkit-playsinline>
</video>
第二步：創(chuàng)建canvas畫布，用于繪制截取到的圖片
1，定義創(chuàng)建一個 canvas 標(biāo)簽;
2，指定 canvas 標(biāo)簽的寬高;
3, 調(diào)用canvas元素中的 getContext() 方法(返回一個用于在畫布上繪圖的環(huán)境)。
var canvas = document.createElement("canvas");
canvas.width = player.clientWidth;
canvas.height = player.clientHeight;
// canvas = canvas.getContext("2d")
canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截
要注意的是drawImage()的第一個參數(shù)不再是player而應(yīng)該是**player.childNodes[0]**否則會出現(xiàn)如下報錯：
第三步：將繪制好的圖片轉(zhuǎn)成base64格式
var dataURL = canvas.toDataURL("image/png");
將得到的base64格式的圖片地址添加到網(wǎng)頁中，這樣就完成視頻截圖功能了！文章來源：http://www.zghlxwxcb.cn/news/detail-519134.html
完整示例代碼
function screenShot() {
var player = document.getElementById("player01"); //獲取video的Dom節(jié)點
player.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin屬性，解決跨域問題
var canvas = document.createElement("canvas");
canvas.width = player.clientWidth;
canvas.height = player.clientHeight;
// canvas = canvas.getContext("2d")
canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截
var dataURL = canvas.toDataURL("image/png"); //將圖片轉(zhuǎn)成base64格式
let str = ` <li class="screenshot-item">
<div class="shot-time">2022-10-17</div>
<img src="${dataURL}" alt="" class="shot-img">
</li>`
$("#screenshot-list").append(str); //顯示在頁面中
viewer.destroy(); //需要先銷毀再渲染
viewer = new Viewer(document.getElementById(`screenshot-list`))
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-519134.html
到了這里，關(guān)于JS 截取視頻某一幀圖片 實現(xiàn)視頻截圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
