HTMLでメディアプレーヤーを構築します

HTMLのメディアの可能性は、HTML5にビデオとオーディオ要素の導入とともに離陸しました。これで、FlashやSilverlightなどの独自のテクノロジーを必要とせずに、Webサイトにビデオとオーディオを埋め込むことができます。

ブラウザのサポートをこれまで以上にサポートし、WebVTTのような新しいテクノロジーが到着し始めていることは、これらの新しいHTML要素を知る（または再検討する）絶好の機会です。

SitePointは、HTML5メディア要素でスピードを上げるコースであり、CSSとJavaScriptで次のレベルに進む方法を作成しました。

コースのビデオがボールを転がすビデオで、カスタムメディアプレーヤーのHTMLコードを構築する方法を示しています。 （後のビデオでは、CSSとJavaScriptでこれに基づいて構築する方法を示して、完全に機能するカスタムメディアプレーヤーを作成します。） プレーヤーをロードする…

このデモのソースファイルをGitHubでダウンロードできます。

これが便利であることがわかった場合は、SitePointのフルコースをチェックしてください。これにより、基本から完全に機能するカスタムメディアプレーヤーの開発、オーディオとビデオの両方をプレイします。 HTMLでメディアプレーヤーの構築に関するよくある質問（FAQ）メディアプレーヤーを作成するために必要な基本的なHTMLタグは何ですか？

htmlでメディアプレーヤーを作成するには、

またはタグを使用する必要があります。これらのタグは、Webページにビデオまたはオーディオコンテンツを埋め込むために使用されます。

タグは、メディアのソースファイルを指定するためにこれらのタグ内で使用されます。 「コントロール」属性を

またはタグに追加して、プレイ、一時停止、およびボリュームコントロールを提供できます。レスポンシブ？

メディアプレーヤーをレスポンシブにするには、CSSを使用できます。ビデオの幅を100％に、高さを自動に設定することにより、ビデオプレーヤーはコンテナのサイズに応じてスケーリングします。これにより、メディアプレーヤーがさまざまな画面のサイズとオリエンテーションに適応することが保証されます。

メディアプレーヤーに字幕またはキャプションを追加するにはどうすればよいですか？タグ。このタグは

タグ内で使用され、「種類」、「SRC」、および「Srclang」属性が必要です。 「種類」属性は、テキストトラックのタイプを指定し、「SRC」属性はテキストトラックのソースファイルを指定し、「srclang」属性はテキストトラックの言語を指定します。

メディアプレーヤーのコントロールをカスタマイズするにはどうすればよいですか？

メディアプレーヤーのコントロールをカスタマイズするには、JavaScriptとCSSが必要です。 「コントロール」属性を

さまざまなブラウザとの互換性を確保するために、メディアプレーヤーをさまざまなブラウザと互換性のあるものにするにはどうすればよいですか。さまざまな形式のソースファイル。ブラウザは、サポートする最初のソースファイルを使用します。これは、

またはタグ内の複数の

タグを使用して行うことができます。 タグの「ポスター」属性を使用して、メディアプレーヤーにポスター画像を追加します。 「ポスター」属性は、ビデオのダウンロード中に表示される画像を指定します。ユーザーが再生ボタンにヒットするまで指定します。 >またはタグの「プリロード」属性を使用しています。 「Preload」属性は、ページが読み込まれたときにオーディオ/ビデオをロードする必要があるかどうか、および著者がどのように考えるかを指定します。 「自動」、「メタデータ」、「なし」の3つの値があります。 >フルスクリーンでビデオまたはオーディオを再生するには、JavaScript APIであるフルスクリーンAPIが必要です。 「requestfullscreen」メソッドを使用して、ビデオまたはオーディオ要素をフルスクリーンにすることができます。この方法は、クリックイベントなどのユーザーアクションの結果として実行する必要があります。

以上がHTMLでメディアプレーヤーを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。