SYNCER

SYNCER

HTMLMediaElement - HTMLのaudio要素、video要素

公開日:

HTMLMediaElementは、HTMLのメディア要素(audio要素video要素)が共通して実装するインターフェイスです。

概要

名前
HTMLMediaElement
継承
  1. EventTarget
  2. Node
  3. Element
  4. HTMLElement
  5. HTMLMediaElement
実装
実装するインターフェイスはありません。
IDL
interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError? error;

  // network state
  [CEReactions] attribute USVString src;
  attribute MediaProvider? srcObject;
  readonly attribute USVString currentSrc;
  [CEReactions] attribute DOMString? crossOrigin;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
  [CEReactions] attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  CanPlayTypeResult canPlayType(DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
  attribute double currentTime;
  void fastSeek(double time);
  readonly attribute unrestricted double duration;
  object getStartDate();
  readonly attribute boolean paused;
  attribute double defaultPlaybackRate;
  attribute double playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
  [CEReactions] attribute boolean autoplay;
  [CEReactions] attribute boolean loop;
  Promise<void> play();
  void pause();

  // controls
  [CEReactions] attribute boolean controls;
  attribute double volume;
  attribute boolean muted;
  [CEReactions] attribute boolean defaultMuted;

  // tracks
  [SameObject] readonly attribute AudioTrackList audioTracks;
  [SameObject] readonly attribute VideoTrackList videoTracks;
  [SameObject] readonly attribute TextTrackList textTracks;
  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
};

enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };

typedef (MediaStream or MediaSource or Blob) MediaProvider;

enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
仕様書
https://html.spec.whatwg.org/multipage/embedded-content.html#htmlmediaelement

説明

HTMLMediaElementは、メディアプレーヤーをコントロールするためのメソッドが備わっています。

HTML

<video src="./movie.mp4" id="hoge">

JavaScript

// video要素を取得する
var element = document.getElementById( "hoge" ) ;	// <video src="./movie.mp4" id="hoge">

// プレーヤーを操作する
element.play() ;	// 再生
element.pause() ;	// 停止
element.fastSeek( 15 ) ;	// シーク
element.volume = 0.6 ;	// 音量変更
element.playbackRate = 2.0 ;	// 再生速度

プロパティ

NodeElementHTMLElementのプロパティを利用できます。

HTMLMediaElement.audioTracks

Chrome
×
Firefox
×
Edge
IE
10+
Safari
7.1+
Opera
×
iOS
7.0+
Android
×

関連付けられたオーディオトラックを返します。

HTMLMediaElement.autoplay

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

autoplay属性を反映します。

HTMLMediaElement.buffered

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

バッファリングが完了した範囲を返します。

HTMLMediaElement.controls

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

controls属性を反映します。

HTMLMediaElement.crossOrigin

Chrome
33+
Firefox
22+
Edge
IE
×
Safari
10+
Opera
20+
iOS
10.0+
Android
×

crossorigin属性を反映します。

HTMLMediaElement.currentSrc

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

現在、採用されているファイルのアドレスを返します。

HTMLMediaElement.currentTime

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

再生位置を表す秒数を返します。値を代入して、再生位置を調整することもできます。

HTMLMediaElement.defaultMuted

Chrome
15+
Firefox
11+
Edge
IE
×
Safari
6.0+
Opera
11.6+
iOS
6.0+
Android
4.4+

muted属性を反映します。

HTMLMediaElement.defaultPlaybackRate

Chrome
Firefox
20+
Edge
IE
9+
Safari
Opera
iOS
Android

デフォルトの再生速度を反映します。

HTMLMediaElement.duration

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ファイルの再生時間を返します。

HTMLMediaElement.ended

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

再生が終了している場合はtrue、違う場合はfalseを返します。

HTMLMediaElement.error

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

エラーの情報を表すMediaErrorを返します。

HTMLMediaElement.loop

Chrome
Firefox
11+
Edge
IE
9+
Safari
Opera
iOS
Android

loop属性を反映します。

HTMLMediaElement.muted

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

muted属性を反映します。

HTMLMediaElement.networkState

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ネットワークのステータスを表す整数を返します。整数は、定数に対応しています。

HTMLMediaElement.paused

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

停止中はtrue、違う場合はfalseを返します。

HTMLMediaElement.playbackRate

Chrome
Firefox
20+
Edge
IE
9+
Safari
Opera
iOS
Android

再生速度を反映します。

HTMLMediaElement.played

Chrome
Firefox
15+
Edge
IE
9+
Safari
Opera
iOS
Android

再生が完了した範囲を返します。

HTMLMediaElement.preload

Chrome
Firefox
Edge
IE
9+
Safari
5.1+
Opera
11.6+
iOS
Android
4.0+

preload属性を反映します。

HTMLMediaElement.readyState

Chrome
Firefox
Edge
IE
Safari
Opera
iOS
Android

ファイルの読み込み状況を表す整数を返します。整数は、定数に対応しています。

HTMLMediaElement.seekable

Chrome
Firefox
8+
Edge
IE
9+
Safari
Opera
iOS
Android

シークが可能な範囲を返します。

HTMLMediaElement.seeking

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

シーク操作中ならtrue、違う場合はfalseを返します。

HTMLMediaElement.src

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

src属性を反映します。

HTMLMediaElement.srcObject

Chrome
52+
Firefox
42+
Edge
IE
×
Safari
×
Opera
39+
iOS
×
Android
×

ユーザーメディアの出力時に、メディアプロバイダーをセットするためのプロパティです。

HTMLMediaElement.textTracks

Chrome
23+
Firefox
31+
Edge
IE
10+
Safari
6.0+
Opera
15+
iOS
7.0+
Android
4.4+

関連付けられたテキストトラックを返します。

HTMLMediaElement.videoTracks

Chrome
×
Firefox
×
Edge
IE
×
Safari
7.1+
Opera
×
iOS
7.0+
Android
×

関連付けられたビデオトラックを返します。

HTMLMediaElement.volume

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

音量を反映します。

メソッド

EventTargetNodeElementHTMLElementのメソッドを利用できます。

HTMLMediaElement.addTextTrack()

Chrome
23+
Firefox
31+
Edge
IE
11+
Safari
6.0+
Opera
15+
iOS
7.0+
Android
4.4+

テキストトラックを追加します。

HTMLMediaElement.canPlayType()

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ユーザーエージェントが、指定したMIMEタイプをサポートしているかを確認します。

HTMLMediaElement.fastSeek()

Chrome
×
Firefox
31+
Edge
×
IE
×
Safari
7.1+
Opera
×
iOS
8.3+
Android
×

指定した再生位置までシークします。

HTMLMediaElement.getStartDate()

Chrome
×
Firefox
×
Edge
×
IE
×
Safari
9.1+
Opera
×
iOS
9.1+
Android
×

再生開始位置の日時を返します。

HTMLMediaElement.load()

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

リソースをロードします。既に完了している場合は、再ロードします。

HTMLMediaElement.pause()

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

再生を停止します。

HTMLMediaElement.play()

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

再生を開始します。

定数

Nodeの定数を利用できます。

HTMLMediaElement.HAVE_CURRENT_DATA = 2

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

メディアプレーヤーの準備状態。現在の再生位置までのフレームを取得できている状態であることを示します。

HTMLMediaElement.HAVE_ENOUGH_DATA = 4

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

メディアプレーヤーの準備状態。リソースのデータを十分に取得できていて、現在の再生速度なら、読み込み待ちを発生させることなく、最後まで再生できる状態であることを示します。

HTMLMediaElement.HAVE_FUTURE_DATA = 3

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

メディアプレーヤーの準備状態。テキストトラックの読み込みが完了していること、現在よりも後のフレームを取得できている状態であることを示します。

HTMLMediaElement.HAVE_METADATA = 1

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

メディアプレーヤーの準備状態。リソースのメタデータの情報を取得できた状態であることを示します。

HTMLMediaElement.HAVE_NOTHING = 0

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

メディアプレーヤーの準備状態。リソースに関する情報が、まだ何もない状態であることを示します。

HTMLMediaElement.NETWORK_EMPTY = 0

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ネットワークの状態。要素がまだ初期化されてなく、通信が始まっていない状態であることを示します。

HTMLMediaElement.NETWORK_IDLE = 1

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ネットワークの状態。リソースを利用できる状態になり、通信をしていない状態であることを示します。データのダウンロード後は、このステータスになります。

HTMLMediaElement.NETWORK_LOADING = 2

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ネットワークの状態。データのダウンロード中であることを示します。

HTMLMediaElement.NETWORK_NO_SOURCE = 3

Chrome
Firefox
Edge
IE
9+
Safari
Opera
iOS
Android

ネットワークの状態。要素の初期化が終わり、ダウンロードも試みたが、利用できるリソースがない状態であることを示します。

サポート状況

HTMLMediaElementのサポート状況です。

ブラウザサポート状況ブラウザサポート状況
ChromeSupportedFirefoxSupported
EdgeSupportedInternet ExplorerSupported
SafariSupportedOperaSupported
iOS SafariSupportedAndroidSupported

Chrome

バージョンサポート状況公開時期シェア
57Supported2017年3月頃0.1%
56Supported2017年1月頃12.02%
55Supported2016年12月頃12.36%
54Supported2016年10月頃0.44%
53Supported2016年9月頃0.25%
52Supported2016年7月頃0.27%
51Supported2016年6月頃0.4%
50Supported2016年4月頃0.32%
49Supported2016年3月頃0.47%
48Supported2016年1月頃0.02%
47Supported2015年12月頃0.06%
46Supported2015年10月頃0.56%
45Supported2015年9月頃0.01%
44Supported2015年7月頃0.83%
43Supported2015年5月頃0.05%
42Supported2015年4月頃0.05%
41Supported2015年3月頃0.01%
40Supported2015年1月頃0.59%
39Supported2014年11月頃0.02%
38Supported2014年10月頃0.08%
37Supported2014年8月頃0.01%
36Supported2014年7月頃0.01%
35Supported2014年5月頃0.01%
34Supported2014年4月頃0.14%
33Supported2014年2月頃0.01%
32Supported2014年1月頃0%
31Supported2013年11月頃0.01%
30Supported2013年10月頃0.03%
29Supported2013年8月頃0%
28Supported2013年6月頃0.03%
27Supported2013年5月頃0.01%
26Supported2013年3月頃0%
25Supported2013年2月頃0%
24Supported2013年1月頃0%
23Supported2012年11月頃0%
22Supported2012年9月頃0%
21Supported2012年7月頃0%
20Supported2012年6月頃0%
19Supported2012年5月頃0%
18Supported2012年3月頃0.01%
17Supported2012年2月頃0.01%
16Supported2011年12月頃0%
15Supported2011年10月頃0%
14Supported2011年9月頃0%

Firefox

バージョンサポート状況公開時期シェア
52Supported2017年3月頃0.12%
51Supported2017年1月頃1.7%
50Supported2016年11月頃0.78%
49Supported2016年9月頃0.02%
48Supported2016年8月頃0.07%
47Supported2016年6月頃0.03%
46Supported2016年4月頃0.01%
45Supported2016年3月頃0.1%
44Supported2016年1月頃0.01%
43Supported2015年12月頃0.02%
42Supported2015年11月頃0.01%
41Supported2015年9月頃0%
40Supported2015年8月頃0.02%
39Supported2015年7月頃0.01%
38Supported2015年5月頃0.02%
37Supported2015年3月頃0%
36Supported2015年2月頃0.01%
35Supported2015年1月頃0%
34Supported2014年12月頃0.01%
33Supported2014年10月頃0%
32Supported2014年9月頃0%
31Supported2014年7月頃0.01%
30Supported2014年6月頃0%
29Supported2014年4月頃0%
28Supported2014年3月頃0.01%
27Supported2014年2月頃0%
26Supported2013年12月頃0%
25Supported2013年10月頃0%
24Supported2013年9月頃0%
23Supported2013年8月頃0%
22Supported2013年6月頃0%
21Supported2013年5月頃0%
20Supported2013年4月頃0%
19Supported2013年2月頃0%
18Supported2013年1月頃0%
17Supported2012年11月頃0%
16Supported2012年10月頃0%
15Supported2012年8月頃0%
14Supported2012年7月頃0%
13Supported2012年6月頃0%
12Supported2012年4月頃0%
11Supported2012年3月頃0%
10Supported2012年1月頃0%
9Supported2011年12月頃0%
8Supported2011年11月頃0%
7Supported2011年9月頃0%
6Supported2011年8月頃0%
5Supported2011年6月頃0%
4Supported2011年3月頃0%

Edge

バージョンサポート状況公開時期シェア
14Supported2016年2月頃1.05%
13Supported2015年9月頃0.08%

Internet Explorer

バージョンサポート状況公開時期シェア
11Supported2013年10月頃4.99%
10Supported2012年8月頃0.09%
9Supported2011年3月頃0.18%
8Supported2009年3月頃0.04%
7Supported2006年10月頃0.01%
6Supported2001年8月頃0%

Safari

バージョンサポート状況公開時期シェア
10Supported2016年10月頃0%
9.1Supported2015年9月頃0%
8.0Supported2014年10月頃0%
7.1Supported2013年10月頃0%
6.0Supported2012年7月頃0%
5.1Supported2011年7月頃0%
4Supported2009年6月頃0%

Opera

バージョンサポート状況公開時期シェア
43Supported2017年2月頃0.06%
42Supported2016年12月頃0.09%
41Supported2016年10月頃0.01%
40Supported2016年9月頃0%
39Supported2016年8月頃0%
38Supported2016年6月頃0%
37Supported2016年5月頃0.01%
36Supported2016年3月頃0.01%
35Supported2016年2月頃0%
34Supported2015年12月頃0%
33Supported2015年10月頃0%
32Supported2015年9月頃0%
31Supported2015年8月頃0%
30Supported2015年6月頃0%
29Supported2015年4月頃0%
28Supported2015年3月頃0%
27Supported2015年1月頃0%
26Supported2014年12月頃0%
25Supported2014年10月頃0%
24Supported2014年9月頃0%
23Supported2014年7月頃0%
22Supported2014年6月頃0%
21Supported2014年5月頃0.01%
20Supported2014年3月頃0%
19Supported2014年1月頃0%
18Supported2013年11月頃0%
17Supported2013年10月頃0%
16Supported2013年8月頃0%
15Supported2013年7月頃0%
12Supported2012年6月頃0.02%
11.6Supported2011年12月頃0%
11.1Supported2011年4月頃0%

iOS Safari

バージョンサポート状況公開時期シェア
10.0Supported2016年9月頃39.65%
9.1Supported2015年9月頃5.39%
8.3Supported2014年9月頃1.03%
7.0Supported2013年9月頃0.24%
6.0Supported2012年9月頃0.05%
5.1Supported2011年10月頃0.03%

Android

バージョンサポート状況公開時期シェア
4.4Supported2013年10月頃0%
4.3Supported2013年7月頃0%
4.2Supported2013年3月頃0.03%
4.1Supported2012年12月頃0%
4.0Supported2012年6月頃1.61%
2.3Supported2011年10月頃0%