HTMLMediaElement

HTMLMediaElement インターフェイスは、 HTMLElement に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。 HTMLVideoElement および HTMLAudioElement 要素はどちらも、このインターフェイスを継承しています。

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLMediaElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

プロパティ

このインターフェイスは祖先である HTMLElement, Element, Node, EventTarget のプロパティを継承しています。

HTMLMediaElement.audioTracks

AudioTrackList で、この要素に含まれる AudioTrack オブジェクトを列挙します。

HTMLMediaElement.autoplay

Boolean で、 HTML の autoplay 属性の値を反映し、再生に十分なデータが揃った時点で自動的に再生を始めるかどうかを示します。

メモ: Sites which automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.

HTMLMediaElement.buffered 読取専用

その時点でブラウザがバッファしたメディアデータの範囲を表す TimeRanges オブジェクトを取得できます。

HTMLMediaElement.controller

要素に割り当てられた MediaController オブジェクトを参照できます。割り当てられていない場合の値は null です。

HTMLMediaElement.controls

再生をコントロールするユーザインタフェースの表示 / 非表示を指定するcontrols  属性を、Boolean で参照できます。

HTMLMediaElement.controlsList 読取専用

Returns a DOMTokenList that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. The DOMTokenList takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback.

HTMLMediaElement.crossOrigin

このメディア要素の CORS 設定 を DOMString で参照できます。

HTMLMediaElement.currentSrc読取専用

選択されたメディアリソースの絶対 URL を DOMString で返します。

HTMLMediaElement.currentTime

現在の再生時間を double で返します。値を代入することで、シークを行えます。

HTMLMediaElement.defaultMuted

標準状態で音声がミュートされているか、いないかを表す、HTML の muted 属性を Boolean で参照できます。

HTMLMediaElement.defaultPlaybackRate

標準の再生レートを double で返します。

HTMLMediaElement.disableRemotePlayback

Is a Boolean that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.

HTMLMediaElement.duration読取専用

メディアの長さを秒数で表した数値を double で取得できます。メディアデータがない場合は、0 を返します。

HTMLMediaElement.ended読取専用

再生が終了しているか、いないかを Boolean で取得できます。

HTMLMediaElement.error読取専用

一番最後に起きたエラーを MediaError オブジェクトとして返します。エラーが起きていない場合は null を返します。

HTMLMediaElement.loop

繰り返し再生を有効、無効を表す HTML の loop をBoolean として参照できます。

HTMLMediaElement.mediaGroup

Is a DOMString that reflects the mediagroup HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common MediaController.

HTMLMediaElement.mediaKeys 読取専用

Returns a MediaKeys object or null. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.

HTMLMediaElement.mozAudioCaptured 読取専用

Returns a Boolean. Related to audio stream capture.

HTMLMediaElement.mozFragmentEnd

Is a double that provides access to the fragment end time if the media element has a fragment URI for currentSrc, otherwise it is equal to the media duration.

HTMLMediaElement.mozFrameBufferLength

Is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each MozAudioAvailable event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).

The mozFrameBufferLength property can be set to a new value for lower latency, larger amounts of data, etc. The size given must be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or MozAudioAvailable events have begun firing.

HTMLMediaElement.mozSampleRate 読取専用

Returns a double representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.

HTMLMediaElement.muted

Is a Boolean that determines whether audio is muted. true if the audio is muted and false otherwise.

HTMLMediaElement.networkState 読取専用

Returns a unsigned short (enumeration) indicating the current state of fetching the media over the network.

HTMLMediaElement.paused 読取専用

Returns a Boolean that indicates whether the media element is paused.

HTMLMediaElement.playbackRate

Is a double that indicates the rate at which the media is being played back.

HTMLMediaElement.played 読取専用

Returns a TimeRanges object that contains the ranges of the media source that the browser has played, if any.

HTMLMediaElement.preload

Is a DOMString that reflects the preload HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto.

HTMLMediaElement.preservesPitch

Is a Boolean that determines if the pitch of the sound will be preserved. If set to false, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (mozPreservesPitch) and WebKit (webkitPreservesPitch).

HTMLMediaElement.readyState 読取専用

Returns a unsigned short (enumeration) indicating the readiness state of the media.

HTMLMediaElement.seekable 読取専用

Returns a TimeRanges object that contains the time ranges that the user is able to seek to, if any.

HTMLMediaElement.seeking 読取専用

Returns a Boolean that indicates whether the media is in the process of seeking to a new position.

HTMLMediaElement.sinkId 読取専用

Returns a DOMString that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the MediaDeviceInfo.deviceid values returned from MediaDevices.enumerateDevices(), id-multimedia, or id-communications.

HTMLMediaElement.src

Is a DOMString that reflects the src HTML attribute, which contains the URL of a media resource to use.

HTMLMediaElement.srcObject

Is a MediaStream representing the media to play or that has played in the current HTMLMediaElement, or null if not assigned.

HTMLMediaElement.textTracks 読取専用

Returns the list of TextTrack objects contained in the element.

HTMLMediaElement.videoTracks 読取専用

要素の持つ VideoTrack オブジェクトのリストを参照できます。

Gecko は 1 トラックの再生のみをサポートします。また複数トラックのメタデータ解析は、 Ogg フォーマットの場合にのみ有効です。

HTMLMediaElement.volume

音量を double で取得できます。この値は 0.0 (無音) 以上、1.0 (最大) 以下でなくてはなりません。

イベントハンドラー

HTMLMediaElement.onencrypted

メディアが暗号化されている場合に呼ばれる EventHandler を設定できます。

HTMLMediaElement.onwaitingforkey

Sets the EventHandler called when playback is blocked while waiting for an encryption key.

廃止された属性

These attributes are obsolete and should not be used, even if a browser still supports them.

HTMLMediaElement.initialTime 読取専用

double で、初期再生位置を示す値を秒単位で返します。

HTMLMediaElement.mozChannels 読取専用

Returns a double representing the number of channels in the audio resource (e.g., 2 for stereo).

廃止されたイベントハンドラー

HTMLMediaElement.onmozinterruptbegin

オーディオチャンネルマネージャによってメディア要素が割り込まれたときに呼び出される EventHandler を設定します。これは Firefox 固有のもので、 Firefox OS のために実装されていましたが、 Firefox 55 で削除されました。

HTMLMediaElement.onmozinterruptend

割り込みが完了したときに呼び出される EventHandler を設定します。これは Firefox 固有のもので、 Firefox OS のために実装されていましたが、 Firefox 55 で削除されました。

メソッド

このインターフェイスは祖先である HTMLElement, Element, Node, EventTarget のメソッドを継承しています。

HTMLMediaElement.addTextTrack()

字幕向けトラックのような、テキストトラックを追加します。

HTMLMediaElement.captureStream()

Returns MediaStream, captures a stream of the media content.

HTMLMediaElement.canPlayType()

メディアタイプが再生可能かどうかを判定します。

HTMLMediaElement.fastSeek()

指定された時間へシークします。

HTMLMediaElement.load()

メディア要素をリセットし、メディアリソースをリスタートします。処理されなかったイベントは破棄されます。メディアデータがダウンロードされる量は preload 属性の値に影響されます。src 属性の値、もしくは source 要素内の要素を削除した際のリソース解放、もしくは source の子要素が動的に変更される場合の再スキャンのために利用します。それ以外の場合に呼びだす必要はありません。

HTMLMediaElement.mozCaptureStream()

[enter description]

HTMLMediaElement.mozCaptureStreamUntilEnded()

[enter description]

HTMLMediaElement.mozGetMetadata()

再生中のメディアデータに対するメタデータを Object として返します。呼び出すたびに、オブジェクトのコピーが新しく作られます。このメソッドを呼び出すには、loadedmetadata イベント発火している必要があります。

HTMLMediaElement.pause()

再生を一時停止します。

HTMLMediaElement.play()

再生を開始します。

HTMLMediaElement.seekToNextFrame()

Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.

HTMLMediaElement.setMediaKeys()

再生に利用するMediaKeys を指定します。Promise オブジェクトを返します。

HTMLMediaElement.setSinkId()

音声出力をレンダリングするデバイスの ID を指定できます。指定はアプリケーションからの利用が許されている場合に有効です。なお返り値は Promise オブジェクトとなっています。

廃止されたメソッド

These methods are obsolete and should not be used, even if a browser still supports them.

HTMLMediaElement.mozLoadFrom()

このメソッドは Mozilla の独自実装で、他のメディア要素からデータをロードします。通常のリソース選択のアルゴリズムではなく、他の要素の currentSrc を選ぶ点以外は、 load() メソッドと同じように振る舞います。これは他の要素がキャッシュし、バッファしているデータを利用することにより最適化を図るためです。実際に、2 つの要素が同じダウンロードデータを利用する場合、どちらか一方のダウンロードが終われば、他方でもそのデータを利用できるようになります。

イベント

Inherits methods from its parent, HTMLElement , defined in the GlobalEventHandlers mixin. Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

abort

Fired when the resource was not fully loaded, but not as the result of an error.

canplay

Fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content

canplaythrough

Fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.

durationchange

Fired when the duration attribute has been updated.

emptied

Fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and the HTMLMediaElement.load() method is called to reload it.

ended

Fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available.

error

Fired when the resource could not be loaded due to an error.

loadeddata

Fired when the first frame of the media has finished loading.

loadedmetadata

Fired when the metadata has been loaded

loadstart

Fired when the browser has started to load a resource.

pause

Fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's HTMLMediaElement.pause() method is called.

play

Fired when when the paused property is changed from true to false, as a result of the HTMLMediaElement.play() method, or the autoplay attribute

playing

Fired when playback is ready to start after having been paused or delayed due to lack of data

progress

Fired periodically as the browser loads a resource.

ratechange

Fired when the playback rate has changed.

seeked

Fired when a seek operation completes

seeking

Fired when a seek operation begins

stalled

Fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.

suspend

Fired when the media data loading has been suspended.

timeupdate

Fired when the time indicated by the currentTime attribute has been updated

volumechange

Fired when the volume has changed.

waiting

Fired when playback has stopped because of a temporary lack of data

仕様書

ブラウザーの対応

関連情報

• 参考文献
  • <video> および <audio>
  • このインタフェースを継承しているHTMLVideoElement と HTMLAudioElement
• 記事
  • HTML5 での音声と動画の利用
  • audio 要素と video 要素が対応しているメディア形式
  • Web Audio API