序文プレーヤーをカスタマイズします。すべてのコンポーネントはネイティブなので、少し見苦しいですが、ビジネス ロジックに重点を置きます。 インターフェースはおそらく次のようになります。 インターフェースを見て、このビデオ プレーヤーをどのように実装するかを頭の中で考えてみましょう。自分自身に問いかけるべき質問をいくつか挙げます。
ブラウザにおけるオーディオとビデオに関する知識のまとめビデオエンコーディングビデオは実際には連続して再生される一連の画像です。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 コントロールを表示することを示します (ブラウザーごとにスタイルが異なります)。 共通プロパティ以下はビデオとオーディオの共通プロパティです 一般的なイベントビデオとオーディオの共通イベント 一般的な方法
上記のプロパティ、イベント、メソッドを使用すると、プレーヤーをカスタマイズしたり、プレーヤーを使用してローカルでビデオをプレビューしたりするなど、さまざまなことを行うことができます。 全体的な考え方は次のとおりです
コードの実装コードは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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerコンテナのネットワーク管理とネットワーク分離の実装
>>: MySQL で group by を使用すると常にエラー 1055 が発生します (推奨)
この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...
1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...
目次ストレージエンジンMySQL でサポートされているストレージ エンジン同時実行制御ロック粒子をロ...
目次サーバー計画1. システムコンポーネントをインストールする2. fastdfsをインストールする...
MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...
これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...
最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...
この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...
例:例として、Python コード loop_hello.py を使用します。このコードは、ループ回...
この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...
この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...