vue プロジェクトで大きなビデオを再生するには m3u8 形式を使用します

1. 背景

Web サイトで大きなビデオを再生すると、フリーズしてスムーズに再生できないことがよくあります。解決策を探していると、MP4 再生の代わりに m3u8 ストリーミングメディアの再生を使用することを提案する記事がたくさん見つかりました。テストを行ったので、テスト中に発生した問題を要約して記録します。およびその解決策。

2. テストの実施

1.ビデオ変換にはffmpegを使用します

1) ffmpegをダウンロード

FFmpeg ギットハブ

2) コンソールでコマンドを使用するための設定を環境変数パスに追加します。

3) コマンドを使用して、MP4 形式のビデオを m3u8 形式に変換します

ffmpeg.exe -i video.mp4 -hls_time 60 -hls_list_size 0 -f hls a.m3u8

上記のコマンドで、-i video.mp4 は入力ビデオソースが video.MP4 であることを示します (ビデオディレクトリはこのコマンドで開かれています)。また、-hls_time 60 はビデオセグメンテーション時間が 60 秒であることを示します (映像の連続性を確保するため、ビデオ長はフレーム数で切り出されます（数秒の変動幅があります）、-hls_list_size 0は、分割されたすべてのフラグメントを保持することを意味します（この命令が追加されない場合、5つのフラグメントのみ）デフォルトで保持されます)、-f hls は、ビデオを出力するために hls ストリーミングプロトコルを使用することを意味します (通常、これを追加する必要はありません。通常、segment コマンドは入力ファイルを自動的に検出し、ファイル拡張子に基づいて出力形式を決定します) a.m3u8 は、カットされたビデオのインデックスがこの名前のファイルとして出力されることを示します。

コマンドを実行すると、a.m3u8 インデックスファイルといくつかの ts ビデオファイルが出力されます。

※コマンドで変換したところ、全体の動画サイズがかなり小さくなりました約2GのMP4動画を約200Mの小さなビデオクリップに変換しました画質と体性感覚に大きな違いはありませんオーディオの再生については、具体的な原理はまだ理解できていませんが、落とし穴がないかどうか、しばらく試してみてください。

2.VUEプロジェクトの利用

1) プロジェクトは、videojs ビデオ再生ライブラリとそのストリーミングメディア送信プロトコルのサポートをインストールします。

npm install --save video.js

npm install --save videojs-contrib-hls

ビデオを再生する必要があるページに videojs と対応するスタイルファイルを導入します。

「video.js」からvideojsをインポートします。

import "video.js/dist/video-js.css";

video-js.css スタイルファイルが vscode の自動補完で見つかりません。スタイルが設定されていない場合、ページには以下の構成情報が表示されます。

サンプルコード:

<template>
  <q-page padding>
    <div class="row">
      <div class="col-6">
        <video id="myVideo" class="video-js vjs-default-skin vjs-fluid"></video>
      </div>
    </div>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";

function options(src, type) {
  return {
    autoplay: true,
    muted: false,
    loop: false,
    controls: true,
    preload: "auto",
    fluid: true,
    sources: [
      {
        type,
        src,
      },
    ],
    notSupportedMessage: "视频资源无法加载",
    textTrackDisplay: false,
  };
}

export default defineComponent({
  name: "PageIndex",

  mounted() {
    this.$nextTick(() => {
      this.getVideo();
    });
  },

  data() {
    return {
      attachmentLink: "http://localhost/resource/demo.m3u8",
      srctype: "application/x-mpegURL",
      attachmentLink1: "http://localhost/resourc/1-引言.mp4",
      srctype1: "video/mp4",
    };
  },
  methods: {
    getVideo() {
      let player = videojs("myVideo", options(this.attachmentLink, this.srctype), () => {
        //player.play();
        player.on("loadstart", function () {
          console.log("Start load video");
        });
        player.on("play", function () {
          console.log("Play video");
        });
        player.on("pause", function () {
          console.log("Pause video");
        });
        player.on("ended", function () {
          console.log("Video end");
        });
      });
    },
  },
});
</script>

3. 質問

1. m3u8 ビデオが正常に再生できない場合は、このタイプの MIME タイプが許可されているかどうかを確認できます。

.m3u8

.ts

2. ビデオ再生をコンポーネントにカプセル化すると、呼び出し例外の繰り返しとレイアウトの不整合の問題が発生します。

1) ビデオコンポーネントを繰り返し呼び出す場合は、固定 ID を動的スプライシング ID に変更する必要があります。また、新しいプレーヤーエンティティを作成する前に、対応するエンティティが作成されているかどうかを確認し、古いリソースを適時に解放する必要があります。videojs() がプレーヤーエンティティを作成するときに、重複したエンティティによってエラーが発生しないように、ID とリソースの解放に注意してください。私は、beforeDestroy() ライフサイクル関数を持つ Quasar フレームワークを使用しましたが、他のフレームワークにも対応する関数がある可能性があります。

2) vjs-fluid の適応は、上部 div コンテナの幅と高さに基づいています。コンポーネントとしてカプセル化した後、ビデオの上部 div コンテナの高さの定義に注意する必要があります。そうでない場合、ビデオは高さに適応した後に上部コンテナを破裂させると、上部コンテナが親ページ上で爆発します。他のコンテンツをカバーします。

コンテナーのバーストの問題を回避するために、上部 div の幅と高さを定義しました。16:9 の固定幅と高さ、および vjs-16-9 スタイルが使用されます。これは、vjs-fluid が幅を定義した後にコントロールを適応させるためです。 div. サイズに黒いエッジが表示されますが、将来的にはより良い解決策があるかどうかを検討することができます。

4. まとめ

上記は、プロジェクト変更中に発生した問題とその解決策です。後で検討できるように記録してまとめておきます。他の人が同様の問題に遭遇した場合にも、参考として使用できます。