我正在嘗試創建一個函式，其中視頻中的某個時間范圍將顯示為影像。該函式接受 2 個輸入，即視頻的路徑和應顯示時間幀的特定秒。
<!DOCTYPE html>
<html>
<body>
<div id="imageDiv" width="350" height="200"
style="border:1px solid #c3c3c3;">
</div>
<video id="myVideo" width="320" height="176" controls>
</video>
<script type="text/javascript">
// src will be the path to the video
// sec will be the second we want to display from the video
function dispImg(src, sec) {
var video = document.getElementById("myVideo");
video.src = src;
video.type = "video/mp4";
video.currentTime = sec;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, 350, 200);
document.getElementById("imageDiv").appendChild(canvas);
}
dispImg("sample.mp4", 10)
</script>
</body>
</html>
從我當前的代碼中，我希望視頻部分 (id="myVideo") 中顯示的縮略圖也繪制在 div 部分 (id="imageDiv") 中。不幸的是，事實并非如此，因為它在 div 部分全是白色的。
對我的問題有什么建議嗎？感謝您的任何反饋！
uj5u.com熱心網友回復：
可能是視頻加載不夠遠或在您撥打電話時尚未完成搜索drawImage。
如果這是原因，您可以等待事件觸發，如下所示：
function dispImg(src, sec) {
var video = document.getElementById("myVideo");
video.src = src;
video.type = "video/mp4";
// For more events, see:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events
video.addEventListener('seeked', (event) => {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, 350, 200);
document.getElementById("imageDiv").appendChild(canvas);
});
// After creating the event handler, change the position of the video.
video.currentTime = sec;
}
我認為當你使用seeked事件時，你不需要等待諸如canplaythrough.
uj5u.com熱心網友回復：
你可能想看這個由 kmturley 撰寫的 JSFiddle Timeline 示例
function createImage() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
timeline.appendChild(canvas);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420855.html
標籤：
上一篇：間距占位符
下一篇：根據里面的內容設定td的寬度？