要素 video これは HTML5 の最も注目すべき機能の 1 つであり、開発者は Flash などの外部プラグインを必要とせずに、ビデオを Web ページに直接埋め込むことができます。さまざまな属性、プロパティ、メソッド、イベントを通じて、要素 video マルチメディア コンテンツの再生を完全に制御できます。この記事では、これらの各機能について詳しく説明します。
要素の属性 video
要素の属性 video これらは、動作と外観を HTML から直接定義します。最も関連性の高い属性をすべて以下に示します。
- src: ファイルのURLを指定します video それは再現されなければなりません。要素が使用されている場合、この属性はオプションです 'source' の中で 'video' 。
- controls: 再生ボタン、プログレスバー、音量コントロールなど、再生用のデフォルトのブラウザコントロールを表示します。
- autoplay: であることを示します。 video 十分に充電されると、できるだけ早く自動的に再生が開始されます。
- loop: を作ります video 連続ループで再生され、終了すると最初からやり直します。
- muted: を作ります video 音なしで再生されます。
-poster : 表示中に表示される画像を定義します。 video またはユーザーが再生を開始するまで。
- preload: の読み込みをどのように処理すべきかをブラウザに提案します。 video。次の値を取得できます:
auto (すべての video）、 metadata (メタデータをプリロードするだけです) またはnone(何もプリロードしないでください)。
- width そして height : の表示領域の寸法を指定します。 video ピクセル単位で。
- playsinline: であることを示します。 video モバイルデバイスでは全画面モードではなくオンラインでプレイする必要があります。
要素のプロパティ video
要素のプロパティ video の動作を操作できるようにします video JavaScript を介して。最も重要なプロパティを以下に説明します。
- currentTime: 現在の再生位置を取得または設定します。 video 、数秒で。の特定のポイントにジャンプするのに便利です。 video 。
- duration: の合計時間を返します。 video 数秒で。期間が利用できない場合は、NaNを返します。
- paused: かどうかを示します。 video 現在休止中です。
- ended：再生中かどうかを示します。 video 終わりました。
- volume: の音量レベルを取得または設定できます。 video。値は 0.0 (無音) から 1.0 (最大音量) まで変化します。
- muted: かどうかを決定します。 video ミュートになっています。 true または false に設定できます。
- playbackRate: 再生速度を制御します。 video。値 1.0 は通常の速度を表し、値が低いと速度が低下し、値が高いと速度が増加します。
- readyState: の充電状態を返します。 video。可能な値は次のとおりです:
0 (HAVE_NOTHING)、1 (HAVE_METADATA)、2 (HAVE_CURRENT_DATA)、
3 (HAVE_FUTURE_DATA)そして4 (HAVE_ENOUGH_DATA)。
- seeking: かどうかを示します。 video新たな繁殖地を探しているところだ。
- buffered: オブジェクトを返します TimeRanges の部分を示します。 video バッファリングされているもの。
- videoWidth そして videoHeight: の幅と高さを返します。 video 、それぞれピクセル単位で表示されます。
要素メソッド video
要素メソッド video 開発者が再生を制御できるようにします。 video プログラム的に。最もよく使用される方法をここで説明します。
- play() ：再生を開始します。 video。もし彼が video が一時停止されている場合、このメソッドは再生を再開します。
- pause()：再生を一時停止します。 video。もし彼が videoすでに一時停止されているため、効果はありません。
- load(): 充電してください video その起源以来。これは、ファイルをリロードする必要がある場合に便利です。 video 何らかの理由で。
- canPlayType(type): ブラウザが特定の種類のファイルを再生できるかどうかを示す値を返します。 video。可能な値は次のとおりです:
"" (不明)、 "probably" (おそらく再現可能) "maybe" （おそらく再現可能です）。
- addTextTrack(kind, label, language): 新しいテキスト トラック (字幕など) を video。パラメータ kind そうかもしれない "subtitles", "captions", "descriptions", "chapters" どちらか "metadata"。
要素イベント video
要素イベント video これらは、再生中のユーザーの操作や状態の変化に応答するために不可欠です。最も一般的なイベントは次のとおりです。
- play: のときにトリガーされます。 video ユーザーアクションまたはメソッドによって再生を開始します。 play() 。
- pause: の再生時にトリガーされます。 video 止まります。これは、ユーザーが一時停止したときに発生する可能性があります。 video またはメソッドが呼び出されたとき pause()。
- ended：次の場合に発生します。 video 持続時間が終了し、再生が停止します。
- timeupdate: 曲の再生中に定期的にトリガーされます。 video 現在の再生位置が変わります。
- volumechange：音量が大きい場合に発生します。 video またはミュートが有効/無効になります。
- loadeddata: バッテリーが十分に充電されるとトリガーされます。 video 完全に充電される前に、再生を開始する準備ができています。
- loadedmetadata: のメタデータが存在する場合に発生します。 video (たとえば、デュレーション、ディメンション、テキスト トラックなど)。
- canplay : であることを示します。 video 再生を開始することはできますが、一時停止せずに完全に再生できるほどロードされていません。
- canplaythrough: ブラウザが次のように推定したときにトリガーされます。 video 中断することなく最後まで再生できます。
- seeking: 検索操作が開始されたとき、つまりユーザーまたはスクリプトが再生位置を変更したときに発生します。
- seeked: 検索操作が完了すると発生します。
要素 video の再生に優れた柔軟性と制御を提供します。 video ウェブ上で。その属性、プロパティ、メソッド、イベントを理解して使用することで、ユーザーのニーズに合わせたリッチなマルチメディア エクスペリエンスを作成できます。この強力なツールが提供するあらゆる可能性を探索し、最大限に活用してください。
Comentar: