序文

最近、ライブビデオ（リアルタイムモニタリング）機能を含むデータ視覚化プロジェクトを担当することになったので、<video>ビデオファイルの再生方法しか知りませんが、ライブブロードキャストやリアルタイム再生などについて学び始めました。ここにメモを書き、いくつかの参考記事を転送します。

予備知識

ライブプロトコル

ツールを選択する前に、ライブブロードキャストの関連原則を理解する必要があります。推奨事項は次のとおりです。

ライブプロトコル RTMP、HLS、HTTP FLV - Gopherzhang
- プッシュフロー、プルフロー、および共通プロトコルの紹介
「RTMP、HttpFlv、HLSの正しい姿勢を理解する」 - ノースタワーインフォメーション
- 一般的に使用される 3 つのプロトコルの詳細を紹介します
ライブストリーミングの 3 つの PK: RTMP/HLS/HTTP-FLV - Daniel Live SDK
- プロトコルの概念を補完するものとして

ライブソース

ライブビデオの場合、フロントエンドはライブブロードキャストのソースとして URL アドレスも使用します。このアドレスは、ライブソースのファイルを取得するために使用されます。アドレスは変更されず、ファイルの内容はライブブロードキャストとともに変更されます。

クライアントは時々ライブソースを再取得します。

HLS ライブソースファイル (.m3u8) を例として挙げます。「m3u8 とは何ですか?」を参照してください。ライブソースとm3u8の関係は何ですか？- ミクロ知識を参照

テクノロジーの選択

私の観点から選択するのは次のとおりです。

プロトコル	結論は
RTMP	プロジェクトの要件は、Flash のサポートに関係なく、ストリーミング端末として使用することです。使用しないでください。
HLS	優れたクロスプラットフォーム互換性、早送り再生、高遅延をサポートし、録画したビデオの再生に使用できます。
HTTP-FLV	flv.js を通じて HTML5 互換性を実現でき、遅延が少ないため、リアルタイムの監視ビデオの再生に使用できます。

ツールの選択

HTTP-FLV
- flv.js
  - HTML5でFLV形式の動画を再生するためにbilibili(元)スタッフが開発
  - 元々は、オンサイトの Flash プレーヤーを HTML5 プレーヤーにスムーズに移行するためのオープンソースライブラリでした。
  - ライブストリーミング用にHTTP-FLVをサポート
  - Station B は公式にmpegts.jsの使用を推奨しており、 flv.js プロジェクトを生成するとメンテナンスが軽減されます。
  - いくつかの不満: Bilibili のオープンソース HTML5 プレーヤーカーネル flv.js についてどう思いますか? bazyd
HLS：
- hls.js
  - HLS は Apple によってネイティブにサポートされているプロトコルであり、他のほとんどのブラウザーには互換性がありません。hls.js は他のプラットフォームの HLS と互換性があります。
- ビデオ.js
  - hls.js に基づいて UI と機能をカプセル化するプレーヤープラグインは、HTML5 と Flash をサポートします (Flash をサポートするにはブラウザが必要です)。
  - 欠点: パッケージが肥大化し、UI を変更するのが不便

hls.js が使用するもの

hls.js - npm

npm install hls.js

<video id="video" src="" /

import Hls from 'hls.js'

const video = document.getElementById('video')
const url = 'http://xxxxxx/xxx.m3u8' // 直播视频源（.m3u8）文件地址

if (Hls.isSupported()) {
    
    
  // 如果支持 hls.js（MediaSource Extensions）
  var hls = new Hls()
  hls.loadSource(url)
  hls.attachMedia(video)
  // 自动播放
  hls.on(Hls.Events.MANIFEST_PARSED,function() {
    
    
      video.play()
  })
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    
    
  // 如果支持原生播放
  video.src = url
  // 自动播放
  video.addEventListener('canplay',function() {
    
    
    video.play()
  })
}

<video>に直接追加して自動再生を実現することもできますautoplay="autoplay"。

video.js が使用するもの

Vue の例:

npm i video.js

最初に CSS をインポートします。CDN アドレスを使用することも、npm パッケージを使用することもvideo.js/dist/video-js.css、HTML テンプレートにインポートすることも、js で使用することもできますimport。

コンポーネントを書きます。

<video ref="MyPlayer" class="video-js">
  your browser does not support the video tag
</video>

注: スタイルテーマを使用するには、<video>クラスを要素の対応するタグ (デフォルト) に設定する必要がありますvideo-js。

ドキュメント:ホームページのテーマ

上記は<video>最終的に次のように変換されます。
<div class="video-js">
<video></video>
</div>

スクリプト作成:

import videojs from 'video.js'
import 'video.js/dist/lang/zh-CN.js'

export default {
    
    
  data() {
    
    
    return {
    
    
      url: '',
      player: null
    }
  },
  mounted() {
    
    
    this.player = videojs(this.$refs.MyPlayer, {
    
    
      autoplay: 'muted', // 自动静音播放
      controls: true, // 显示控制器
      disablePictureInPicture: true, // 禁用画中画功能
      language: 'zh-CN', // 语言设置
      sources: [
        {
    
    
          src: this.url,
          type: 'application/x-mpegURL', // m3u8 类型
        },
      ],
    }, () => {
    
    
      // onPlayerReady
    })
  beforeDestroy() {
    
    
    if (this.player) {
    
    
      // 清除 video 元素
      this.player.dispose()
    }
  }
}

フロントエンドはリアルタイムモニタリングビデオノート(hls http-flv)の再生を実現します。

序文