この記事は機械翻訳されたものです。

HTML5

HTML5 でメディアを操作する (機械翻訳)

イアソン Beres

 

リモートの島に、過去 1 年間またはその生活がない限り、誇大 HTML5 の周りやを知っています。 いいえ、HTML5 ほとんどの病気、養生がないも世界おなかいっぱい度、終了されますが、リッチ インターネット アプリケーションのランドス ケープの形状を変更するものです。 HTML の新しい標準で、誇大すべてに戻る祝いディスカッションを表示することが重要です。 この新しい HTML 仕様について知る必要がある、重要な点は次のとおりです。

• HTML5 仕様 1999 年以降の最初の新しいバージョンのです-Web 以来たくさん変わりました。
• HTML5 の新しい標準では、HTML、XHTML、HTML DOM になります。
• HTML5 のメディアを再生する標準的な方法を提供-キーの利点をせず、ブラウザーのプラグインをすべてのブラウザーのプラグインをサポートすることが保証されていない Web ページでメディアを再生するための標準がないため。
• HTML5 がまだ処理中ですが、最近のほとんどのブラウザーは、HTML5 のタグのサポートがあります。

2007 年に Silverlight 1.0 を出荷する場合は、マイクロソフトのビデオとオーディオの再生、主な機能は、Silverlight の代わりにフラッシュとして表示する主な理由としていました： 1 つのバージョンまたは他の 95 パーセントの世界のブラウザーでサポートされています。 現時点で、世界中のブラウザーの約 75% または 3 のすべての 4 台のコンピューターに Silverlight がサポートされています。 メディアを再生しようとしているし、不要なまたはプラグインの依存関係に必要がある場合は、HTML5 の答えです。

HTML5 のビデオのタグと、従来のオブジェクト タグを使用してメディアを再生するの違いを確認するには、例での検討図 1。

図 1 ビデオの HTML タグとします。 メディアを再生するには、オブジェクト タグ

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

ため、「それがどうか教えてください。 両方の例は、単純で実装が簡単です。 ここで重要なことですが、<video> タグ標準はありますがそれをする必要があります質問メディアを再生するために使用します。 ブラウザーが、メディアを再生するにインストールされている特定のバージョンの特定のプラグインを持っている推測する必要はありません。 何をされている、標準の一部である HTML から不足しています。

HTML5 のメディア形式のサポート

HTML5 の次のアプリケーションでメディアを使用するには、どのような書式がサポートされていますが知っている必要があります。 HTML5 は、AAC、MP3 および Ogg Vorbis オーディオ Ogg Theora WebM しては、MPEG-4 ビデオをサポートします。

ただし、HTML5 これらのメディア形式をサポートしている場合でも、すべてのブラウザーはすべての形式をサポートします。 図 2 現在のブラウザーおよびそれらがサポートするメディア形式を示しています。

現在のブラウザーで図 2 メディアのサポート

使用するタグ ビデオ

ページは、HTML5 のビデオを再生するには、だけで、<video> を使用します。 タグは次のよう:

<video src="video.mp4" controls />

Src 属性 (http://www.w3.org/TR/html5/video.html#the-source-element) が表示されます、既定の再生を制御するかどうか名前ビデオの再生、およびコントロールのブール型のスイッチの指示を設定します。 他の 2 つのブール値プロパティを使用することもできます： 自動再生とループ-ビデオのタグを設定する場合。 図 3 の各プロパティの属性とその値を一覧表示します。

図 3 ビデオのタグのプロパティ

属性	値	説明
オーディオ	ミュート	既定のオーディオの状態を定義します。 今のところだけがミュートされて許可されます。
自動再生	自動再生	ある場合は、ビデオ、準備ができているとすぐに再生を開始します。
コントロール	コントロール	再生、一時停止、およびボリューム コントロールを追加します。
樹高	ピクセル	ビデオ プレーヤーの高さを設定します。
Loop	Loop	完了するたびが存在する場合は、何度もビデオが開始されます。
ポスター	url	ビデオを表すイメージの URL を指定します。
プリロード	プリロード	存在する場合は、ビデオのページ読み込みで読み込まれ、を実行する準備ができました。 自動再生機能が存在する場合に無視されます。
Src	url	再生するビデオの URL です。
Width/幅	ピクセル	ビデオ プレーヤーの幅を設定します。

次のコードに示しますいくつかのキーのプロパティで、ビデオ プレーヤの高さと幅の設定を含む、一般的なシナリオでは、再生が表示されます、自動再生、ループ、およびコントロールのプロパティを一時停止し、ボリューム コントロールの代替のエラー メッセージとします。

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

また特定の MIME typeusing type 属性とコーデック、ソース要素に設定できます。 これらの例は、MIME タイプと、メディアのエンコードを設定するのには type 属性を使用します。

<!-- H.264 Constrained baseline profile video (main and extended video compatible)
  level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

HTML または JavaScript では、プロパティを設定できます。 次のコードは、HTML および JavaScript のブール型のコントロール プロパティを設定する方法を示しています。

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

ブラウザーがページを表示するかどうかがわからない場合は、フォールバック メカニズム、メディアを再生する必要があります。 作業は、ビデオを表示しているビデオのフォーマットを一覧表示し、ブラウザーがサポートしている最初の 1 つを再生します。 最後の手段として、ユーザーのブラウザーを使用しているネイティブ HTML5 のビデオ再生をサポートしていないことを確認するテキストを追加することもできます。 次のコードには複数のビデオ ソースとフォールバック HTML5 のサポートのないことを示すメッセージが含まれます。

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

ビデオの再生を確認する場合は、Flash のバージョンも、再生するには、オブジェクト タグを含めることができますように。

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

JavaScript を使用して、ビデオの形式は次のとおり、canPlayType プロパティをチェックしてサポートしているかを確認することもできます。

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

シンプルな代替テキストよりも多様性のある処理を実行する場合は、エラーを渡す、onerror イベントのリスナーを使用できます。

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

ポスター プロパティを使用して、フォーム上のビデオの代わりに表示するイメージの URL を指定できます。 通常、画像の形式でビデオのプレビューを表示する簡単な方法より良いユーザー エクスペリエンスを配信フォームでは、ビデオのリスト、または単一のビデオを表示します。 アクションでのポスターのプロパティとおりです。

<video src="video1.mp4" poster="preview.jpg" </video>

最後に、少しの JavaScript および HTML の基本を使用するよりインタラクティブなビデオ プレーヤーを作成できます。 図 4 フォームでは、JavaScript をビデオ プレーヤーを追加する方法」および「コントロールへのユーザー入力に応答する方法を示しています。

図 4 ビデオの JavaScript と対話

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

イベントやビデオ再生の機能の完全な一覧については、ここの仕様をチェック http://www.w3.org/TR/html5/video.html#playing-the-media-resource。

オーディオのタグを使用してください。

オーディオのタグを使用するいると同じように、ビデオのタグを使用して: コントロールと最初の 1 つがサポートするブラウザーで再生する 1 つまたは複数のオーディオファイルを渡します。

<audio src="audio.ogg" controls>
 Your browser does not support the audio element.
</audio>

図 5 オーディオのタグで使用できるプロパティを一覧表示します。 コントロールの高さ、幅、ポスターなどのプロパティは含まれません、ビデオ プレーヤーのように表示する必要はありません。

図 5 オーディオ [タグのプロパティ

属性	値	説明
自動再生	自動再生	存在する場合、オーディオは準備ができているとすぐに再生を開始します。
コントロール	コントロール	[再生] ボタンなどのコントロールが表示されます。
Loop	ループ	存在する場合は、(ループ) を再生、オーディオの開始と、最後に達する。
プリロード	プリロード	存在する場合は、オーディオ ページ読み込み時に、読み込まれ、実行する準備が。 自動再生機能が存在する場合に無視されます。
Src	url	再生、オーディオの URL です。

ビデオのタグでは、複数のファイル、オーディオのタグに渡すことができ、サポートされている最初の 1 つを再生するように。 次のように、オーディオのタグをサポートしていないブラウザーの場合も、代替のメッセージを使用できます。

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

まとめ

次の標準の Web の HTML5 のであり、対象とするブラウザーによっては、今いくつかの新しいタグ、オーディオ、ビデオなどを使用して開始できます。 注意ただし、HTML5 を使用すると、新しいタグ、すべてのブラウザーをサポートし、いずれかを実行している場合でも、すべてのメディア フォーマット サポート可能性がありますいないため。 HTML5 のサポートは、現代のブラウザーを使用している場合は、ユーザーの成功を保証するすべての形式のメディアを処理するため、余分な作業を行う必要があります。 ここでは HTML5 のメディアの成功を保証する必要があるすべての他の情報と同様にブラウザーのサポート情報を提供するいくつか優れた Web リソース。

• http://www.w3.org/TR/html5/video.html
• http://dev.w3.org/html5/spec/Overview.html
• http://w3schools.com/html5/default.asp
• http://html5test.com/
• http://caniuse.com/

イアソン Beres 製品管理担当副社長、コミュニティ、およびエバンジェ リズムに Infragistics と spearheads のお客様が、革新的な機能と Infragistics 製品のすべての機能します。 イアソンは Microsoft です。NET の MVP と、作業中のメンバーであるが。NET のコミュニティです。 彼は毎年イベントと世界中のカンファレンスで多数に表れています。 彼は Visual Basic と C# から SQL Server と Silverlight を広範なトピックの 8 冊の書籍の著者です。 彼の最新のプロフェッショナル Silverlight 4 (◆ 2010年) です。 イアソンに到達することができます jasonb@infragistics.com や twitter @ jasonberes にします。