HTMLMediaElement.srcObject

在此页

句法
用法注意事项
范例
规范
浏览器兼容性
相关话题

srcObject 特性为 HTMLMediaElement interface sets or returns the object which serves as the source of the media associated with the HTMLMediaElement . The object can be a MediaStream ， MediaSource , a Blob ，或 File (which inherits from Blob ).

注意： As of March 2020, only Safari supports setting objects other than MediaStream . Until other browsers catch up, for MediaSource , Blob and File , consider falling back to creating a URL with URL.createObjectURL() and assign it to HTMLMediaElement.src . See below for an example.

句法

var sourceObject = HTMLMediaElement.srcObject;
HTMLMediaElement.srcObject = sourceObject;

值

A MediaStream , MediaSource , Blob ，或 File object (though see the compatibility table for what is actually supported).

用法注意事项

Older versions of the Media Source specification required using createObjectURL() to create an object URL then setting src to that URL. Now you can just set srcObject 到 MediaStream 直接。

范例

基本范例

In this example, a MediaStream from a camera is assigned to a newly-created <video> 元素。

const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
const video = document.createElement('video');
video.srcObject = mediaStream;

In this example, a new MediaSource is assigned to a newly-created <video> 元素。

const mediaSource = new MediaSource();
const video = document.createElement('video');
video.srcObject = mediaSource;

Supporting fallback to the src property

The examples below support older browser versions that require you to create an object URL and assign it to src if srcObject isn't supported.

首先， MediaStream from a camera is assigned to a newly-created <video> element, with fallback for older browsers.

const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
const video = document.createElement('video');
if ('srcObject' in video) {
  video.srcObject = mediaStream;
} else {
  // Avoid using this in new browsers, as it is going away.
  video.src = URL.createObjectURL(mediaStream);
}

Second, a new MediaSource is assigned to a newly-created <video> element, with fallback for older browsers and browsers that don't yet support assignment of MediaSource 直接。

const mediaSource = new MediaSource();
const video = document.createElement('video');
// Older browsers may not have srcObject
if ('srcObject' in video) {
  try {
    video.srcObject = mediaSource;
  } catch (err) {
    if (err.name != "TypeError") {
      throw err;
    }
    // Even if they do, they may only support MediaStream
    video.src = URL.createObjectURL(mediaSource);
  }
} else {
  video.src = URL.createObjectURL(mediaSource);
}

规范

规范	状态	注释
HTML 实时标准 The definition of 'srcObject' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`srcObject`	Chrome 部分支持 52 部分支持 52 Currently only supports `MediaStream` 对象。	Edge 部分支持 12 部分支持 12 Currently only supports `MediaStream` 对象。	Firefox 部分支持 42 部分支持 42 Currently only supports `MediaStream` 对象。不支持 18 — 58 Prefixed Prefixed Implemented with the vendor prefix: moz	IE No	Opera 部分支持 39 部分支持 39 Currently only supports `MediaStream` 对象。	Safari 11	WebView Android 部分支持 52 部分支持 52 Currently only supports `MediaStream` 对象。	Chrome Android 部分支持 52 部分支持 52 Currently only supports `MediaStream` 对象。	Firefox Android 部分支持 42 部分支持 42 Currently only supports `MediaStream` 对象。不支持 18 — 58 Prefixed Prefixed Implemented with the vendor prefix: moz	Opera Android 部分支持 41 部分支持 41 Currently only supports `MediaStream` 对象。	Safari iOS 11	Samsung Internet Android 部分支持 6.0 部分支持 6.0 Currently only supports `MediaStream` 对象。

图例

完整支持
部分支持
不支持

要求使用供应商前缀或不同名称。

元数据

最后修改： Mar 22, 2020

在此页

句法

值

用法注意事项

范例

基本范例

Supporting fallback to the src property

规范

浏览器兼容性

图例

相关话题