HTML5_html5 チュートリアルヒントのオーディオおよびビデオメディア再生要素の概要-H5 チュートリアル-php.cn

HTML5_html5 チュートリアルヒントのオーディオおよびビデオメディア再生要素の概要

WBOY

リリース： 2016-05-16 15:45:57

オリジナル

2219 人が閲覧しました

オーディオとビデオのエンコーダー/デコーダーは、オーディオとビデオを再生できるように、特定のオーディオまたはビデオストリームをエンコードおよびデコードするために使用される一連のアルゴリズムです。未処理のメディアファイルのサイズは非常に大きく、エンコードされていない場合、ビデオとオーディオクリップを構成するデータが大きすぎて、インターネット上に伝播するのに耐えられないほどの時間がかかる可能性があります。デコーダがなければ、受信機はエンコードされたデータを元のメディアデータに再構築することができません。コーデックは、特定のコンテナ形式を読み取り、その中のオーディオトラックとビデオトラックをデコードできます。
メディア要素について
1. 基本操作: メディア要素を宣言します

XML/HTML コードコンテンツをクリップボードにコピー

<オーディオコントロール src="Adele-Set Fire To The Rain.mp3">
お使いのブラウザは HTML5 オーディオをサポートしていません
音声>

コード内の control 属性は、開始、停止、スキップ、音量コントロールなどの一般的なユーザーコントロールを表示するようにブラウザーに指示します。 Controls 属性が指定されていない場合、ユーザーはページ上でオーディオを再生できません。
2. ソース要素
を使用します。最も単純なケースでは、src 属性はメディアファイルを直接指すことができますが、ブラウザーが関連するコンテナーまたはエンコーダーをサポートしていない場合はどうなるでしょうか。これにはバックアップ宣言を使用する必要があります。フォールバックステートメントには複数のソースを含めることができ、ブラウザは非常に多くのソースから選択できます:

XML/HTML コードコンテンツをクリップボードにコピー

<オーディオコントロール>
<ソースソース=「アデル- Set Fire To The Rain.mp3" >
<ソースソース=「アデル- Set Fire To The Rain.ogg" >
音声>

ソースについては、宣言された順序に従ってブラウザが判断し、複数のソースがサポートされている場合、ブラウザは最初にサポートされているソースを選択します。
3. メディアコントロール
audio 要素または video 要素に autoplay 属性を設定すると、オーディオファイルまたはビデオファイルはロード後にユーザーの操作なしで自動的に再生されます。
よく使用される制御関数

函数	动作
load()	加载音频/视频文件，为播放做准备，通常情况下不必调用，除非是动态生成的元素。用来在播放前预加载。
play()	加载（有必要的话）并播放音频/视频文件。除非音频/视频已经暂停在其他位置了，否则默认从头开始播放
pause()	暂停处于播放状态的音频/视频文件
canPlayType(type)	测试video元素是否支持给定MIME类型的文件

読み取り専用メディアのプロパティ

只读特性	值
duration	整个媒体文件的播放时长，以s为单位。如果无法获取时长，则返回NaN。
paused	如果媒体文件当前被暂停，则返回true。如果还未开始播放，则返回false。
ended	如果媒体文件已经播放完毕，则返回true
startTime	返回最早的播放起始时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不在缓冲区
error	在发生了错误的情况下返回的错误代码
currentSrc	以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。

スクリプト可能なプロパティ値

特性	值
autoplay	将媒体文件设置为创建后自动播放，或者查询是否已设置为autoplay
loop	如果媒体文件播放完毕后能重新播放则返回true，或者将媒体文件设置为循环播放（或者不循环播放）
currentTime	以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置
controls	显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见
volume	在0.0到1.0之间设置音频音量的相对值，或者查询当前音量的相对值。
muted	为音频文件设置静音或者消除静音，或者渐层当前是否为静音
autobuffer	通知播放器在媒体文件开始播放前，是否进行缓冲加载。如果媒体文件已经设置为autoplay，则忽略测特性。

3.1 audio 要素と video 要素の使用
HTML5 video 要素は audio 要素とよく似ていますが、audio 要素よりもいくつかの機能があります。

特性	值
poster	在视频加载完成之前，代表视频内容的图片的URL地址，可以想象一下“电影海报”。该特性不仅可读，而且可以修改，以便更换图片
width、height	读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配，可能导致居中显示，上下或左右可能出现黑色条状区域。
videoWidth、videoHeight	返回视频固有的或自适应的宽度和高度。只读video元素还有一个audio元素不支持的关键特性：可被HTML5 Canvas的函数调用。