ホームページ  >  記事  >  ウェブフロントエンド  >  Xiaoqiang の HTML5 モバイル開発ロード (12) - マルチメディア タグから始める

Xiaoqiang の HTML5 モバイル開発ロード (12) - マルチメディア タグから始める

黄舟
黄舟オリジナル
2017-01-22 11:33:451384ブラウズ

1. 動画の再生

<html>  
    <head>  
        <title>多媒体播放</title>  
    </head>  
    <body>  
        <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">  
    </body>  
</html>

効果は次のとおりです:

Xiaoqiang の HTML5 モバイル開発ロード (12) - マルチメディア タグから始める

タグは HTML 5 の新しいタグです。

属性

HTML5 の新しい属性。属性値の説明 Height Pixels は、埋め込まれたコンテンツの高さを設定します。

src url 埋め込まれたコンテンツの URL。

type type は、埋め込みコンテンツのタイプを定義します。

幅ピクセル 埋め込まれたコンテンツの幅を設定します。

タグは、HTML5 のグローバル属性と HTML5 のイベント属性をサポートします

width 属性を追加してみましょう

<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>

type 属性は、埋め込まれたコンテンツの MIME タイプを指定します。


MIME タイプについては、IANA MIME タイプを参照してください

例: Xiaoqiang の HTML5 モバイル開発ロード (12) - マルチメディア タグから始める

<!DOCTYPE html>  
<html>  
<body>  
  
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />  
  
</body>  
</html>

2. IANA MIME の概要

多目的インターネット メール拡張子タイプは、アプリケーションを使用してファイルを特定の形式に設定することです。 extension この拡張子のファイルにアクセスすると、ブラウザは自動的に指定されたアプリケーションを使用してファイルを開きます。これは主に、クライアント定義のファイル名とメディア ファイルを開く方法を指定するために使用されます。

各 MIME タイプは 2 つの部分で構成され、最初の部分はサウンド、オーディオ、画像などのデータの大きなカテゴリであり、2 番目の部分は特定のタイプを定義します。

一般的な MIME タイプ (ユニバーサル タイプ):


ハイパーテキスト マークアップ言語 text.html text/html

xml document.xml text/xml

XHTML document.xhtml application/xhtml+xml

Normal text.txt text /plain

RTF text.rtf application/rtf

PDF ドキュメント .pdf application/pdf

Microsoft Word ファイル .word application/msword

PNG image.png image/png

GIF graphic.gif image/gif

JPEG グラフィック.jpeg,.jpg 画像/jpeg

au サウンドファイル .au audio/basic

MIDI 音楽ファイル Mid,.midi audio/midi,audio/x-midi

RealAudio 音楽ファイル .ra, .ram audio/ x- pn-realaudio

MPEG ファイル .mpg,.mpeg ビデオ/mpeg

AVI ファイル .avi ビデオ/x-msvideo

GZIP ファイル .gz アプリケーション/x-gzip

TAR ファイル .tar アプリケーション/x-tar

あらゆるバイナリ データ application/octet-stream

3. HTML5 の概要

HTML5 は、HTML、XHTML、および HTML DOM の新しい標準になります。

HTML の最後のバージョンは 1999 年に誕生しました。それ以来、Web の世界は劇的に変化しました。

HTML5 はまだ開発中です。ただし、最新のブラウザのほとんどはすでに HTML5 をある程度サポートしています。

HTML5 は、W3C と WHATWG のコラボレーションの成果です。

——W3Cとは、World Wide Web Consortium、World Wide Web Consortiumを指します。

——WHATWG は、Web Hypertext Application Technology Working Group を指します。

WHATWG は Web フォームとアプリケーションに取り組んでいますが、W3C は XHTML 2.0 に重点を置いています。 2006 年に、両者は協力して新しいバージョンの HTML を作成することにしました。


HTML5 用に確立されたいくつかのルール:

新機能は HTML、CSS、DOM、JavaScript に基づく必要があります。


外部プラグイン(Flashなど)の必要性を軽減 - 多くの強力なマルチメディアタグが組み込まれています

  • エラー処理が改善されました

  • スクリプトを置き換えるタグが増えました

  • HTML5は独立したデバイスである必要があります- PC およびモバイルデバイスで完全に動作します

  • 開発プロセスは一般公開される必要があります

  • HTML5 のいくつかの興味深い新機能:

  • 描画用のキャンバス要素

メディア用のビデオおよびオーディオ要素再生

  • ローカルオフラインストレージのサポートの強化

  • 記事、フッター、ヘッダー、ナビゲーション、セクションなどの新しい特別なコンテンツ要素

  • カレンダー、日付、時刻、電子メール、URL などの新しいフォームコントロール、検索

  • HTML5 の詳細については、私のブログのトピックを参照してください: http://blog.csdn.net/column/details/dawanganban-html5.html

    Safari、Chrome、Firefox の最新バージョン、および Opera は特定の HTML5 機能をサポートします。 Internet Explorer 9 は、特定の HTML5 機能をサポートします。
  • 4. HTML5 のグローバル属性

次のグローバル属性は、HTML5 要素に使用できます


属性

Description

accesskey 要素にアクセスするためのキーボード ショートカットを指定します

class クラスを指定します要素の名前 (スタイルシートでクラスを指定するために使用されます)。

contenteditable は、ユーザーがコンテンツを編集できるかどうかを指定します。

contextmenu 要素のコンテキストメニューを指定します。

dir は要素内のコンテンツのテキスト方向を指定します。

draggable ユーザーが要素をドラッグできるかどうかを指定します。

dropzone は、ドラッグされた項目/データが要素にドロップされたときに何が起こるかを指定します。

hidden は、要素が無関係であることを指定します。非表示の要素は表示されません。

id は要素の一意の ID を指定します。

lang は要素内のコンテンツの言語コードを指定します。

spellcheck 要素のスペルまたは文法をチェックする必要があるかどうかを指定します。

style は要素のインライン スタイルを指定します。

tabindex は要素のタブキー制御順序を指定します。

title 要素に関する追加情報を指定します。


5. グローバル イベント属性


HTML 4 では、ユーザーが要素をクリックしたときに JavaScript を開始するなど、イベントを通じてブラウザーの動作をトリガーする機能が追加されています。


以下の表は、イベントの動作を定義するために HTML 5 要素に挿入できる標準イベント属性を示しています。

Window イベント プロパティ

ウィンドウ オブジェクトによってトリガーされるイベント。

タグに適用: マークされた色は新しいタグ (html5) です

Attribute

Value

Description

onafterprint スクリプト ドキュメントの印刷後にスクリプトを実行します

onbeforeprint スクリプトドキュメントが印刷されます スクリプトを実行します

onbeforeonload スクリプト ドキュメントがロードされる前にスクリプトを実行します

onblur スクリプト ウィンドウがフォーカスを失ったときにスクリプトを実行します

onerror スクリプト エラーが発生したときにスクリプトを実行します

onfocus スクリプト ウィンドウがフォーカスを獲得したときにスクリプトを実行します

onhaschange ドキュメントの実行時にスクリプトを実行します変更時のスクリプト

onload script ドキュメントの読み込み時にスクリプトを実行

onmessage script メッセージがトリガーされたときにスクリプトを実行

onoffline script ドキュメントがオフラインのときにスクリプトを実行

ononline script ドキュメントがオンラインのときにスクリプトを実行

onpagehide ウィンドウのときにスクリプトを実行非表示時

onpageshow スクリプト ウィンドウが表示されているときにスクリプトを実行

onpopstate スクリプト ウィンドウの履歴が変更されたときにスクリプトを実行

onredo スクリプト ドキュメントが再実行操作 (やり直し) を実行したときにスクリプトを実行

onresize スクリプト サイズ変更ウィンドウが大きい場合 スクリプトを実行毎時

onsstorage スクリプト ドキュメントのロード時にスクリプトを実行

onundo スクリプト Web ストレージ領域が更新されたとき (ストレージ スペース内のデータが変更されたとき)

onunload スクリプト ユーザーがドキュメントを離れるときにスクリプトを実行

フォーム イベント

HTML 内のアクションによってトリガーされるイベントフォーム。

すべての HTML 5 要素に適用されますが、フォーム要素で最もよく使用されます:

Attribute

Value

Description

onblur script 要素がフォーカスを失ったときにスクリプトを実行します

onchange script 要素が変更されたときにスクリプトを実行します

oncontextmenu スクリプト コンテキスト メニューがトリガーされたときに実行されます

onfocus スクリプト 要素がフォーカスを取得したときに実行されます

onformchange スクリプト フォームが変更されたときに実行されます

onforminput スクリプト フォームがユーザー入力を取得したとき スクリプトを実行します

oninput script when スクリプトを実行します要素がユーザー入力を取得したとき

oninvalid script 要素が無効なときにスクリプトを実行します

onreset script フォームがリセットされたときにスクリプトを実行します。 HTML5はサポートされていません。

onselect スクリプト 要素が選択されたときにスクリプトを実行します

onsubmit スクリプト フォームが送信されたときにスクリプトを実行します

キーボードイベント

キーボードによってトリガーされるイベント。

すべての HTML 5 要素に適用されます:

Attribute

Value

Description

onkeydown スクリプト キーが押されたときにスクリプトを実行します

onkeypress スクリプト キーが押されて放されたときにスクリプトを実行します

onkeyup スクリプトボタンを放したときのスクリプト

マウス イベント

マウスまたは同様のユーザー アクションによってトリガーされるイベント。すべてのすべてのHTMLに適用される5つの要素:

attributes

value

descriptionconclickスクリプトマウスがクリックされたときにスクリプトを実行します。要素が有効なときにスクリプトを実行する

ondragend スクリプト ドラッグ操作が終了したときにスクリプトを実行する

ondragenter スクリプト 要素が有効なドラッグ アンド ドロップ ターゲットにドラッグされたときにスクリプトを実行する

ondragleave スクリプト 要素が有効なドラッグ アンド ドロップ ターゲットから離れるときにスクリプトを実行する

ondragover スクリプト 実行要素が有効なドラッグ アンド ドロップ ターゲット上にドラッグされたときのスクリプト

ondragstart スクリプト ドラッグ操作の開始時にスクリプトを実行する

ondrop スクリプト ドラッグされた要素がドラッグ アンド ドロップされているときにスクリプトを実行する

onmousedown スクリプト 押されたとき スクリプトを実行するマウスボタンが押された

onmousemove スクリプト マウスポインタが移動するとスクリプトを実行する

onmouseout スクリプト マウスポインタが要素の外に移動するとスクリプトを実行する

onmouseover スクリプト マウスポインタが要素上を移動するとスクリプトを実行する

onmouseup script dangsong マウスボタンがオンになったときにスクリプトを実行します

onmousewheel script マウスホイールが回転したときにスクリプトを実行します

onscroll script スクロール要素のスクロールバーがスクロールされたときにスクリプトを実行します

メディアイベント

イベントがトリガーされます動画、画像、音声などのメディアで。

すべての HTML 5 要素に適用されますが、メディア要素 (オーディオ、埋め込み、画像、オブジェクト、ビデオなど) で最も一般的に使用されます。中止イベントが発生します

oncanplay script

oncanplay script メディアの再生を開始できるが、バッファリングのために停止する必要がある場合にスクリプトを実行します

oncanplaythrough script メディアがバッファリングにより停止せずに最後まで再生できるときにスクリプトを実行します

ondurationchangeスクリプト メディアの長さが変更されたとき メディア リソース要素が突然空になったときにスクリプトを実行します (ネットワーク エラー、読み込みエラーなど) スクリプト

onloadeddata スクリプト メディア データが読み込まれたときにスクリプトを実行します

onloadedmetadata スクリプトメディア要素とその他のメディア データが読み込まれています

onloadstart スクリプト ブラウザがメディア データの読み込みを開始したときにスクリプトを実行します

onpause スクリプト when 媒介データデータ停止時間运行スクリプト

onplay script 当媒介データデータ将要開始播放時間运行スクリプト

onplaying script当メディアデータデータすでに開始放送時間运行スクリプト

onprogress script 常浏览器正在取媒媒体データ時間运行スクリプト

onratechange script メディア データの再生レートが変更されたときに実行されるスクリプト

onreadystatechange 準備完了状態が変化したときに実行されるスクリプト

onseeked スクリプト メディア要素の位置決め属性 [1] が true でなくなり、位置決めが終了したときに実行されるスクリプト

onseeking スクリプト メディア要素の位置決め属性が true で、位置決めが開始されたときに実行されるスクリプト

インストールされたスクリプトメディア データの取得中にエラー (遅延) が発生した場合にスクリプトを実行します

onsuspend スクリプト ブラウザが既にメディア データを取得している場合 ただし、メディア ファイル全体を取得する前に停止したときにスクリプトを実行します

ontimeupdate スクリプト メディアの変更時にスクリプトを実行します再生位置

onvolumechange スクリプト メディアの音量が変更されたとき、または音量がミュートに設定されているときにスクリプトを実行します

onwaiting スクリプト メディアの場合 再生が停止したが続行する場合にスクリプトを実行します

次の記事では、グローバル属性とイベントの使い方を詳しく紹介します

上記は、Xiaoqiang の HTML5 モバイル開発ロード (12) - マルチメディア タグから始めるです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www) に注目してください。 .php.cn)!

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