HTML5ビデオタグ(プレーヤー)学習メモ(1)：はじめに_html5チュートリアルスキル

私は最近、HTML5 の video タグ (プレーヤー) の使用法を勉強しています。ここでは、自分自身のレビューと記録を容易にするためのいくつかの学習メモを紹介します。この記事はその最初の記事であり、このタグを使用するときに何をすべきかを紹介します。初期化してください。

実際にはオンライン チュートリアルがたくさんあります。w3cschool のチュートリアルが最もシンプルで詳細なので、これらのいくつかはより直接的なアプリケーションを紹介しています。

この記事のディレクトリ:

1. タグを使用します
2. 必要なパラメータを追加します
4. プレーヤーを標準化します

ステップ 1: タグを使用する

使用する方法は非常に簡単で、たった 1 行のコードです:

コードをコピーします コードは次のとおりです。次のように:

ステップ 2: ビデオを再生するパスやコントロール バーを表示するかどうかなど、必要なパラメーターを追加します

ビデオを再生するには、ビデオのアドレスが必要です。これは、タグに src 属性を設定することを意味します。最初に独自のカスタム コントロール バーを作成できない場合は、ブラウザのデフォルトのコントロール バーを使用してコントロールを追加すると、次のようになります:

コードをコピーしますコードは次のとおりです:

<ビデオ コントロール src="http://www.w3cschool.cc/try/demo_source/mov_bbb. mp4" >

ステップ 3: ビデオを自動的に再生またはロードします

プレーヤーを使用するときによく行う必要があることの 1 つは、ページが読み込まれるとすぐにビデオの再生を開始することです。次に、ビデオが自動的に再生されるように設定する、つまり autoplay 属性を設定する必要があります。

コードをコピーコードは次のとおりです:

<ビデオ コントロール autoplay= true src= "http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

ユーザーの習慣によっては自動再生が必要ない場合もありますが、ユーザーがビデオをすぐに見るためには、ビデオを自動的にロードしてからプリロード属性を設定する必要があるわけではないことに注意してください。このビデオをロードする代わりに、最初の部分のみがロードされます。

コードをコピーしますコードは次のとおりです:

<ビデオ コントロール preload= "auto" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

ステップ 4: プレーヤーをより標準化する

プレーヤーをより標準化するとはどういう意味ですか?つまり、コントロールバー（以前紹介済み）があり、再生を開始する前に表示される画面と、プレーヤーのサイズが指定されています。

プレーヤーがビデオをロードすると、最初に初期化画面が表示されますが、多くの場合、ビデオの最初に表示されるビデオの画像を設定する必要があります (視聴者を引き付けるため、場合によっては、画像（ビデオとあまり関係のない画像）、またはネットワークの問題により、ビデオが読み込まれる前に視聴者に黒い画面を表示しないようにするための設定も必要です。つまり、ポスター属性を設定します。 利用可能:

コードをコピーします コードは次のとおりです:

<ビデオ コントロール preload=" auto"poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" width="640" height="264" src="http ://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

一般に、アプリケーション プロセス中に、プレーヤーのサイズは指定されています。プレーヤーの長さと幅を設定するには、スタイルシートを使用できます。幅高さの属性内または属性を通じて設定できます。プレーヤーの幅と高さはビデオの比率に応じて設定する必要があることに注意してください。そうしないと、プレーヤーの幅と高さがビデオのピクセルを超える場合、ビデオは最後に空白になります。ぼやけたストレッチ効果が見られるため、幅を設定するときは高い場合に注意する必要がありますが、最初に観察する幅または高さのみを設定してから、

などの正確なピクセルを取得することもできます

コードをコピーしますコードは次のとおりです:

<ビデオ コントロール preload="auto" width=300ポスター="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

幅を設定した後、ブラウザのデバッグ ツールで適応高さが 165 であることがわかり、この時点で高さを 165 に設定します

Copyコード

コードは次のとおりです:

<ビデオ コントロール preload="auto" width=300 height=165poster="http://img0.ph 126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

要約: これらの 4 つの手順を通じて、プレーヤーの基本的な設定と使用を完了できます。主なことは、JS を介して制御する必要があるプレーヤーのいくつかのアプリケーション シナリオを理解することです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。