HTMLシリーズ(7)：Multimedia_html/css_WEB-ITnose

1. video タグ

H5 には、オンラインでビデオを再生するための video 機能が追加されました:

コード例:

1 <video controls="controls">2     <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">3     <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">4  你的浏览器不支持Video标签5 </video>

src は video タグまたはsource タグに記述できます。< ;source> タグは、39000f942b2545a5315c57fa3276f220 や b97864c2e0ef2353a16c4d64c7734e92 などのメディア要素のメディア リソースを定義します。 e02da388656c3265154666b7c71a8ddc タグを使用すると、メディア タイプまたはコーデックのサポートに基づいてブラウザが選択する代替ビデオ/オーディオ ファイルを指定できます。

ビデオにプロンプ​​トを追加します。ビデオをサポートしていないブラウザでは、この文は表示されません。ソース タグの属性は次のとおりです:

ブラウザがビデオをサポートしていないが、引き続きビデオを表示したい場合は、従来の Flash を使用して、「お使いのブラウザはビデオをサポートしていません」というプロンプトを置き換えることができます。鬼ごっこ"。オリジナルの通常の Flash メソッドに従って、video タグを直接書き込むだけです (Flash メソッドについては以下を参照)。

ヒント: video タグとsource タグは H5 の新しいタグであり、IE 8 以前のバージョンではサポートされていません。

さらに、H5 メディアは、古い IE ブラウザと完全に互換性のある JS クラス ライブラリを提供します。必要なのは、ヘッド内に次のコードをコピーするだけです:

<script src="http://HTML 5 media.googlecode.com/svn/trunk/src/HTML 5 media.min.js"></script>

H5 メディアは、依存しない JS クラス ライブラリです。どの JS フレームワークでも、H5 メディアを使用した後、ブラウザが H5 をサポートしていない場合は、Flash モードの flowplayer プレーヤーに自動的に切り替わります。

2. マルチメディア ファイルの埋め込み

HTML5 の新しいタグは、ページにあらゆる種類のドキュメントを埋め込むことができます。ドキュメントのコンテンツを正しく表示できるプログラムがユーザーのマシンにインストールされている必要があります。これは通常、マルチメディア形式を Web ページに挿入するために使用されます。 rm.mid.wavなど

autostart 属性を使用して、ダウンロード後にオーディオ ファイルまたはビデオ ファイルを自動的に再生するかどうかを設定することもできます (true: 自動的に再生します。false: 自動的に再生しません)。loop 属性を使用してビデオとオーディオのループ数を設定します。 。さらに、パネル表示、開始時間、ボリューム、コンテナのプロパティ、外観設定、説明テキスト、前景色と背景の色、配置およびその他のプロパティを設定することもできます。

ヒント: d8e2720730be5ddc9c2a3782839e8eb6 タグには src 属性が必要です。

object と object の違い: どちらもマルチメディア ファイルを再生するために使用されるオブジェクトです。object 要素は IE ブラウザーに使用され、embed 要素は非 IE ブラウザーに使用されます。互換性を確保するために、通常は 2 つの要素を使用します。同時に参照 ブラウザはサポートしていないタグを自動的に無視します。 2 つの要素を同時に使用する場合は、d8e2720730be5ddc9c2a3782839e8eb6 タグを 273238ce9338fbb04bee6997e5552b95 タグ内に配置する必要があります。

3. オブジェクト タグ

HTML コードにオブジェクトを追加します。

1 <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 2 width="100" height="50">3   <param name="BorderStyle" value="1" />4   <param name="MousePointer" value="0" />5   <param name="Enabled" value="1" />6   <param name="Min" value="0" />7   <param name="Max" value="10" />8 </object>

埋め込みオブジェクトを定義します。この要素を使用して、XHTML ページにマルチメディアを追加します。この要素を使用すると、HTML ドキュメントに挿入されるオブジェクトのデータとパラメーター、およびデータの表示と操作に使用できるコードを指定できます。

273238ce9338fbb04bee6997e5552b95 タグは、画像、オーディオ、ビデオ、Java アプレット、ActiveX、PDF、Flash などのオブジェクトを含めるために使用されます。 object の本来の目的は、img 要素と applet 要素を置き換えることでした。ただし、バグとブラウザのサポート不足により、これは起こりませんでした。ブラウザのオブジェクト サポートは、オブジェクトの種類によって異なります。残念ながら、主要なブラウザはすべて、同じオブジェクト タイプをロードするために異なるコードを使用しています。幸いなことに、オブジェクト オブジェクトが解決策を提供します。 object 要素が表示されていない場合は、273238ce9338fbb04bee6997e5552b95 と eb50c9ec568c9b96871b9e94a1ff3fd1 の間のコードが実行されます。このようにして、複数のオブジェクト要素 (ブラウザごとに 1 つ) をネストできます。

ヒント: 0c68fef83818661b6da588c77ca3985e タグは、オブジェクトの実行時設定を定義します。画像には 273238ce9338fbb04bee6997e5552b95 タグを使用せず、代わりに a1f02c36ba31691bcfe87b2722de723b タグを使用してください。

param 要素を使用すると、XHTML ドキュメントに挿入されるオブジェクトの実行時設定を指定できます。つまり、このタグは、それを含む 273238ce9338fbb04bee6997e5552b95 または 082dedeb30a00d0e6e2cdb74a392fac3 タグにパラメータを提供できます。

サンプルコード:

1 <object width="468" height="287" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">2         <param name="movie" value="http://www.w3school.com.cn/i/helloworld.swf"/>3         <param name="quality" value="high"/>4         <param name="wmode"value="transparent"/>5         <embed width="468" height="287" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="transparent" src="http://www.w3school.com.cn/i/helloworld.swf"/>6     </object>

IV. Flash コードの埋め込み

一般的な Flash コードは、object タグと embed タグを使用して埋め込まれます:

1 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="100%" id="myfile" align="middle">2     <param name="allowScriptAccess" value="sameDomain"/>3     <param name="movie" value="myfile.swf"/>4     <param name="quality" value="high"/>5     <param name="scale" value="noscale"/>6     <param name="bgcolor" value="#ffffff"/>7     <embed src="http://www.webjx.com/upfiles/20050415/myfile.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="myfile" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>8 </object>

allowfullscreen 属性を追加して設定できます。完全に達成するには trueプレイ画面。

5. テキスト マーキーをスクロールします

rree

     语法：ed126914ed1419bab26abf7cf307b7b9...7204e33a7a23f6efcc788532e245c31b； 说明：在标记之间添加要进行滚动的内容。

重要属性：

     direction 表示滚动的方向，值可以是left，right，up，down，默认为left
　　behavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）
　　loop 表示循环的次数，值是正整数，默认为无限循环
　　scrollamount 表示运动速度，值是正整数，默认为6
　　scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
　　align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
　　bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
　　height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度。
　　hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
　　onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。
提示：
　　marquee 元素的默认宽度与其父元素的宽度相等。如果marquee 位于没有指定宽度的 TD 内，你就需要明确设置marquee的宽度。如果 marquee和 TD 的宽度都没有指定，那么滚动字幕就将限定于 1 个像素宽。
　　要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为 0。要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置。
　　scrollLeft 和 scrollTop 属性当字幕滚动时为只读。当不处于滚动状态时，scrollLeft 对于设置为水平滚动的字幕来说为可读写，scrollTop 对于设置为垂直滚动的字幕来说为可读写。
　　此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。
　　此元素是块元素。

六、媒介外部文本轨道track

     9bf7cbf2c39baa37076a22499de2f6ed 标签为诸如 video 元素之类的媒介规定外部文本轨道。

     用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。是H5的新标签，目前所有主流浏览器都不支持 9bf7cbf2c39baa37076a22499de2f6ed 标签。

     带有字幕的视频：

1 <video width="320" height="240" controls="controls">2   <source src="forrest_gump.mp4" type="video/mp4" />3   <source src="forrest_gump.ogg" type="video/ogg" />4   <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">5   <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">6 </video>