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

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

序文

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

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

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

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

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

ビデオエンコーディング

ビデオは実際には連続して再生される一連の画像です。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 が発生します (推奨)

推薦する

Linux ハードウェア構成コマンドの例

ハードウェア ビュー コマンドシステム # uname -a # カーネル/オペレーティング システ...

MySQL に接続されている IP アドレスを表示する方法の例

具体的な方法:まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...

MySQL のストレージ エンジンの違いと比較

MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...

MySQLの制限を使用して大規模なページングの問題を解決する方法

序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...

Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

navicatを使用してテストと学習を行います。まず、 set autocommit = 0;を使用...

LinuxにMySQLをインストールするための詳細なチュートリアル

すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...

MySQL データ型の選択原則

目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...

Docker Swarm 外部検証ロードバランシングが機能しない場合の解決策

問題の説明Centos7 をローカルにインストールして 3 つの仮想マシンを作成し、Swarm クラ...

HTML テーブルの境界線を設定する際のヒント

HTML を初めて使用する多くの人にとって、テーブル <table> は最もよく使用され...

フォームの「Enter」、「Submit」、「Enter != Submit」を削除する方法

「Enter != Submit」問題を実装するには、通常、「ボタンの種類」と「入力ボックスの数」か...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

Nginx のステータス監視とログ分析の詳細な説明

1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...

nginx 設定の場所の概要の場所の通常の書き込みと書き換えルールの書き込み

1. 場所の正規表現例を見てみましょう: 場所 = / { # 完全一致 / 、ホスト名の後に文字列...