ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

序文

プレーヤーをカスタマイズします。すべてのコンポーネントはネイティブなので、少し見苦しいですが、ビジネス ロジックに重点を置きます。

インターフェースはおそらく次のようになります。

インターフェースを見て、このビデオ プレーヤーをどのように実装するかを頭の中で考えてみましょう。自分自身に問いかけるべき質問をいくつか挙げます。

  • このコンポーネントはこれらのプロパティを受け入れます
  • 再生時間、解像度など、ビデオに関する基本情報を取得する方法。
  • 一時停止と再生の方法
  • プログレスバーをドラッグするロジックを実装する方法
  • ビデオの初期読み込みをどのように処理しますか?
  • 動画の再生中に動画が止まった場合の読み込み画面の対処方法

ブラウザにおけるオーディオとビデオに関する知識のまとめ

ビデオエンコーディング

ビデオは実際には連続して再生される一連の画像です。1 秒間に 24 枚の画像が再生される場合、ビデオのフレーム レートは 24 です。

ビデオのサイズが 1920*1080 の場合、つまり画像のサイズは 1920*1080*3 バイトで、1 ピクセルに 3 ビットがあり、それぞれ rbg を格納するため、3 倍になります。30 分のビデオに必要なストレージ容量は次のようになります。

//1 秒のビデオに必要なストレージ容量は次のとおりです。
1920*1080*3*24バイト
//30分のビデオに必要なストレージ容量:
1920*1080*3*24 * 60*30=250.28GB

ご覧のとおり、ビデオは非常に大きいため、圧縮する必要があり、そのためにコーデックの概念が生まれます。ビデオ エンコーディング形式は、圧縮形式として理解できます。異なるエンコーディング形式には、異なる圧縮率があります。一般的なエンコーディング形式には、h264、mpeg4、vp8 などがあります。

また、注意すべき点として、エンコード形式には著作権の問題があり、ブラウザによってサポートされるエンコード形式が異なるため、一部のエンコード形式の動画は一部のブラウザでは再生できなかったり、音声のみで画像が出なかったりすることがあります。

フロントエンド開発者が覚えておく必要があるのは、主流のブラウザでサポートされているビデオ エンコード形式は h264 であるということだけです。

包装形態

ビデオ ファイルには、ビデオ ストリームとオーディオ ストリームのほか、解像度情報、タイトルなどのメタデータも含まれています。このファイルの形式はカプセル化形式と呼ばれ、パッケージ化形式とも言えます。一般的な mp4、webp、mov、mpeg などはすべてカプセル化形式です。

カプセル化形式は、多くの場合、ビデオのエンコーディングとは無関係です。mp4 ファイルの場合、ビデオ ストリームのエンコーディングは h264 または mpeg になる可能性があるため、一部のブラウザーでは同じ mp4 ファイルを再生できるのに、他のブラウザーでは再生できないという問題が発生します。

オーディオとビデオのタグ

<ビデオ コントロール poster="1.jpg" src="1.mp4" ループ ミュート></ビデオ>
<オーディオコントロール src="1.mp3"></オーディオ>

src はリソース アドレスを指定し、poster はビデオのカバー画像を指定し、controls はブラウザーが UI コントロールを表示することを示します (ブラウザーごとにスタイルが異なります)。

共通プロパティ

以下はビデオとオーディオの共通プロパティです

一般的なイベント

ビデオとオーディオの共通イベント

一般的な方法

  • play() はビデオの再生開始を制御します
  • pause() はビデオの再生を一時停止します

上記のプロパティ、イベント、メソッドを使用すると、プレーヤーをカスタマイズしたり、プレーヤーを使用してローカルでビデオをプレビューしたりするなど、さまざまなことを行うことができます。

全体的な考え方は次のとおりです

  1. このコンポーネントはビデオのsrcをパラメータとして受け取ります
  2. onLoadedMetadata イベントをリッスンして、ビデオの長さ (duration)、実際の幅と高さ (videoWidth、videoHeight) を取得します。
  3. 再生/一時停止をクリックすると、ビデオ要素の再生/一時停止メソッドが呼び出されます。
  4. 再生中にonTimeUpdateをリッスンし、現在の再生時間(currentTime)を取得し、プログレスバーの進行状況を計算します。
  5. 進行状況バーをドラッグして、現在のビデオの再生時間を設定します。これは手順 4 の逆です。
  6. ビデオが最初に読み込まれると、「読み込み中」と表示されます。つまり、コンポーネントが最初にレンダリングされるとき、loading 属性はデフォルトで true に設定され、読み込み効果を示します。ビデオ メタデータが読み込まれると、読み込みはキャンセルされます。
  7. ビデオがフリーズすると、「読み込み中」と表示されます。この機能は、onWaiting イベントを監視することで実装されます。遅延がない場合は、読み込みをキャンセルし、onCanPlay イベントを監視します。

コードの実装

コードはReactを使用して実装されており、Vueでも同様です。ビジネスロジックだけに集中してください。必要であれば、この記事を更新して Vue コードを追加できます。

注意: React の DOM ネイティブ イベントの前には on を付け、キャメル ケースで記述する必要があります。

関数formatDuration(期間) {
    var sec_num = parseInt(duration, 10); // 2番目のパラメータを忘れないでください
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (時間 * 3600) - (分 * 60);

    if (時間 < 10) {時間 = "0"+時間;}
    if (分 < 10) {分 = "0"+分;}
    if (秒 < 10) {秒 = "0"+秒;}
    時間+':'+分+':'+秒を返します。
}

React をインポートし、{createRef、useState} を 'react' から取得します。
'./VideoPlayer.css' をインポートします
関数 VideoPlayer({src}){
    定数ビデオDom = createRef()
    // 現在のビデオ再生時間 const [curTime,setCurTime]=useState(0)
    // ビデオの長さ const [duration,setDuration]=useState(0)
    // ビデオの状態、一時停止するかどうか const [isPause,setPause]=useState(true)
    // ビデオの実際のサイズ const [size,setSize]=useState({width:1920,height:1080})
    // ビデオ読み込み const [waiting,setWaiting]=useState(true)

    // ビデオメタデータが正常に読み込まれました const onLoad=(e)=>{
        定数 {期間、ビデオ幅、ビデオ高さ} = e.target
        setDuration(継続時間)
        setSize({幅:ビデオ幅、高さ:ビデオ高さ})
        待機中(false)
    }
    // 再生の一時停止を制御する const handlePlay=(play)=>{
        定数 v = videoDom.current
        if(プレイ){
            一時停止を設定します(false)
            v.play()
        }それ以外{
            一時停止を設定します(true)
            v.一時停止()
        }

    }
    // スライダーをドラッグするとビデオの現在の時間が変更されます
    定数 onSliderChange=(e)=>{
        setCurTime(e.target.value)
        videoDom.current.currentTime=e.target.value

    }
    // ビデオの時間更新をリッスンする
    定数 onTimeUpdate=()=>{
        定数 v = videoDom.current
        setCurTime(v.currentTime)
        if(v.ended){
            ハンドルプレイ(false)
            v.現在の時間=0
        }
    }
    //スタックしたら、読み込みプロンプトを表示します const onWaiting=()=>{
        待機中(true)
    }
    // ビデオを再生できる場合は、読み込みプロンプトを非表示にします const onCanPlay=()=>{
        待機中(false)
    }
    <div className="video-wrapper"> を返します。
            <ビデオ ref={videoDom} src={src} onLoadedMetadata={onLoad} onTimeUpdate={onTimeUpdate} onWaiting={onWaiting} onCanPlay={onCanPlay} ></ビデオ>
            動画の読み込み中に読み込み中と表示されます */
            {待機中 && <div className="waiting">読み込み中...</div>}
            <div className="ビデオコントロール">
                再生ボタン */
                {isPause? <button onClick={()=>{handlePlay(true)}}>再生</button>: <button onClick={()=>{handlePlay(false)}}>一時停止</button>}
                {/* 進捗バー */
                <input type="range" min="0" max={duration} value={curTime} onChange={onSliderChange}/>
                時刻情報と解像度情報*/
                {formatDuration(現在の時間)}/{formatDuration(期間)}
                <span>解像度: {size.width}x{size.height}}</span>
            </div>
        </div>
}
デフォルトの VideoPlayer をエクスポートする

少しスタイルを書いてみました。VideoPlayer.css

.ビデオラッパー{
    幅:800ピクセル;
}
.video-wrapper>ビデオ{
    幅: 100%;
}

.ビデオコントロール{
    上マージン: 20px;
}

この記事の焦点は React ではありません。React は単なるキャリアです。同じロジックは Vue でも簡単に実装できます。焦点は、ビデオ プレーヤーのロジックのカスタマイズにあります。

要約する

ブラウザでビデオプレーヤーを実装するための基本的な考え方とコードに関するこの記事はこれで終わりです。ブラウザでビデオプレーヤーを実装する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Webビデオプレーヤープログラムコード(共通コード)

<<:  Dockerコンテナのネットワーク管理とネットワーク分離の実装

>>:  MySQL で group by を使用すると常にエラー 1055 が発生します (推奨)

推薦する

MySQL 5.7.16 ZIP パッケージのインストールと設定のチュートリアル

この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...

nginx を https をサポートするように設定するためのサンプル コード

1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...

MySQLデータベースでサポートされているストレージエンジンの比較

目次ストレージエンジンMySQL でサポートされているストレージ エンジン同時実行制御ロック粒子をロ...

Linux で FastDFS を使用してイメージ サーバーを構築する

目次サーバー計画1. システムコンポーネントをインストールする2. fastdfsをインストールする...

MySQL で group by を使用すると常にエラー 1055 が発生します (推奨)

MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...

Tomcat で JNDI データ ソースを構成する 3 つの方法

これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

MySQL inndbジョイントインデックスを正しく使用する方法を徹底的に理解するためのケーススタディ

最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...

Vue+js 矢印をクリックして画像を切り替える

この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...

Linux における nohup と & の使い方と違いの詳細な説明

例:例として、Python コード loop_hello.py を使用します。このコードは、ループ回...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...