通過Jquery開發的視頻截圖插件,可以幫助我們實現快速的截圖操作,方便我們在工作或學習中使用。下面是Jquery視頻截圖插件的下載方式。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.0/html2canvas.min.js">
<script type="text/javascript">
$(function () {
var $video = $('#myVideo');
var $videoFile = $('#videoFile');
var options = {
videoPlayer: "videojs", //支持 videojs 或 HTML5 video 標簽
videoWidth: 300,
videoHeight: 200,
callback: function (res) {
//返回的res即為截圖生成的圖片地址
console.log(res);
$('#imgBox').attr('src', res)
}
};
$('#snapBtn').on('click', function () {
$videoVideoShot($('#myVideo')[0], options);
});
$('#fileBtn').on('change', function () {
$video.attr("src", URL.createObjectURL($videoFile[0].files[0]));
});
});
</script>
通過以上代碼,我們可以實現視頻截圖功能,安裝此插件后,只需在JS代碼中添加以下內容即可:
$('#myVideo').videoVideoShot(options);
此外,還需要在頁面中添加一個視頻標簽,以及一個上傳文件的按鈕。注意:使用該插件必須引入Jquery和html2canvas庫文件。