ビデオの最初のフレームをバッチキャプチャします

バッチ インターセプト バックエンド インターフェイスによって返されたビデオ アドレス データの最初のフレームがカバーとしてリストに表示されます。

共有を実現するために vue2 の Mixins を使用しています

1: myMinxins によって共有される js コンポーネントを作成します (プロジェクト内の複数の場所で使用する必要があるため)

 2: 第 2 ステップ: 関数の作成 - 最初のフレーム コードを抽出します (関数コードを直接コピーできます)

 コード：

      getVideoBase64(url) {
            return new Promise(function (resolve, reject) {
              let dataURL = "";
              let video = document.createElement("video");
              video.setAttribute("crossOrigin", "anonymous"); //处理跨域
              video.setAttribute("src", url);
              video.setAttribute("width", 400);
              video.setAttribute("height", 240);
              video.setAttribute("preload", "auto");
              video.setAttribute('crossOrigin', 'anonymous');
              video.addEventListener("loadeddata", function () {
                let canvas = document.createElement("canvas"),
                  width = video.width, //canvas的尺寸和图片一样
                  height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
                resolve(dataURL);
              });
            })
          },

ステップ 3: 必要なページ コンポーネントの myMixins に最初のフレーム関数 getVideoBase64 を導入して呼び出します。

(1): インポート

import { myMixins } from '../../utils/myMixins'

(2): マウント

mixins: [myMixins],   //与生命周期 & data都是同级的位置

(3): 使用します (myMixins の最初のフレーム関数 getVideoBase64 を呼び出します)

例如：

        // res.data.currentClipList是一个数据 里面有多个对象数据
        res.data.currentClipList.forEach(item => {
          this.getVideoBase64(item.videoUrl).then((data) => {  //videoUrl视频key
            item.coverUrl = data  //coverUrl 图片key
          });
        });
        //处理完毕后将数据进行赋值渲染展示
        this.clipList = res.data.currentClipList;

この時点で、表紙画像が認識されます (小さな問題: データが多い場合、特定の表紙が抽出されないことがあります。もう一度更新すると、抽出されたことがわかります)。