验证中...
gistfile1.txt
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>获取视频第一帧</title>
</head>
<body>
<input type="file" id="aa" accept="video/mp4">
</body>
<script>
document.querySelector('#aa').onchange = function () {
var file = this.files[0]
fileToBase64(file, function (res) {
var v = document.createElement('video')
v.setAttribute('src', res);
v.currentTime = 1 //一秒12桢
v.setAttribute("crossOrigin", 'Anonymous')
v.addEventListener('loadeddata', function () {
var c = document.createElement("canvas")
var ctx = c.getContext('2d')
var image = new Image()
var height = v.videoHeight
var width = v.videoWidth
c.height = height
c.width = width
ctx.drawImage(v, 0, 0, width, height)
image.src = c.toDataURL('image/jpeg', 1)
document.body.appendChild(image)
}, false);
})
}
function fileToBase64(file, callback) {
//保证file不为undefined,避免报错
if (file) {
var fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = function (e) {
callback ? callback(e.target.result) : null
}
}
}
</script>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search