<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<video :src="videoSrc" crossOrigin="anonymous" controls="controls" width="500" height="400" id="videofile"></video>
<input type="file" name="" id="file" accept="video/*" value="上傳視頻" @change="getBigectURL">
<div id="output"></div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
videoSrc: ''
},
methods: {
getBigectURL(event) {
// console.log('getBigectURL', event)
var current = event.target.files[0]
var fileReader = new FileReader()
fileReader.readAsDataURL(current)
var that = this
fileReader.onload = function(e) {
that.videoSrc = e.currentTarget.result
console.log(that.videoSrc,11111)
const width = 300
const height = 400
var video = document.getElementById("videofile")
console.log(video,66666)
video.currentTime = 5 //必須設置視頻當前時長，要不然會黑屏
var output = document.getElementById("output");
// 創建畫布准備截圖
var canvas = document.createElement('canvas')
// 創建圖片標簽
var img = document.createElement("img");
// 獲取視頻的標簽
video = document.getElementById('videofile')
video.setAttribute('crossOrigin', 'anonymous')
// 設置畫布的寬高
canvas.width = video.clientWidth
canvas.height = video.clientHeight
// 圖片繪制
video.onloadeddata = (() => {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
var dataURL = canvas.toDataURL('image/jpeg')
// console.log(dataURL,"-----")
img.src = dataURL;
img.width = 400;
img.height = 300;
// 添加到output盒子里面
output.appendChild(img);
// console.log(img)
})
}
},
}
})
</script>
</html>