最近公司的公眾號(hào)H5頁(yè)面出了一個(gè)需求,因?yàn)榭梢栽诠芾砗笈_(tái)去動(dòng)態(tài)添加一些圖片視頻文字的,要在這個(gè)H5頁(yè)面顯示出來(lái),其中涉及到了視頻封面,說(shuō)截取第一幀,變成圖片去做視頻封面.下面我們來(lái)看一看
- 做需求前,我們先理清一下思路,首先是
H5頁(yè)面,可以去使用video標(biāo)簽,因?yàn)槲业捻?xiàng)目是后臺(tái)返回一串視頻的鏈接地址,所以是視頻地址,然后可以使用canvas標(biāo)簽去繪畫我們的第一幀.
下面我寫了一個(gè)小demo
<template>
<div>
<video ref="myvideo" :poster="imgUrl" controls :src="videoUrl"></video>
<img ref="myimg" :src="imgUrl" alt="" style="width: 640px;height: 368px;">
</div>
</template>
video里的poster是視頻封面的屬性,因?yàn)槲业氖莿?dòng)態(tài)的,視頻是直接從后天去獲取的,所以不固定,使用了v-bind,
img我是用來(lái)測(cè)試視頻封面的
接下來(lái)是JavaScript代碼
<script>
export default {
data () {
return {
videoUrl: 'https://xxx/178e29bd-f544-4a9e-8dcf-136a91fccd2e.mp4',
imgUrl: ''
}
},
created() {
this.getVideoBase64(this.videoUrl);
},
methods: {
getVideoBase64(url) {
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous');//處理跨域
video.setAttribute('src', url);
video.setAttribute('width', 400);
video.setAttribute('height', 240);
video.currentTime = 200; // 這里是截取第幾幀,因?yàn)槲业牡谝粠呛谏?所以截取了第200幀
video.addEventListener('loadeddata', function () {
let canvas = document.createElement("canvas"),
let width = video.width, //canvas的尺寸和圖片一樣
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //繪制canvas
dataURL = canvas.toDataURL('image/jpeg'); //轉(zhuǎn)換為base64
this.imgUrl = dataURL;
console.log(this.imgUrl);
});
}
}
};
</script>
視頻鏈接https://xxx/4a9e-8dcf-136a91fccd2e.mp4這個(gè)你們可以用自己的,
仔細(xì)看上面的代碼,恭喜你! 出錯(cuò)了...
image.png
image.png
image.png
可以看到,我canvas是畫出來(lái)了,鏈接也生成了,但是img標(biāo)簽不顯示,img標(biāo)簽的src屬性顯示unknown,
關(guān)于這個(gè)問(wèn)題,我上網(wǎng)查了,說(shuō)使用this.$refs或者使用require(),但是這個(gè)經(jīng)過(guò)我三個(gè)小時(shí)的麒麟臂,找到了問(wèn)題,基本上出現(xiàn)這個(gè)問(wèn)題都是,你動(dòng)態(tài)綁定的src屬性的值是空,所以加個(gè)延時(shí)器就好了,或者是把addEventListener的function改成箭頭函數(shù)
延時(shí)器
getVideoBase64(url) {
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous');//處理跨域
video.setAttribute('src', url);
video.setAttribute('width', 640);
video.setAttribute('height', 368);
video.currentTime = 200;
video.addEventListener('loadeddata', function () {
let canvas = document.createElement("canvas"),
let width = video.width, //canvas的尺寸和圖片一樣
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //繪制canvas
dataURL = canvas.toDataURL('image/jpeg'); //轉(zhuǎn)換為base64
// console.log(dataURL)
this.imgUrl = dataURL;
// console.log(this.imgUrl)
});
setTimeout(() => {
this.$refs.myimg.src = dataURL;
this.$refs.myvideo.poster = dataURL;
}, 3000)
}
下面是完整代碼(使用箭頭函數(shù))
<template>
<div>
<video ref="myvideo" :poster="imgUrl" controls :src="videoUrl"></video>
<img ref="myimg" :src="imgUrl" alt="" style="width: 640px;height: 368px;">
</div>
</template>
<script>
export default {
data () {
return {
videoUrl: 'https://xxx/178e29bd-f544-4a9e-8dcf-136a91fccd2e.mp4',
imgUrl: ''
}
},
created() {
this.getVideoBase64(this.videoUrl);
},
methods: {
getVideoBase64(url) {
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous');//處理跨域
video.setAttribute('src', url);
video.setAttribute('width', 640);
video.setAttribute('height', 368);
video.currentTime = 200;
video.addEventListener('loadeddata', () => {
let canvas = document.createElement("canvas"),
let width = video.width, //canvas的尺寸和圖片一樣
let height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); //繪制canvas
dataURL = canvas.toDataURL('image/jpeg'); //轉(zhuǎn)換為base64
this.imgUrl = dataURL;
// 使用箭頭函數(shù)就沒(méi)必要使用this.$refs
// this.$refs.myimg.src = dataURL;
// this.$refs.myvideo.poster = dataURL;
});
}
}
};
</script>
效果圖
image.png
好了,今天的就到這里了,如果有幫助到你,請(qǐng)動(dòng)動(dòng)你的小指頭,按一下鼠標(biāo),給我點(diǎn)個(gè)贊吧,謝謝ε＝ε＝ε＝(#>д<)?
