前端上传视频截取某一帧

上传视频的el-upload

<el-upload

            class="upload-demo"

            :action="后端的文件上传地址"

            :on-preview="handlePreview"

            :on-remove="handleRemove"

            :before-remove="beforeRemove"

            :before-upload="onBeforeUploadVideo"

            :on-success="onVideoSuccess"

            multiple

            :limit="1"

            :on-exceed="handleExceed"

          >

            <el-button

              size="small"

              type="primary">

              点击上传

            </el-button>

          </el-upload>

接收某一帧的图片upload，这个是只存放图片，并且直截取图片，不能弹出图片选择框

 <el-upload

                class="avatar-uploader"

                :action="后端上传文件的地址"

                :show-file-list="false"

                :on-success="handleAvatarSuccessSmall"

              >

                <img

                  v-if="videoThumbnail"

                  :src="videoThumbnail"

                  class="avatar">

                <i v-else class="el-icon-plus avatar-uploader-icon"/>

              </el-upload>

script代码

 

  export default {

      data(){

         return {

              videoThumbnail:"",//截取某一帧的图片

          }   

     } ，

     methods: {

       getVideoBasicInfo (videoSrc) {

          return new Promise((resolve, reject) => {

            const video = document.createElement(`video`)

            video.src = videoSrc

            // 视频一定要添加预加载

            video.preload = `auto`

            // 视频一定要同源或者必须允许跨域

            video.crossOrigin = `Anonymous`

            // 监听：异常

            video.addEventListener(`error`, error => {

              debugger

              reject(error)

            })

            // 监听：加载完成基本信息,设置要播放的时常

            video.addEventListener(`loadedmetadata`, () => {

              const videoInfo = {

                video,

                width: video.videoWidth,

                height: video.videoHeight,

                duration: video.duration,

              }

              resolve(videoInfo)

            })

          })

        },



        getVideoPosterInfo (videoInfo) {

          return new Promise(resolve => {

            const { video, width, height } = videoInfo

            video.addEventListener(`canplay`, () => {

              const canvas = document.createElement(`canvas`)

              canvas.width = width

              canvas.height = height

              const ctx = canvas.getContext(`2d`)

              ctx.drawImage(video, 0, 0, width, height)

              const posterUrl = canvas.toDataURL(`image/jpg`)

              resolve({ posterUrl })

            })

          })

        },



        getVideoPosterByFrame (videoSrc, targetTime) {

          return this.getVideoBasicInfo(videoSrc).then(videoInfo => {

            const { video, duration } = videoInfo

            video.currentTime = targetTime

            return this.getVideoPosterInfo(videoInfo)

          })

        },



        /**

         * 获取视频的图片

         * @param {*} url 视频的url

         * @param {*} curTime 时间 节点 当前需要截图的视频，大于视频时间的情况，总时间 除以2 就取中间的

         */

        async getBestPoster (videoSrc, curTime) {

          const videoInfo = await this.getVideoBasicInfo(videoSrc)

          const { duration } = videoInfo

          let curt = curTime

          if (curTime > duration) {

            curt = duration / 2

          }

          const posterInfo = await this.getVideoPosterByFrame(videoSrc, curt)

          const { posterUrl } = posterInfo

          return posterUrl

        },

       //这个是点击上传视频成功的事件 

     onVideoSuccess (response) {

          this.videoSuccess = response.url

          // 获取视频缩略图

          console.log(`this.videoSuccess`, this.videoSuccess)



          this.getBestPoster(response.url, 6).then(imgUrl => {

            console.log(`imgUrl`, imgUrl)

            this.videoThumbnail = imgUrl

          })

            .catch(err  => {

              console.error(`err`, err)

            })

        }，

    }

  }

上述代码写完之后，记得让后端进行一下跨域，因为这是上传到文件服务器上了，现在的操作还拿不到截取的图片，一定要让后端进行Access-Control-Allow-Origin' header跨域