オーディオとビデオの最も基本的な使用法を以前に学びました。オーディオとビデオの再生をより柔軟に制御するには、HTML5 が提供する関連する属性、メソッド、イベントを学ぶ必要があります。
オーディオおよびビデオ関連の属性
属性 | 説明 |
---|---|
src | メディアリソースのURLアドレスを指定するために使用されます |
autoplay | Autoリソースが読み込まれた後、自動的に Play |
buffered | は、ブラウザがメディア ファイルをキャッシュしたことを確認するために TimeRanges オブジェクトを返すために使用されます。 |
コントロール | 再生用のコントロールバーを提供します |
currentSrc | メディアデータのURLアドレスを返します |
currentTime | 現在の再生位置を秒単位で取得または設定します |
デフォルトの再生評価 | デフォルトの再生速度に戻る |
duration | 現在のメディアの継続時間を取得する |
loop | ループ再生するかどうかを設定または返す |
muted | ミュートするかどうかを設定または返す |
networkState | オーディオビデオの現在のネットワークステータスを返します |
一時停止 | ビデオが一時停止されているかどうかを確認します |
playbackRate | オーディオビデオの現在の再生速度を設定または返します |
played | TimeRanges オブジェクトを返します。 TimeRanges は、ユーザーが再生したオーディオとビデオの範囲を表します |
preload | オーディオとビデオのリソースを自動的にロードするかどうかを設定または返します |
readyState | オーディオとビデオの現在の準備完了状態を返します |
Seekable | 現在のメディア リソースをリクエストできることを示す TimeRanges オブジェクトを返します |
seeking | データがリクエストされているかどうかを返します |
valume | ボリュームを設定または返します。値は 0 ~ 1.0 です |
オーディオとビデオ関連のメソッド
Method | Description |
---|---|
canPlayType() | ブラウザが指定されたオーディオとビデオを再生できるかどうかを検出します |
load() | オーディオをリロードおよびビデオ要素 |
pause() | 現在再生中のオーディオとビデオを停止します |
play() | 現在のオーディオとビデオの再生を開始します |
オーディオとビデオ関連のイベント
イベント | 説明 |
---|---|
canplay | このイベントは、ブラウザが指定されたオーディオとビデオの再生を開始できるときに発生します |
canplaythrough | Expects このイベントは、指定されたオーディオとビデオがバッファリングのために停止せずに継続的に再生できる場合に発生します |
durationchange | オーディオとビデオのデュレーションデータが変更された場合、このイベントが発生します |
loadeddata | このイベントは次の場合に発生します現在のフレーム データはロードされましたが、指定されたオーディオ ビデオの次のフレームを再生するのに十分なデータがありません |
loadedmatadata | このイベントは、指定されたオーディオ ビデオのメタデータがロードされたときに発生します。メタデータには、長さ、サイズ (ビデオのみ)、テキスト トラックが含まれます |
loadstart | このイベントは、ブラウザが指定されたオーディオ ビデオの検索を開始したときに発生します |
progress | 指定されたオーディオ ビデオがダウンロードされているときに発生します これイベント |
abort | このイベントは、オーディオとビデオの読み込みが終了したときに発生します |
end | このイベントは、オーディオとビデオの再生が完了した後に発生します |
エラー | このイベントは、オーディオとビデオが完了したときに発生します読み込みエラーが発生しました イベント |
pause | このイベントは、オーディオ ビデオが一時停止されている |
play | ときに発生します。 このイベントは、バッファリングまたは停止により一時停止された後、再生 |
playing | の準備ができたときに発生します。 |
ratechange | このイベントは、オーディオビデオの再生速度が変更されたときに発生します |
seeked | このイベントは、ユーザーが移動したり、オーディオビデオ内の新しい位置にジャンプしたときに発生します |
seeking | userこのイベントは、オーディオおよびビデオの新しい再生位置への移動またはジャンプを開始したときに発生します |
stalled | このイベントは、ブラウザがメディア データを取得しようとしたが、データが利用できない場合にトリガーされます |
suspend | ブラウザは意図的にメディアを読み込まない このイベントは、データが変更されるとトリガーされます |
timeupdate | このイベントは、再生位置が変更されるとトリガーされます |
volumechange | このイベントは、音量が変更されるとトリガーされます |
waiting | このイベントは、バッファリングの必要性によりビデオが停止したときにトリガーされます。 HTML 5 でビデオ プレーヤーを作成するための要素 |
4. H5 ビデオ タグが音声のみを再生でき、ビデオを再生できない問題の解決策
5. IIS の MIME は MP4 タイプを登録しないため、vidoe タグが認識できないという解決策が発生します
以上がHTML5 マルチメディア オーディオとビデオの詳細な紹介 (2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ホットトピック









