この記事では主にHTMLなどでのvideoタグhtml5ビデオタグの使い方と導入、そしてウェブ上での動画再生をサポートするいくつかの動画形式を紹介します
まず、ビデオを再生するためのタグを紹介します。
html5
ウェブ上のビデオ これまで、ウェブページにビデオを表示するための標準はありませんでした。
現在、ほとんどのビデオはプラグイン (Flash など) を介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。
HTML5 は、video 要素を介してビデオを含める標準的な方法を指定します。
簡単な HTML5 ビデオの例:
<video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。 </video>
このテキストは、ビデオが見つからない場合に Web ページに表示されます。
HTML5 ビデオ タグのビデオ形式:
現在、video 要素は 3 つをサポートしていますビデオの種類 形式:
Ogg = Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した Ogg ファイル
MPEG4 = H.264 ビデオ エンコーディングと AAC オーディオ エンコーディングを使用した MPEG 4 ファイル
WebM = VP8 ビデオ エンコーディングと Vorbis オーディオを使用エンコードされた WebM ファイル
次に、HTML5 video タグが Web ページ上でビデオを再生する方法について説明します:
1. 基本的な使用法:
<video src="hangge.mp4" controls></video>
2. 幅と高さによってビデオ ウィンドウを設定します:
<video src="hangge.mp4" controls width="400" height="300"></video>
3. メディア ファイルをプリロードします:
プリロードのさまざまな属性値を設定します。これにより、ブラウザにメディア ファイルのロード方法を指示できます:
値は auto です: ブラウザが自動的にダウンロードしますファイル全体
値は none: ブラウザーが事前にファイルをダウンロードしないようにします
値はメタデータです: ブラウザーが最初にビデオ ファイルの先頭にあるデータ ブロックを取得します。これで十分です。いくつかの基本情報 (ビデオの合計時間、最初のフレーム画像など) を決定します
<!-- 用户点击播放才开始下载 --><video src="hangge.mp4" controls preload="none"></video>
4. 自動再生:
(1) autoplay 属性を使用して、ブラウザがビデオを再生できるようにします。ファイルをロードした直後に。
<video src="hangge.mp4" controls autoplay></video>
(2) 自動再生が有効になっている場合、プレーヤーをミュート状態に設定できます。これにより、自動再生中に音声がミュートされ、ユーザーが退屈するのを防ぎます。ユーザーは、必要に応じてプレーヤーのスピーカー アイコンをクリックしてサウンドをオンに戻すことができます。
<video src="hangge.mp4" controls autoplay muted></video>
5. ループ再生:
ビデオが終了したときに最初から開始するには、loop 属性を使用します。
<video src="hangge.mp4" controls loop></video>
上記は、この記事での HTML5 video タグの使用法と説明です。ご質問がある場合は、以下にメッセージを残してください。
【編集者のおすすめ】
HTMLのselectタグをデフォルトで選択するには? select タグの使い方の紹介
HTML5 のメータータグの意味は何ですか?メータータグの使い方を詳しく解説
以上がHTML5で動画を再生するためのタグは何ですか? Web ページ上でビデオを再生するにはどうすればよいですか? (例を添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ホットトピック









