Reactでビデオの長さを表示する

React

重要な洞察

• loadedmetadata イベントはビデオの長さが利用可能であることを確認します。
• 状態(state)を更新して長さを表示する必要があります。
• ビデオ要素のdurationプロパティを使用して、長さを取得できます。

ステップバイステップガイド

ビデオの長さを表示するには、次の手順に従います:

ステップ1: State でビデオを初期化する

最初に React コンポーネント内でビデオ要素を作成する必要があります。継続時間のための状態を初期化することを確認してください。

後でこの値をメタデータが利用可能になった時に更新したいので、継続時間の初期値を0またはnullに設定してください。

ステップ2: loadedmetadata イベントを組み込む

次のステップは、loadedmetadata イベントを使用してビデオの長さを取得することです。このイベントのためのイベントリスナーを追加します。

ビデオが読み込まれ、メタデータが利用可能になると、このイベントがトリガーされ、ビデオのdurationプロパティにアクセスできます。

ステップ3: 継続時間を持つ状態を更新する

今、新しく取得したビデオの長さで状態(state)を更新できます。

イベントに反応するコールバック関数で、durationの値を設定するには、setDuration 関数を使用します。

ステップ4: 継続時間の状態を表示する

コンポーネントのレンダリング部分で最終的な継続時間を表示するように確認する必要があります。この段階で、正しい継続時間が表示されていることを確認してください。

ビデオ要素から取得した継続時間をユーザーに常に表示するように、レンダリングを適切に調整することが重要です。

ステップ5: 変更のテストと最適化

テストと最適化は重要な側面です。アプリケーションをリロードして、ビデオの長さが正しく表示されるかどうかをテストしてください。

60秒の長さが正しく表示されていることが分かります。問題がある場合は、リスナーが適切に設定されているか、および状態が期待どおりに更新されているかを確認してください。

ステップ6: プレイヤーの拡張機能

ビデオの長さの基本機能がうまく機能する場合、他の機能も考慮に入れることができます。フルスクリーンモードや音量の制御などが含まれます。

これらの最適化により、ユーザーはより充実した体験ができるようになります。

要約

このチュートリアルでは、Reactアプリケーションでloadedmetadataイベントを使用してビデオの長さを表示する方法を学びました。正しいビデオの長さが表示されるように状態が更新されます。改善の実装により、ビデオプレーヤーはさらに使いやすくなります。