Dieses Mal bringe ich Ihnen das Tag VideoThumbnail, das mit JS erfasst werden kann? , was sind die Vorsichtsmaßnahmen für die Aufnahme von Video-Thumbnails mit JS? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
JavaScript Ich habe vor ein paar Tagen ein kleines Projekt durchgeführt, um MP4-Videos mit Wasserfallfluss zu laden Die Methode besteht darin, alle Videos direkt anzuzeigen. Sie werden jedoch feststellen, dass, wenn eines der Videos zu groß ist und hängen bleibt, nicht für alle nachfolgenden Videos Video-Miniaturansichten angezeigt werden können. Ich möchte Video-Miniaturansichten anzeigen, aber ich möchte das Video nicht direkt anzeigen. Der folgende kleine Code wurde durch Suchen und Kombinieren von Elementen implementiert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js">
</script>
<style>
</style>
<script type="text/javascript">//--获取视频缩略图--
function vload(obj) {
$(obj).removeAttr("poster");
var vimg = $("<img/>")[0];
captureImage(obj, vimg);
$(obj).after(vimg);
$(obj).remove();
};
var scale = 0.8; //缩放
function captureImage(video, output) { //截图
try {
var videocanvas = $("<canvas/>")[0];
videocanvas.width = video.videoWidth * scale;
videocanvas.height = video.videoHeight * scale;
videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
output.src = videocanvas.toDataURL("image/png");
delete videocanvas;
} catch(e) {
output.src = "加载动画.gif";
}
};
//--获取视频缩略图--
</script>
</head>
<body>
<video src="视频地址" preload="metadata" onloadeddata='vload(this)' poster="加载动画.gif">
</video>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Verwandte Lektüre:
Detaillierte Erklärung des Promise-Objekts von Angularjs
Detaillierte Erklärung des ng-bind-html Direktive von AngularJS
Das obige ist der detaillierte Inhalt vonKann JS das getaggte Video-Thumbnail eines Videos erfassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
