vue 擷取視訊第一幀

　　最近自己寫專案，在專案中涉及功能點又擷取視訊幀的點；需求澄清：移動端封面展示，平臺上傳圖片（多張上傳）取第一張上傳圖片為封面圖；如上傳視訊則擷取視訊第一幀作為封面圖；
　　
　　實現思路；h5  video標籤，canvas；上傳視訊成功之後把返回視訊地址放到video標籤內，通過canvas畫布擷取視訊第一幀；
　　
　　元件程式碼：
　　
　　<el-form-item ref="videocontentvideo" style="display:none;">
　　
　　<img :src="imgurl">
　　
　　<video width="320" height="240" controls id="upvideo">
　　
　　</video>
　　
　　<img :src="modlevidel" />
　　
　　</el-form-item>
　　
　　複製程式碼
　　
　　<el-form-item class="upload-demo-content" v-show="formLabelAlign.type==2">
　　
　　<el-upload class="upload-demo" :limit="1" :on-exceed="exceedhandle" drag :file-list="filsListArray" :action="configuploadurl" :on-success="successuploadhandle" accept="video" name="fileList" :before-upload="beforeUploadVideo">
　　
　　<i class="el-icon-upload"></i>
　　
　　<div class="el-upload__text">將視訊檔案拖到此處，或
　　
　　<em>點選上傳</em>
　　
　　</div>
　　
　　<div class="el-upload__tip" slot="tip"></div>
　　
　　</el-upload>
　　
　　</el-form-item>
　　
　　複製程式碼
　　
　　複製程式碼
　　
　　successuploadhandle(response, file, fileList) {
　　
　　this.formLabelAlign.video = this.modlevidel =
　　
　　response.data.fileList[www.mingrenf178.com].url;
　　
　　this.filsListArray =www.mingrenf178.com [];
　　
　　this.filsListArray.push({
　　
　　name: this.formLabelAlign.video,
　　
　　url: this.formLabelAlign.video
　　
　　});
　　
　　this.findvideocover(www.mcyllpt.com);
　　
　　},
　　
　　複製程式碼
　　
　　exceedhandle(files, fileList) {
　　
　　this.$message.error("只能上傳一個視訊額");
　　
　　},
　　
　　複製程式碼
　　
　　beforeUploadVideo(file) {
　　
　　if (
　　
　　[
　　
　　"video/mp4",
　　
　　"video/ogg",
　　
　　"video/flv",
　　
　　"video/avi",
　　
　　"video/wmv",
　　
　　"video/rmvb"
　　
　　].indexOf(file.type) == -1
　　
　　) {
　　
　　this.$message.error("請上傳正確的視訊格式");
　　
　　return false;
　　
　　}
　　
　　},
　　
　　複製程式碼
　　
　　主要程式碼=》擷取視訊第一幀：
　　
　　複製程式碼
　　
　　findvideocover() {
　　
　　let _this = this;
　　
　　this.$nextTick(() => {
　　
　　let video = document.getElementById("upvideo");
　　
　　let source = document.createElement("source");
　　
　　// source.src = require("../../assets/5b086751dbb7af1ea8fa8d05e66fe5c3.mp4");this.formLabelAlign.video
　　
　　source.src = this.formLabelAlign.video;
　　
　　source.type = "video/mp4";
　　
　　video.appendChild(source);
　　
　　video.addEventListener("loadeddata", function() {
　　
　　var canvas = document.createElement("canvas");
　　
　　canvas.width = "320";
　　
　　canvas.height = "320";
　　
　　canvas
　　
　　.getContext("2d")
　　
　　.drawImage(video, 0, 0, canvas.width, canvas.width);
　　
　　var img = document.createElement("img");
　　
　　let imgsrc = canvas.toDataURL("image/png");
　　
　　_this.Videoframehandle(imgsrc.split(",")[1]);
　　
　　});
　　
　　});
　　
　　},
　　
　　複製程式碼
　　
　　視訊預覽：
　　
　　複製程式碼
　　
　　showvideohandle() {
　　
　　this.$alert(
　　
　　`<video width="320" height="240" controls>
　　
　　<source src="${
　　
　　this.filsListArray[0].url
　　
　　}"  type="video/mp4">
　　
　　您的瀏覽器不支援 HTML5 video 標籤。
　　
　　</video>`,
　　
　　"視訊預覽",
　　
　　{
　　
　　dangerouslyUseHTMLString: true
　　
　　}
　　
　　);
　　
　　},