MediaQueryListEvent.media - Web APIs
the media read-only property of the mediaquerylistevent interface is a domstring representing a serialized media query. syntax var media = mediaquerylistevent.media; value a domstring representing a serialized media query. ...
... the media read-only property of the mediaquerylistevent interface is a domstring representing a serialized media query. syntax var media = mediaquerylistevent.media; value a domstring representing a serialized media query. ...
... working draft initial definition ...
... working draft initial definition ...

Handling media support issues in web content - Web media technologies
one of the realities of working with audio and video presentation and manipulation on the web is that there are a number of media formats available, of varying degrees of popularity and with a variety of capabilities. the availability of choices is good for the user, in that they can choose the format that suits their needs best. there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own devices when deciding which media file types and codecs to support. this places a small, but reasonably easily overcome, burden on the web developer: to properly handle the situation when the user's browser can't handle a particular type of media. this guide covers techniques y...
...ign principles involved, each web browser developer is left to its own devices when deciding which media file types and codecs to support. this places a small, but reasonably easily overcome, burden on the web developer: to properly handle the situation when the user's browser can't handle a particular type of media. this guide covers techniques you can use to develop web content that meets your media needs while providing the most broadly compatible experience possible. topics we will examine fallbacks, baseline media formats, and error handling practices that will let your content work in as many situations as possible. using poster frames a poster frame is a still image that's representative of the content of a video. this may be simply the first frame of video; however, in many cases, th...
...ge as soon as possible, then update the image as it loads—or after it's finished loading—to present it in full quality. note: progressive (or interlaced) images are inherently slightly larger than the non-progressive versions of the same images. whether the interlacing will benefit your users is up to you to determine. specifying multiple sources checking compatibility in javascript htmlmediaelement.canplaytype and mediasource.istypesupported... detecting playback errors adapting presentation with css memory management ...

MediaElementAudioSourceNode.mediaElement - Web APIs
the mediaelementaudiosourcenode interface's read-only mediaelement property indicates the htmlmediaelement that contains the audio track from which the node is receiving audio. this stream was specified when the node was first created, either using the mediaelementaudiosourcenode() constructor or the audiocontext.createmediaelementsource() method. syntax audiosourceelement = mediaelementaudiosourcenode.mediaelement; value an htmlmediaelement representing the element which contains the source of audio for the node. ...
...the mediaelementaudiosourcenode() constructor or the audiocontext.createmediaelementsource() method. syntax audiosourceelement = mediaelementaudiosourcenode.mediaelement; value an htmlmediaelement representing the element which contains the source of audio for the node. examples const audioctx = new window.audiocontext(); const audioelem = document.queryselector('audio'); let options = { mediaelement: audioelem } let source = new mediaelementaudiosourcenode(audioctx, options); console.log(source.mediaelement); specifications specification status comment web audio apithe definition of 'mediaelementaudiosourcenode.mediaelement' in that specification. working draft ...

MediaRecorder.ignoreMutedMedia - Web APIs
the ignoremutedmedia property of the mediarecorder interface indicates whether the mediarecorder instance will record input, when the input mediastreamtrack is muted. if this attribute is false, mediarecorder will record silence for audio and black frames for video. the default is false. syntax var boolean = mediarecorder.ignoremutedmedia mediarecorder.ignoremutedmedia = boolean value a boolean. browser compatibility the compatibility table in 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. ...
...olean. browser compatibility the compatibility table in 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. ...

MediaStreamAudioDestinationNode.MediaStreamAudioDestinationNode() - Web APIs
the mediastreamaudiodestinationnode() constructor of the web audio api creates a new mediastreamaudiodestinationnode object instance. syntax var myaudiodest = new mediastreamaudiodestinationnode(context, options); parameters inherits parameters from the audionodeoptions dictionary. context an audiocontext representing the audio context you want the node to be associated with. options optional an audionodeoptions dictionary object defining the properties you want the mediastreamaudiodestinationnode to have. return value a new mediastreamaudiodestinationnode object instance. ...
... audionodeoptions dictionary. context an audiocontext representing the audio context you want the node to be associated with. options optional an audionodeoptions dictionary object defining the properties you want the mediastreamaudiodestinationnode to have. return value a new mediastreamaudiodestinationnode object instance. example var ac = new audiocontext(); var mydestination = new mediastreamaudiodestinationnode(ac); specifications specification status comment web audio apithe definition of 'mediastreamaudiodestinationnode' in that specification. working draft ...

MediaQueryListEvent.MediaQueryListEvent() - Web APIs
the mediaquerylistevent constructor creates a new mediaquerylistevent instance. syntax var mymqlevent = new mediaquerylistevent(init); parameters init an init object that defines features of the new object instance. the available properties are: media: a domstring representing a serialized media query. matches: a boolean representing the media query status — true if it matches, false if not. examples var media = '(max-width: 600px)'; var matches = true; var mymediaquerylistevent = new mediaquerylistevent({media, matches}); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent()' in that specification. working draft initial definition ...

MediaStreamAudioSourceOptions.mediaStream - Web APIs
the mediastreamaudiosourceoptions dictionary's mediastream property must specify the mediastream from which to retrieve audio data when instantiating a mediastreamaudiosourcenode using the mediastreamaudiosourcenode() constructor. syntax mediastreamaudiosourceoptions = { mediastream: audiosourcestream; } mediastreamaudiosourceoptions.mediastream = audiosourcestream; value a mediastream representing the stream from which to use a mediastreamtrack as the source of audio for the node. example specifications specification status comment web audio apithe definition of 'mediastreamaudiosourceoptions.mediastream' in that specification. working draft ...

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
onwards) that applies to replaced elements, and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <table>, and <video>, in addition to actual images (<img> and <input type="image">). when such an element has width and height attributes set on it, its aspect ratio will be calculated before load time, and be available to the browser. note: currently this effect is being limited to actual <img> elements, as applying to other such elements may have u...

@media - CSS: Cascading Style Sheets
the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries. with it, you specify a media query and a block of css to apply to the document if and only if the media query matches the device on which the content is being used. note: in javascript, the rules created using @media can be accessed with the cssmediarule css object model interface. syntax the @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule. ...
...css to apply to the document if and only if the media query matches the device on which the content is being used. note: in javascript, the rules created using @media can be accessed with the cssmediarule css object model interface. syntax the @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule. /* at the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries. description media types media types describe the general category of a device. exce...
...ing: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries. description media types media types describe the general category of a device. except when using the not or only logical operators, the media type is optional and the all type will be implied. all suitable for all devices. print intended for paged material and documents viewed on a screen in print preview mode. ...
...And 47 more matches

Windows Media in Netscape - Archive of obsolete content
netscape 7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer. netscape 7.1 will work with both the windows media player 6.4 activex control as well as versions 7 through 9. this article explains how to embed the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. ...
...rticle explains how to embed the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. detecting the right browser like internet explorer, netscape 7.1 and later versions can play windows media files using the popular windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. controls such as windows media player also interact closely with the scripts in a web page. ...
...etscape 7.1 and later versions can play windows media files using the popular windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. controls such as windows media player also interact closely with the scripts in a web page. netscape 7.1 is the first netscape gecko™ browser to support the windows media player as an activex control -- previous netscape browsers did not support any activex controls, and thus detecting which versions of netscape support the windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the windows media activex control. ...
...And 44 more matches

HTMLMediaElement - Web APIs
the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...aco,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="/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;} properties this inter...
...And 38 more matches

Using media queries - CSS: Cascading Style Sheets
media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. ...
...at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. note: the examples on this page use css's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. syntax a media query is composed of an optional media type and any number of media feature expressions. multiple queries can be combined in various ways by using logical operators. media queries are case-insensitive. a media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. queries involving unk...
...y is composed of an optional media type and any number of media feature expressions. multiple queries can be combined in various ways by using logical operators. media queries are case-insensitive. a media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. queries involving unknown media types are always false. note: a style sheet with a media query attached to its <link> tag will still download even if the query returns false. nevertheless, its contents will not apply unless and until the result of the query changes to true. media types media types describe the general category of a device. ...
...And 29 more matches

Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. prerequisites: html basics (study introduction to html), and an idea of how ...
...een rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs. ...
...ies, and then move on to use them in a worked example showing how a simple design might be made responsive. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs. media query basics the simplest media query syntax looks like this: @media media-type and (media-feature-rule) { /* css rules go here */ } it consists of: a media type, which tells the browser what kind of media this code is for (e.g. print, or screen). a media expression, which is a rule, or test that must be passed for the contained css to be applied. a set of css rules that will be applied...
...And 26 more matches

Setting up adaptive streaming media sources - Developer guides
we are required to provide several different quality files split up over several time points. ...
...we are required to provide several different quality files split up over several time points. ...
...a element. how would you do that? this article explains how, looking at two of the most common formats: mpeg-dash and hls (http live streaming.) choosing formats in terms of adaptive streaming formats, there are many to choose from; we decided to choose the following two as between them we can support most modern browsers. ...
...And 22 more matches

MediaRecorder - Web APIs
the mediarecorder interface of the mediastream recording api provides functionality to easily record media. it is created using the mediarecorder() constructor. constructor mediarecorder() creates a new mediarecorder object, given a mediastream to record. options are available to do things like set the container's mime type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate. properties mediarecorder.mimetype read only returns the mime type that was selected as the recording container for the mediarecorder object when it was created. ...
...order object, given a mediastream to record. options are available to do things like set the container's mime type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate. properties mediarecorder.mimetype read only returns the mime type that was selected as the recording container for the mediarecorder object when it was created. mediarecorder.state read only returns the current state of the mediarecorder object (inactive, recording, or paused.) mediarecorder.stream read only returns the stream that was passed into the constructor when the mediarecorder was created. mediarecorder.ignoremutedmedia indicates whether the mediarecorder instance will record input when the input mediastreamtrack is muted. if this attribute is ...
...r.state read only returns the current state of the mediarecorder object (inactive, recording, or paused.) mediarecorder.stream read only returns the stream that was passed into the constructor when the mediarecorder was created. mediarecorder.ignoremutedmedia indicates whether the mediarecorder instance will record input when the input mediastreamtrack is muted. if this attribute is false, mediarecorder will record silence for audio and black frames for video. the default is false. mediarecorder.videobitspersecond read only returns the video encoding bit rate in use. this may differ from the bit rate specified in the constructor (if it was provided). mediarecorder.audiobitspersecond read only returns the audio encoding bit rate in use. this may differ from the bit rate specified in...
...And 20 more matches

Web video codec guide - Web media technologies
ose which are most commonly used on the web. for each codec, the containers (file types) that can support them are also listed. each codec provides a link to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of. ...
... bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file. effect of source video format on encoded output the degree to which the format of the source video will affect the output varies depending on the codec and how it works. if the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference. however, things such as frame rate and, obviously, resolution will always have an impact on the output size of the media. additionally, all codecs have their strengths and weaknesses. some have trouble with specific kinds of shapes...
...r, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame. the more successive frames differ from one another, the larger these differences are, and the less effective the compression is at avoiding the introduction of artifacts into the compressed video. the complexity introduced by motion results in larger intermediate frames due to the higher number of differences between frames). for this and other reasons, the more motion there is in a video, the larger the output file will typically be. noise picture noise (such as film grain effects, dust, or other grittiness to the image) introduces variability. variability generally makes compression more difficult, resulting in more lost quality due to the...
...And 20 more matches

Using the MediaStream Recording API - Web APIs
it allows you to record snippets of audio and then play them back. it even gives you a visualization of your device's sound input, using the web audio api. we'll concentrate on the recording and playback functionality for this article. ...
...it allows you to record snippets of audio and then play them back. it even gives you a visualization of your device's sound input, using the web audio api. we'll concentrate on the recording and playback functionality for this article. ...
...it allows you to record snippets of audio and then play them back. it even gives you a visualization of your device's sound input, using the web audio api. we'll concentrate on the recording and playback functionality for this article. you can see this demo running live, or grab the source code on github. ...
...And 18 more matches

MediaStreamAudioSourceNode - Web APIs
see track ordering for more information about the order of tracks. the number of channels output by the node matches the number of tracks found in the selected audio track. ...
...see track ordering for more information about the order of tracks. the number of channels output by the node matches the number of tracks found in the selected audio track. ...
...see track ordering for more information about the order of tracks. the number of channels output by the node matches the number of tracks found in the selected audio track. ...
...And 17 more matches

nsIWindowMediator
xpfe/appshell/public/nsiwindowmediator.idlscriptable the window mediator is a mozilla component that keeps track of open windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsiwindowmediator are, enumerating all windows of a given type and getting the most recent / any window of a given type. ...
...iator.idlscriptable the window mediator is a mozilla component that keeps track of open windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsiwindowmediator are, enumerating all windows of a given type and getting the most recent / any window of a given type. ...
...iator is a mozilla component that keeps track of open windows. inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsiwindowmediator are, enumerating all windows of a given type and getting the most recent / any window of a given type. ...
...And 16 more matches

MediaDevices.ondevicechange - Web APIs
there is no information about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices(). ...
...there is no information about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices(). ...
...there is no information about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices(). ...
...And 15 more matches

Configuring servers for Ogg media - HTTP
*.oga and *.ogg files containing only audio should be served with the audio/ogg mime type. ...
...*.oga and *.ogg files containing only audio should be served with the audio/ogg mime type. ...
...*.oga and *.ogg files containing only audio should be served with the audio/ogg mime type. ...
...And 15 more matches

Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. this article shows how. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of what accessibility is. objective: to understand the accessibility issues behind multimedia, and how to overcome them. ...
...to be given proper textual alternatives so they can be understood by assistive technologies and their users. this article shows how. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of what accessibility is. objective: to understand the accessibility issues behind multimedia, and how to overcome them. multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes). this article on the other hand looks at another general class of content that arguably ...
...ooked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes). this article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia. images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand. but don't despair — here we will help you navigate through the techniques available for making multimedia more accessible. simple images we already covered simple text alternatives for html images in our html: a good basis...
...And 14 more matches

Recording a media element - Web APIs
in this article, we'll look at an example that does just that. html content <p>click the "start" button to begin video recording for a few seconds. you can stop the video by clicking the creatively-named "stop" button. the "download" button will download the received data (although it's in a raw, unwrapped form that isn't very useful). </p> <br> let's start by looking at the key bits of the html. ...
... start </div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </div> we present our main interface in two columns. on the left is a start button and a <video> element which displays the video preview; this is the video the user's camera sees. note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feedback loop. <div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> ...
...lass="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play back the recorded video. notice that the playback panel doesn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. <div class="bottom"> <pre id="log"></pre> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; displa...
...And 14 more matches

MediaStream Recording API - Web APIs
the mediastream recording api, sometimes simply referred to as the media recording api or the mediarecorder api, is closely affiliated with the media capture and streams api and the webrtc api. the mediastream recording api makes it possible to capture the data generated by a mediastream or htmlmediaelement object for analysis, processing, or saving to disk. it's also surprisingly easy to work with. basic concepts the mediastream recording api is comprised of a single major interface, mediarecorder, which does all the work of taking the data from a mediastream and delivering it to you for processing. the data is delivered by a series of dataavailable events, already in the format you specify when creating the mediarecorder. you can then process the data further or write it to file as desired...
...corder, which does all the work of taking the data from a mediastream and delivering it to you for processing. the data is delivered by a series of dataavailable events, already in the format you specify when creating the mediarecorder. you can then process the data further or write it to file as desired. overview of the recording process the process of recording a stream is simple: set up a mediastream or htmlmediaelement (in the form of an <audio> or <video> element) to serve as the source of the media data. create a mediarecorder object, specifying the source stream and any desired options (such as the container's mime type or the desired bit rates of its tracks). ...
...to file as desired. overview of the recording process the process of recording a stream is simple: set up a mediastream or htmlmediaelement (in the form of an <audio> or <video> element) to serve as the source of the media data. create a mediarecorder object, specifying the source stream and any desired options (such as the container's mime type or the desired bit rates of its tracks). set mediarecorder.ondataavailable to an event handler for the dataavailable event; this will be called whenever data is available for you. once the source media is playing and you've reached the point where you're ready to record video, call mediarecorder.start() to begin recording. your dataavailable event handler gets called every time there's data ready for you to do with as you will; the event has a ...
...And 13 more matches

Using the Media Capabilities API - Web APIs
the media capabilities api provides several key features to help you better decide how to handle media, but also to determine how well media is being handled, in real time. these features include: the ability to query the browser to determine its ability to encode or decode media given a specified set of encoding parameters. these parameters may include the codecs, resolutions, bit rates, frame rates, and other such details. with the media capabilities api, you can determine not just if the browser can support a given format, but whether or not it can do so efficiently and smoothly. in short, this api replaces—and improves upon—the mediasource method istypesupported() or the htmlmediaelement method canplaytype(). more and more finely-detailed information about the display's properties,...
...hod canplaytype(). more and more finely-detailed information about the display's properties, so that informed decisions can be made when choosing the best format to play on the user's device. for example, you can use the api to ensure that you don't try to play high dynamic range (hdr) content on a standard dynamic range (sdr) screen. support for getting real-time feedback about the playback of media, so your code can make informed decisions about adapting the stream's quality or other settings to manage the user's perceived media performance and quality. one feature of this is the ability to detect when the device switches gpus, so you can make appropriate adjustments based on the new gpu's capabilities. note: the display capabilities functionality mentioned in the third point above have ...
...us, so you can make appropriate adjustments based on the new gpu's capabilities. note: the display capabilities functionality mentioned in the third point above have not yet appeared in any browser. they will be a useful feature of the api once available, but there is a high probability of the display capabilities functionality changing a great deal before browser implementations arrive. the mediacapabilities interface the mediacapabilities is available using the mediacapabilities property which is provided by both the navigator object and the workernavigator object; in other words, the media capabilities api is available both on the main thread and from workers. if the object exists, media capabilities api is available. you can, therefore, test for the presence of the api like so: if ...
...And 13 more matches

Media Session API - Web APIs
the media session api provides a way to customize media notifications. it does this by providing metadata for display by the user agent of the media your web app is playing, and allows you to create event handlers, to define your own behaviors for a user-agent playback controls. the aim of this is allowing users to know what's playing, and to control it, without opening the specific page that launched it. media session concepts and usage the mediametadata interface lets a web site provide rich metadata to the platform ui for media that is playing. this metadata includes the title, artist (creator) name, album (collection), and artwork. the platform can show this metadata in media centers, notifications, device lockscreens, etc. ...
...since multiple pages may be simultaneously using this api, the user agent is responsible for calling the correct page's event handlers. ...
...nched it. media session concepts and usage the mediametadata interface lets a web site provide rich metadata to the platform ui for media that is playing. this metadata includes the title, artist (creator) name, album (collection), and artwork. the platform can show this metadata in media centers, notifications, device lockscreens, etc. the mediasession interface lets users control playback of media through user-agent defined interface elements. interaction with these elements even trigger handlers in the web page, playing the media. since multiple pages may be simultaneously using this api, the user agent is responsible for calling the correct page's event handlers. the user agent provides default behaviors, when no page-defined behavior is available. ...
...And 12 more matches

MediaSessionActionDetails - Web APIs
the media session api's mediasessionactiondetails dictionary is the type used by the sole input parameter into the callback which is executed when a media session action occurs. it specifies the type of action which needs to be performed as well as the data needed to perform the action. properties action a media session action type string taken from the mediasessionaction enumerated type, indicating which type of action needs to be performed. see media action types below for possible values. fastseek optional an seekto action may optionally include this property, which is a boolean value indicating whether or not to perform a "fast" seek. ...
...fastseek is not included on the final action in the seek sequence in this situation. ...
...fastseek is not included on the final action in the seek sequence in this situation. ...
...And 11 more matches

MediaSource - Web APIs
the mediasource interface of the media source extensions api represents a source of media data for an htmlmediaelement object. a mediasource object can be attached to a htmlmediaelement to be played in the user agent. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/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" ali...
...t="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="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() ...
..."151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers. ...
...And 11 more matches

MediaStreamTrackAudioSourceNode - Web APIs
the mediastreamtrackaudiosourcenode interface is a type of audionode which represents a source of audio data taken from a specific mediastreamtrack obtained through the webrtc or media capture and streams apis. the audio itself might be input from a microphone or other audio sampling device, or might be received through a rtcpeerconnection, among other posible options. a mediastreamtrackaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediastreamtracksource() method. this interface is similar to mediastreamaudiosourcenode, except it lets you specifically state the track to use, rather than assuming the first audio track on a stream. number of inputs 0 number of outputs 1 channel count defined by the first ...
...as no inputs and exactly one output, and is created using the audiocontext.createmediastreamtracksource() method. this interface is similar to mediastreamaudiosourcenode, except it lets you specifically state the track to use, rather than assuming the first audio track on a stream. number of inputs 0 number of outputs 1 channel count defined by the first audio mediastreamtrack passed to the audiocontext.createmediastreamtracksource() method that created it. constructor new mediastreamtrackaudiosourcenode() creates a new mediastreamtrackaudiosourcenode object instance with the specified options. properties the mediastreamtrackaudiosourcenode interface has no properties of its own; however, it inherits the properties of its parent, audionode. me...
...next, we feed this source audio into a low pass biquadfilternode (which effectively serves as a bass booster), then a audiodestinationnode. ...
...And 11 more matches

Testing media queries programmatically - CSS: Cascading Style Sheets
the dom provides features that can test the results of a media query programmatically, via the mediaquerylist interface and its methods and properties. once you've created a mediaquerylist object, you can check the result of the query or receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. to do this, use the window.matchmedia method. ...
...u can check the result of the query or receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. to do this, use the window.matchmedia method. ...
... query or receive notifications when the result changes. creating a media query list before you can evaluate the results of a media query, you need to create the mediaquerylist object representing the query. to do this, use the window.matchmedia method. ...
...And 11 more matches

AudioContext.createMediaStreamSource() - Web APIs
the createmediastreamsource() method of the audiocontext interface is used to create a new mediastreamaudiosourcenode object, given a media stream (say, from a mediadevices.getusermedia instance), the audio from which can then be played and manipulated. for more details about media stream audio source nodes, check out the mediastreamaudiosourcenode reference page. syntax audiosourcenode = audiocontext.createmediastreamsource(stream); parameters stream a mediastream to serve as an audio source to be fed into an audio processing graph for use and manipulation. return value a new mediastreamaudiosourcenode object representing the audio node whose media is obtained from the specified source stream. ...
...next, we feed this source audio into a low pass biquadfilternode (which effectively serves as a bass booster), then a audiodestinationnode. ...
...next, we feed this source audio into a low pass biquadfilternode (which effectively serves as a bass booster), then a audiodestinationnode. ...
...And 10 more matches

MediaError.message - Web APIs
if no specific details are available, this string is empty. ...
...if no specific details are available, this string is empty. ...
...if no specific details are available, this string is empty. ...
...And 10 more matches

MediaSession.setActionHandler() - Web APIs
callback a function to call when the specified action type is invoked. the callback receives no input parameters, and should not return a value. ...
... callback a function to call when the specified action type is invoked. the callback receives no input parameters, and should not return a value. ...
... callback a function to call when the specified action type is invoked. the callback receives no input parameters, and should not return a value. ...
...And 10 more matches

MediaStreamTrack - Web APIs
the mediastreamtrack interface represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist as well. properties in addition to the properties listed below, mediastreamtrack has constrainable properties which can be set using applyconstraints() and accessed using getconstraints() and getsettings(). see capabilities, constraints, and settings to learn how to correctly work with constrainable properties. not doing so correctly will result in your code being unreliable. mediastreamtrack.contenthint a string that may be used by the web application to provide a hint as to what type of content the track contains to guide how it should be treated by api consumers. ...
...traints() and getsettings(). see capabilities, constraints, and settings to learn how to correctly work with constrainable properties. not doing so correctly will result in your code being unreliable. mediastreamtrack.contenthint a string that may be used by the web application to provide a hint as to what type of content the track contains to guide how it should be treated by api consumers. mediastreamtrack.enabled a boolean whose value of true if the track is enabled, that is allowed to render the media source stream; or false if it is disabled, that is not rendering the media source stream but silence and blackness. if the track has been disconnected, this value can be changed but has no more effect. note: you can implement standard "mute" functionality by setting enabled to false. th...
...rack is enabled, that is allowed to render the media source stream; or false if it is disabled, that is not rendering the media source stream but silence and blackness. if the track has been disconnected, this value can be changed but has no more effect. note: you can implement standard "mute" functionality by setting enabled to false. the muted property refers to a condition in which there's no media because of a technical issue. mediastreamtrack.id read only returns a domstring containing a unique identifier (guid) for the track; it is generated by the browser. mediastreamtrack.isolated read only returns a boolean value which is true if the track is isolated; that is, the track cannot be accessed by the document that owns the mediastreamtrack. this happens when the peeridentity prope...
...And 10 more matches

Media Capabilities API - Web APIs
the media capabilities api allows developers to determine decoding and encoding abilities of the device, exposing information such as whether media is supported and whether playback should be smooth and power efficient, with real time feedback about playback to better enable adaptive streaming, and access to display property information. examples detect audio file support and expected performance this example defines a audio configuration then checks to see if the user agent supports decoding that media configuration, and whether it will perform well in terms of smoothness and power efficiency. ...
...icient, with real time feedback about playback to better enable adaptive streaming, and access to display property information. examples detect audio file support and expected performance this example defines a audio configuration then checks to see if the user agent supports decoding that media configuration, and whether it will perform well in terms of smoothness and power efficiency. ...
...on then checks to see if the user agent supports decoding that media configuration, and whether it will perform well in terms of smoothness and power efficiency. ...
...And 10 more matches

Transcoding assets for Media Source Extensions - Web APIs
when working with media source extensions, it is likely that you need to condition your assets before you can stream them. this article takes you through the requirements and shows you a toolchain you can use to encode your assets appropriately. getting started the first and most important step is to ensure that your files are comprised of a container and codec that users' browsers support. depending on the codec, you might need to fragment the file to comply with the iso bmff spec. (optional) if you decide to use dynamic adaptive streaming over http (dash) for adaptive bitrate streaming, you need to transcode your assets into multiple resolutions. ...
...o ensure that your files are comprised of a container and codec that users' browsers support. depending on the codec, you might need to fragment the file to comply with the iso bmff spec. (optional) if you decide to use dynamic adaptive streaming over http (dash) for adaptive bitrate streaming, you need to transcode your assets into multiple resolutions. ...
...big buck bunny is licensed under the creative commons attribution 3.0 license. ...
...And 10 more matches

MediaSession.setPositionState() - Web APIs
if the object is empty, the existing playback state information is cleared. return value undefined. ...
...if the object is empty, the existing playback state information is cleared. return value undefined. ...
...if the object is empty, the existing playback state information is cleared. return value undefined. ...
...And 9 more matches

Navigator.getUserMedia() - Web APIs
the deprecated navigator.getusermedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a mediastream. if permission is granted, a mediastream whose video and/or audio tracks come from those devices is delivered to the specified success callback. if permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a mediastreamerror object describing what went wrong. if the user instead doesn't make a choice at all, neither callback is executed. this is a legacy method. please use the newer navigator.mediadevices.getusermedia() instead. while technically not deprecated, this old callback ve...
...ect describing what went wrong. if the user instead doesn't make a choice at all, neither callback is executed. this is a legacy method. please use the newer navigator.mediadevices.getusermedia() instead. while technically not deprecated, this old callback version is marked as such, since the specification strongly encourages using the newer promise returning version. syntax navigator.getusermedia(constraints, successcallback, errorcallback); parameters constraints a mediastreamconstraints object specifying the types of media to request, along with any requirements for each type. for details, see the constraints section under the modern mediadevices.getusermedia() method, as well as the article capabilities, constraints, and settings. successcallback a function which is invoked when...
...cesscallback, errorcallback); parameters constraints a mediastreamconstraints object specifying the types of media to request, along with any requirements for each type. for details, see the constraints section under the modern mediadevices.getusermedia() method, as well as the article capabilities, constraints, and settings. successcallback a function which is invoked when the request for media access is approved. the function is called with one parameter: the mediastream object that contains the media stream. your callback can then assign the stream to the desired object (such as an <audio> or <video> element), as shown in the following example: function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { ...
...And 9 more matches

Web media technologies
over the years, the web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. today, there are a large number of apis available, as well as html elements, dom interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. this article lists the various apis with links to documentation you may find helpful in mastering them. references html these articles cover html features for media developers. <audio> the <audio> element is used to play audio in a web context. these can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. accessible from javascript as htmlaud...
... used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. accessible from javascript as htmlaudioelement objects. <video> the <video> element is an endpoint for video content in a web context. it can be used to simply present video files, or as a destination for streamed video content. <video> can also be used as a way to link media apis with other html and dom technologies, including <canvas> (for frame grabbing and manipulation), for example. accessible from javascript as htmlvideoelement objects. <track> the html <track> element can be placed within an <audio> or <video> element to provide a reference to a webvtt format subtitle or caption track to be used when playing the media. accessible from javascript as htmltracke...
...ccessible from javascript as htmlvideoelement objects. <track> the html <track> element can be placed within an <audio> or <video> element to provide a reference to a webvtt format subtitle or caption track to be used when playing the media. accessible from javascript as htmltrackelement objects. <source> the html <source> element is used within an <audio> or <video> element to specify source media to present. multiple sources can be used to provide the media in different formats, sizes, or resolutions. accessible from javascript as htmlsourceelement objects. apis media capabilities api the media capabilities api lets you determine the encoding and decoding capabilities of the device your app or site is running on. this lets you make real-time decisions about what formats to use and w...
...And 9 more matches

HTMLMediaElement.load() - Web APIs
return value undefined. ...
... return value undefined. ...
... return value undefined. ...
...And 8 more matches

MediaCapabilitiesInfo - Web APIs
the mediacapabilitiesinfo interface of the media capabilities api is made available when the promise returned by the mediacapabilities.encodinginfo() or mediacapabilities.decodinginfo() methods of the mediacapabilities interface fulfills, providing information as to whether the media type is supported, and whether encoding or decoding such media would be smooth and power efficient. properties the mediacapabilitiesinfo interface contains three boolean attribues: supported: given the properties defined in the mediaconfiguration, can the specified piece of media content be encoded (if mediaencodingconfiguration is set) or decode (if mediadecodingconfiguration is set) at all? if yes, supported is true. otherwise, it is false. smooth: given the properties defined in the mediaconfiguration, wi...
...ee boolean attribues: supported: given the properties defined in the mediaconfiguration, can the specified piece of media content be encoded (if mediaencodingconfiguration is set) or decode (if mediadecodingconfiguration is set) at all? if yes, supported is true. otherwise, it is false. smooth: given the properties defined in the mediaconfiguration, will the playback of the specified piece of media be high quality? will it be smooth? if supported is true, and playback will be smooth, smooth is true, otherwise, is it false. powerefficient: given the properties defined in the mediaconfiguration, will the playback of the specified piece of media be power efficient? if supported is true, and playback will be power efficient, powerefficient is true, otherwise, is it false. browsers will repo...
...y? will it be smooth? if supported is true, and playback will be smooth, smooth is true, otherwise, is it false. powerefficient: given the properties defined in the mediaconfiguration, will the playback of the specified piece of media be power efficient? ...
...And 8 more matches

Media Session action types - Web APIs
to support an action on a media session, such as seeking, pausing, or changing tracks, you need to call the mediasession interface's setactionhandler() method to establish a handler for that action. the specific type of media session action to be handled on a mediasession is identified using a string from the mediasessionaction enumerated type. syntax a media session action's type is specified using a string from the mediasessionaction enumerated type. values each of the actions is a common media session control request. implement support for each of these in order to allow that type of action to be performed. the following strings identify the currently available types of media session action: nexttrack advances playback to the next track. ...
...ecified using a string from the mediasessionaction enumerated type. values each of the actions is a common media session control request. implement support for each of these in order to allow that type of action to be performed. the following strings identify the currently available types of media session action: nexttrack advances playback to the next track. pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. the mediasessionactiondetails property seekoffset specifies the amount of time to seek backward. seekforward seeks forward from the current position through the media. ...
... next track. pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. the mediasessionactiondetails property seekoffset specifies the amount of time to seek backward. seekforward seeks forward from the current position through the media. the mediasessionactiondetails property seekoffset specifies the amount of time to seek forward. seekto moves the playback position to the specified time within the media. the time to which to seek is specified in the mediasessionactiondetails property seektime. ...
...And 8 more matches

MediaSettingsRange - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the size of an input range. ...
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the size of an input range. ...
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the size of an input range. ...
...And 8 more matches

MediaStream - Web APIs
the mediastream interface represents a stream of media content. a stream consists of several tracks such as video or audio tracks. each track is specified as an instance of mediastreamtrack.you can obtain a mediastream object either by using the constructor or by calling mediadevices.getusermedia(). some user agents subclass this interface to provide more precise information or functionality, like in canvascapturemediastream. constructor mediastream() creates and returns a new mediastream object. you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of tracks (specified as an array of mediastreamtrack objects). properties this interface inherits properties from its parent, eventtarget. ...
...n or functionality, like in canvascapturemediastream. constructor mediastream() creates and returns a new mediastream object. you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of tracks (specified as an array of mediastreamtrack objects). properties this interface inherits properties from its parent, eventtarget. mediastream.active read only a boolean value that returns true if the mediastream is active, or false otherwise. mediastream.ended read only a boolean value set to true if the end of the stream has been reached. ...
...rack objects). properties this interface inherits properties from its parent, eventtarget. mediastream.active read only a boolean value that returns true if the mediastream is active, or false otherwise. mediastream.ended read only a boolean value set to true if the end of the stream has been reached. this has been removed from the specification; you should instead check the value of mediastreamtrack.readystate to see if its value is ended for the track or tracks you want to ensure have finished playing. mediastream.id read only a domstring containing 36 characters denoting a universally unique identifier (uuid) for the object. ...
...And 8 more matches

MediaStreamTrackAudioSourceNode() - Web APIs
the web audio api's mediastreamtrackaudiosourcenode() constructor creates and returns a new mediastreamtrackaudiosourcenode object whose audio is taken from the mediastreamtrack specified in the given options object. another way to create a mediastreamtrackaudiosourcenode is to call theaudiocontext.createmediastreamtracksource() method, specifying the mediastreamtrack from which you want to obtain audio. syntax audiotracknode = new mediastreamtrackaudiosourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with. ...
... another way to create a mediastreamtrackaudiosourcenode is to call theaudiocontext.createmediastreamtracksource() method, specifying the mediastreamtrack from which you want to obtain audio. syntax audiotracknode = new mediastreamtrackaudiosourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with. options a mediastreamtrackaudiosourceoptions object defining the properties you want the mediastreamtrackaudiosourcenode to have: mediastreamtrack the mediastreamtrack from which to take audio data for this node's output. return value a new mediastreamtrackaudiosourcenode object representing the audio node whose media is obtained from the specified media track. exceptions notsupportederror the sp...
...mediastreamtrackaudiosourcenode to have: mediastreamtrack the mediastreamtrack from which to take audio data for this node's output. return value a new mediastreamtrackaudiosourcenode object representing the audio node whose media is obtained from the specified media track. exceptions notsupportederror the specified context is not an audiocontext. invalidstateerror the specified mediastreamtrack isn't an audio track (that is, its kind property isn't audio. example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device. ...
...And 8 more matches

Media buffering, seeking, and time ranges - Developer guides
sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. this article discusses how to build a buffer/seek bar using timeranges, and other features of the media api. buffered the buffered attribute will tell us which parts of the media has been downloaded. it returns a timeranges object, which will tell us which chunks of media have been downloaded. this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = documen...
... ranges of time, with start and stop times. (learn more about timeranges). a timeranges object consists of the following properties: length: the number of time ranges in the object. start(index): the start time, in seconds, of a time range. end(index): the end time, in seconds, of a time range. without any user interaction there is usually only one time range, but if you jump about in the media more than one time range can appear, as illustrated by the below visualization. this represents two buffered time ranges — one spanning 0 to 5 seconds and the second spanning 15 to 19 seconds. ------------------------------------------------------ |=============| |===========| | ------------------------------------------------------ 0 5 15 ...
....stroke(); } }); } this works better with longer pieces of audio or video, but press play and click about the player progress bar and you should get something like this. each red filled white rectangle represents a time range. note: you can see the timerange code running live on js bin. seekable the seekable attribute returns a timeranges object and tells us which parts of the media can be played without delay; this is irrespective of whether that part has been downloaded or not. some parts of the media may be seekable but not buffered if byte-range requests are enabled on the server. byte range requests allow parts of the media file to be delivered from the server and so can be ready to play almost immediately — thus they are seekable. var seekabletimeranges = myaudio.se...
...And 8 more matches

Codecs used by WebRTC - Web media technologies
the webrtc api makes it possible to construct web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other information. to communicate, the two devices need to be able to agree upon a mutually-understood codec for each track so they can successfully communicate and present the shared media. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. containerless media webrtc uses bare mediastreamtrack objects for each track being shared from one peer to another, without a container or even a mediastream associated with the tracks. which codecs can be within those tracks is not mandated by the webrtc specification. however, rfc 7742 specifies that all web...
...the opus codec as well as g.711's pcma and pcmu formats. these two rfcs also lay out options that must be supported for each codec, as well as specific user comfort features such as echo cancelation. this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for webrtc. while compression is always a necessity when dealing with media on the web, it's of additional importance when videoconferencing in order to ensure that the participants are able to communicate without lag or interruptions. of secondary importance is the need to keep the video and audio synchronized, so that the movements and any ancillary information (such as slides or a projection) are presented at the same time as the audio that corresponds. general codec...
...er than that, since that's essentially the lower bound of what webrtc generally is expected to handle. sdp supports a codec-independent way to specify preferred video resolutions (rfc 6236. this is done by sending an a=imageattr sdp attribute to indicate the maximum resolution that is acceptable. the sender is not required to support this mechanism, however, so you have to be prepared to receive media at a different resolution than you requested. beyond this simple maximum resolution request, specific codecs may offer further ways to ask for specific media configurations. supported video codecs webrtc establishes a baseline set of codecs which all compliant browsers are required to support. some browsers may choose to allow other codecs as well. below are the video codecs which are required...
...And 8 more matches

MediaDevices - Web APIs
the mediadevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing. in essence, it lets you obtain access to any hardware source of media data. properties inherits properties from its parent interface, eventtarget. events devicechange fired when a media input or output device is attached to or removed from the user's computer. also available via the ondevicechange property. methods inherits methods from its parent interface, eventtarget. enumeratedevices() obtains an array of information about the media input and output devices available on the system. ...
...change fired when a media input or output device is attached to or removed from the user's computer. also available via the ondevicechange property. methods inherits methods from its parent interface, eventtarget. enumeratedevices() obtains an array of information about the media input and output devices available on the system. getsupportedconstraints() returns an object conforming to mediatracksupportedconstraints indicating which constrainable properties are supported on the mediastreamtrack interface. see capabilities and constraints in media capture and streams api (media stream) to learn more about constraints and how to use them. ...
...mation about the media input and output devices available on the system. getsupportedconstraints() returns an object conforming to mediatracksupportedconstraints indicating which constrainable properties are supported on the mediastreamtrack interface. see capabilities and constraints in media capture and streams api (media stream) to learn more about constraints and how to use them. getdisplaymedia() prompts the user to select a display or portion of a display (such as a window) to capture as a mediastream for sharing or recording purposes. returns a promise that resolves to a mediastream. ...
...And 7 more matches

MediaSource.readyState - Web APIs
the readystate read-only property of the mediasource interface returns an enum representing the state of the current mediasource. the three possible values are: closed: the source is not currently attached to a media element. open: the source is attached to a media element and ready to receive sourcebuffer objects. ended: the source is attached to a media element but the stream has been ended via a call to mediasource.endofstream(). syntax var myreadystate = mediasource.readystate; value a domstring. ...
...ady to receive sourcebuffer objects. ended: the source is attached to a media element but the stream has been ended via a call to mediasource.endofstream(). syntax var myreadystate = mediasource.readystate; value a domstring. ...
...r objects. ended: the source is attached to a media element but the stream has been ended via a call to mediasource.endofstream(). syntax var myreadystate = mediasource.readystate; value a domstring. ...
...And 7 more matches

MediaStreamAudioSourceNode() - Web APIs
the web audio api's mediastreamaudiosourcenode() constructor creates and returns a new mediastreamaudiosourcenode object which uses the first audio track of a given mediastream as its source. note: another way to create a mediastreamaudiosourcenode is to call theaudiocontext.createmediastreamsource() method, specifying the stream from which you want to obtain audio. syntax audiosourcenode = new mediastreamaudiosourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with. options a mediastreamaudiosourceoptions object defining the properties you want the mediastreamaudiosourcenode to have: mediastream a required property which specifies the mediastream from which to obtain audio for the node. retu...
...ourcenode(context, options); parameters context an audiocontext representing the audio context you want the node to be associated with. options a mediastreamaudiosourceoptions object defining the properties you want the mediastreamaudiosourcenode to have: mediastream a required property which specifies the mediastream from which to obtain audio for the node. return value a new mediastreamaudiosourcenode object representing the audio node whose media is obtained from the specified source stream. exceptions invalidstateerror the specified mediastream doesn't have any audio tracks. examples this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from its mediastream. // define variables var audioctx = new (w...
...media is obtained from the specified source stream. exceptions invalidstateerror the specified mediastream doesn't have any audio tracks. examples this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from its mediastream. ...
...And 7 more matches

Media - Progressive web apps (PWAs)
this is the 14th and last section of part i of the css getting started tutorial. many pages in this tutorial focused on the css properties and values, as well as how you use these to specify the way that content displays. information: media the purpose of css is to specify how content is presented to the user. this presentation can take more than one form. for example, you are probably reading this on a device with a display. but you might also want to project it to a big screen for a large audience, or you might want to print it. ...
...ll as how you use these to specify the way that content displays. information: media the purpose of css is to specify how content is presented to the user. this presentation can take more than one form. for example, you are probably reading this on a device with a display. but you might also want to project it to a big screen for a large audience, or you might want to print it. these different media have different characteristics. css has the capacity to present content according to the media type. to specify rules that are specific to a type of media, use @media followed by the media type, followed by curly braces that enclose the rules. example a document on a website has a navigation area that contains the primary site menu. in the markup language, the navigation area's parent elemen...
...document on a website has a navigation area that contains the primary site menu. in the markup language, the navigation area's parent element has the id nav-area. (in html5, this can be marked up with the <nav> element instead of <div> with an id attribute.) when printing the document, the navigation area has no purpose. ...
...And 7 more matches

MediaElementAudioSourceNode - Web APIs
the mediaelementaudiosourcenode interface represents an audio source consisting of an html5 <audio> or <video> element. it is an audionode that acts as an audio source. a mediaelementsourcenode has no inputs and exactly one output, and is created using the audiocontext.createmediaelementsource() method. the amount of channels in the output equals the number of channels of the audio referenced by the htmlmediaelement used in the creation of the node, or is 1 if the htmlmediaelement has no audio. number of inputs 0 number of outputs 1 channel count defined by the media in the htmlmediaelement passed to the audiocontext.createmediaelementsource method that created it. ...
...e output equals the number of channels of the audio referenced by the htmlmediaelement used in the creation of the node, or is 1 if the htmlmediaelement has no audio. number of inputs 0 number of outputs 1 channel count defined by the media in the htmlmediaelement passed to the audiocontext.createmediaelementsource method that created it. constructor mediaelementaudiosourcenode() creates a new mediaelementaudiosourcenode object instance. properties inherits properties from its parent, audionode. mediaelement read only the htmlmediaelement used when constructing this mediastreamaudiosourcenode. methods inherits methods from its parent, audionode. ...
...when the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall window height. ...
...And 6 more matches

MediaQueryList - Web APIs
a mediaquerylist object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document. you can create a mediaquerylist by calling matchmedia() on the window object. the resulting object handles sending notifications to listeners when the media query state changes (i.e. when the media query test starts or stops evaluating to true). this is very useful for adaptive design, since this makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status. properties the mediaquerylist interface inherits properties from its parent interface, eventtarget. matchesr...
...it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status. properties the mediaquerylist interface inherits properties from its parent interface, eventtarget. matchesread only a boolean that returns true if the document currently matches the media query list, or false if not. mediaread only a domstring representing a serialized media query. methods the mediaquerylist interface inherits methods from its parent interface, eventtarget. addlistener() adds to the mediaquerylist a callback which is invoked whenever the media query status—whether or not the document matches the media queries in the list—changes. this method exists p...
...this method has been kept for backward compatibility; if possible, you should generally use removeeventlistener() to remove change notification callbacks (which should have previously been added using addeventlistener()). ...
...And 6 more matches

MediaRecorder.onerror - Web APIs
the mediarecorder interface's onerror event handler is called by the mediastream recording api when an error occurs. you can provide an event handler to deal with errors that occur while creating or using a media recorder. the error object is of type mediarecordererrorevent, and its error property contains a domexception object that describes the error that occurred. syntax mediarecorder.onerror = errorhandlerfunction; value a function to be called whenever an error occurs during the recorder's lifetime. in addition to other general errors that might occur, the following errors are specifically possible when using the mediastream recording api; to determine which occurred, check the value of mediarecordererrorevent.error.name. invalidstateerror an attempt was made to stop or pause or ...
...the recorder's lifetime. in addition to other general errors that might occur, the following errors are specifically possible when using the mediastream recording api; to determine which occurred, check the value of mediarecordererrorevent.error.name. invalidstateerror an attempt was made to stop or pause or an inactive recorder, start or resume an active recorder, or otherwise manipulate the mediarecorder while in the wrong state. this exception can also occur when a request is made on a source that has been deleted or removed. securityerror the mediastream is configured to disallow recording. ...
...ttempt was made to stop or pause or an inactive recorder, start or resume an active recorder, or otherwise manipulate the mediarecorder while in the wrong state. this exception can also occur when a request is made on a source that has been deleted or removed. securityerror the mediastream is configured to disallow recording. this may be the case, for example, with sources obtained using getusermedia() when the user denies permission to use an input device. this also happens when a mediastreamtrack within the stream is marked as isolated due to the peeridentity constraint on the source stream. ...
...And 6 more matches

MediaRecorder.start() - Web APIs
the mediarecorder method start(), which is part of the mediastream recording api, begins recording media into one or more blob objects. you can record the entire duration of the media into a single blob (or until you call requestdata()), or you can specify the number of milliseconds to record at a time. then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice d...
..., while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the mediarecorder with the recorded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to inactive and data gathering stops. a final dataavailable event is sent to the mediarecorder, followed by a stop event. note: if the brow...
...rded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to inactive and data gathering stops. a final dataavailable event is sent to the mediarecorder, followed by a stop event. note: if the browser is unable to start recording or continue recording, it will raise a domerror event, followed by a mediarecorder.dataavailable event containing the blob it has gathered, followed by the mediarecorder.stop event. ...
...And 6 more matches

MediaRecorder.stop() - Web APIs
example ... ...
... example ... ...
... example ... ...
...And 6 more matches

MediaSession - Web APIs
the mediasession interface of the media session api allows a web page to provide custom behaviors for standard media playback interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements. for example, a smartphone might have a standard panel in its lock screen that provides controls for media. a browser on that device might deliver the metadata provided by calling mediasession to the device in order to be controllable using the global user interface. properties metadata returns an instance of mediametadata which contains rich media metadata, for display in a platform ui. playbackstate indicates whether the current media session is playing. valid values are none, paused, or playing. ...
...calling mediasession to the device in order to be controllable using the global user interface. properties metadata returns an instance of mediametadata which contains rich media metadata, for display in a platform ui. playbackstate indicates whether the current media session is playing. valid values are none, paused, or playing. methods setactionhandler() sets an event handler for a media session action, such as play or pause. see the method page for a full list. setpositionstate() sets the current playback position and speed of the media currently being presented. ...
...te indicates whether the current media session is playing. valid values are none, paused, or playing. methods setactionhandler() sets an event handler for a media session action, such as play or pause. see the method page for a full list. setpositionstate() sets the current playback position and speed of the media currently being presented. ...
...And 6 more matches

MediaSource.isTypeSupported() - Web APIs
the mediasource.istypesupported() static method returns a boolean value which is true if the given mime type is likely to be supported by the current user agent. that is, if it can successfully create sourcebuffer objects for that mime type. if the returned value is false, then the user agent is certain that it cannot access media of the specified format. syntax var isitsupported = mediasource.istypesupported(mimetype); parameters mimetype the mime media type that you want to test support for in the current browser. this may include the codecs parameter to provide added details about the codecs used within the file. return value a boolean which is true if the browser feels that it can probably play media of the specified type. this is not a guarantee, however, and your code must be p...
...mimetype the mime media type that you want to test support for in the current browser. this may include the codecs parameter to provide added details about the codecs used within the file. return value a boolean which is true if the browser feels that it can probably play media of the specified type. this is not a guarantee, however, and your code must be prepared for the possibility that the media will not play correctly if at all. a value of false is a guarantee that media of the given type will not play, however. all web apis that work with media files use a "no/maybe/probably" approach (or, in this case, "no or probably") when determining if a media type can be used. ...
...ype. this is not a guarantee, however, and your code must be prepared for the possibility that the media will not play correctly if at all. a value of false is a guarantee that media of the given type will not play, however. all web apis that work with media files use a "no/maybe/probably" approach (or, in this case, "no or probably") when determining if a media type can be used. this is because media files are complex, intricate constructs with far too many subtle variations to be absolutely certain of anything until you actually use the contents of the media. example the following snippet is from an example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding cod...
...And 6 more matches

MediaTrackConstraints.cursor - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...r property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the cursor constrainable property, which is used to specify whether or not the cursor should be included in the captured video. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.cursor as returned by a call to mediadevices.getsupportedconstraints(). ...
...And 6 more matches

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content none, it is an empty element. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content none, it is an empty element. ...
...is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories none. permitted content none, it is an empty element. tag omission it must have a start tag, but must not have an end tag. ...
...And 6 more matches

AudioContext.createMediaElementSource() - Web APIs
the createmediaelementsource() method of the audiocontext interface is used to create a new mediaelementaudiosourcenode object, given an existing html <audio> or <video> element, the audio from which can then be played and manipulated. for more details about media element audio source nodes, check out the mediaelementaudiosourcenode reference page. syntax var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); parameters mymediaelement an htmlmediaelement object that you want to feed into an audio processing graph to manipulate. returns a mediaelementaudiosourcenode. ...
...iaelementaudiosourcenode reference page. syntax var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); parameters mymediaelement an htmlmediaelement object that you want to feed into an audio processing graph to manipulate. returns a mediaelementaudiosourcenode. example this simple example creates a source from an <audio> element using createmediaelementsource(), then passes the audio through a gainnode before feeding it into the audiodestinationnode for playback. when the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position divided by overall window height. you can therefore increase and decrease the volume of the playing music by moving the mouse pointer up and dow...
...me of the playing music by moving the mouse pointer up and down. note: you can also view this example running live, or view the source. ...
...And 5 more matches

AudioContext.createMediaStreamDestination() - Web APIs
the createmediastreamdestination() method of the audiocontext interface is used to create a new mediastreamaudiodestinationnode object associated with a webrtc mediastream representing an audio stream, which may be stored in a local file or sent to another computer. the mediastream is created when the node is created and is accessible via the mediastreamaudiodestinationnode's stream attribute. this stream can be used in a similar way as a mediastream obtained via navigator.getusermedia — it can, for example, be sent to a remote peer using the rtcpeerconnection addstream() method. for more details about media stream destination nodes, check out the mediastreamaudiodestinationnode reference page. ...
...m attribute. this stream can be used in a similar way as a mediastream obtained via navigator.getusermedia — it can, for example, be sent to a remote peer using the rtcpeerconnection addstream() method. for more details about media stream destination nodes, check out the mediastreamaudiodestinationnode reference page. syntax var audioctx = new audiocontext(); var destination = audioctx.createmediastreamdestination(); returns a mediastreamaudiodestinationnode. examples in the following simple example, we create a mediastreamaudiodestinationnode, an oscillatornode and a mediarecorder (the example will therefore only work in firefox and chrome at this time.) the mediarecorder is set up to record information from the mediastreamdestinationnode. when the button is clicked, the oscillator s...
...on(); returns a mediastreamaudiodestinationnode. examples in the following simple example, we create a mediastreamaudiodestinationnode, an oscillatornode and a mediarecorder (the example will therefore only work in firefox and chrome at this time.) the mediarecorder is set up to record information from the mediastreamdestinationnode. when the button is clicked, the oscillator starts, and the mediarecorder is started. when the button is stopped, the oscillator and mediarecorder both stop. stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array. after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from t...
...And 5 more matches

DisplayMediaStreamConstraints.audio - Web APIs
note: the specification for the screen capture api does not define what the contents of the audio track should be. this is left up to the user agent to decide. ...
... note: the specification for the screen capture api does not define what the contents of the audio track should be. this is left up to the user agent to decide. ...
...onstraints object, which is used to process the audio prior to adding it to the stream. note: the specification for the screen capture api does not define what the contents of the audio track should be. this is left up to the user agent to decide. likely sources are the computer's system audio output and the user's microphone, but there is no way to specify which source to use. ...
...And 5 more matches

HTMLMediaElement.srcObject - Web APIs
the srcobject property of the 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, a mediasource, a blob, or a file (which inherits from blob). note: 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. syntax var sourceobject = htmlmediaelement.srcobject; htmlmediaelement.srcobject = sourceobject; value a mediastream, mediasource, blob, or file object (though see the compatibility table for what is actually supported). usage notes older versions of the me...
...urceobject = htmlmediaelement.srcobject; htmlmediaelement.srcobject = sourceobject; value a mediastream, mediasource, blob, or file object (though see the compatibility table for what is actually supported). usage notes 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 to the mediastream directly. examples basic example in this example, a mediastream from a camera is assigned to a newly-created <video> element. 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> element. ...
...ect to the mediastream directly. examples basic example in this example, a mediastream from a camera is assigned to a newly-created <video> element. 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> element. 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. ...
...And 5 more matches

MediaCapabilities.encodingInfo() - Web APIs
the mediacapabilities.encodinginfo() method, part of the mediacapabilities interface of the media capabilities api, returns a promise with the tested media configuration's mediacapabilitiesinfo; this contains the three boolean properties supported, smooth, and powerefficient, which describe how compatible the device is with the type of media. syntax mediacapabilities.encodinginfo(mediaencodingconfiguration) parameters mediaencodingconfiguration a valid mediaencodingconfiguration dictionary containing a valid media encoding type of record or transmission and a valid media configuration: either an audioconfiguration or videoconfiguration dictionary. ...
...the device is with the type of media. syntax mediacapabilities.encodinginfo(mediaencodingconfiguration) parameters mediaencodingconfiguration a valid mediaencodingconfiguration dictionary containing a valid media encoding type of record or transmission and a valid media configuration: either an audioconfiguration or videoconfiguration dictionary. ...
...a valid mediaencodingconfiguration dictionary containing a valid media encoding type of record or transmission and a valid media configuration: either an audioconfiguration or videoconfiguration dictionary. return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth powerefficient exceptions a typeerror is raised if the mediaconfiguration passed to the encodinginfo() method is invalid, either because the type is not video or audio, the contenttype is not a valid codec mime type, or any other error in the media configuration passed to the method, including omitting any of the media encoding configuration elements. ...
...And 5 more matches

MediaDeviceInfo - Web APIs
...
... calling application. it is reset when the user clears cookies (for private browsing, a different identifier is used that is not persisted across sessions). mediadeviceinfo.groupidread only returns a domstring that is a group identifier. two devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone. mediadeviceinfo.kindread only returns an enumerated value that is either "videoinput", "audioinput" or "audiooutput". ...
... is not persisted across sessions). mediadeviceinfo.groupidread only returns a domstring that is a group identifier. two devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone. mediadeviceinfo.kindread only returns an enumerated value that is either "videoinput", "audioinput" or "audiooutput". mediadeviceinfo.labelread only returns a domstring that is a label describing this device (for example "external usb webcam"). for security reasons, the label field is always blank unless an active media stream exists or the user has granted persistent permission for media device access. the set of device labels could otherwise be used as part of a fingerprinting mechanism to identify a user. me...
...And 5 more matches

MediaRecorder.mimeType - Web APIs
the mimetype read-only property returns the mime media type that was specified when creating the mediarecorder object, or, if none was specified, which was chosen by the browser. this is the file format of the file that would result from writing all of the recorded data to disk. keep in mind that not all codecs are supported by a given container; if you write media using a codec that is not supported by a given media container, the resulting file may not work reliably if at all when you try to play it back. see our media type and format guide for information about container and codec support across browsers. note: the term "mime type" is officially considered to be historical; these strings are now officially known as media types. mdn web docs content uses the terms interchangeably. synta...
...container, the resulting file may not work reliably if at all when you try to play it back. see our media type and format guide for information about container and codec support across browsers. note: the term "mime type" is officially considered to be historical; these strings are now officially known as media types. mdn web docs content uses the terms interchangeably. syntax var mimetype = mediarecorder.mimetype value the mime media type which describes the format of the recorded media, as a domstring. this string may include the codecs parameter, giving details about the codecs and the codec configurations used by the media recorder. ...
...storical; these strings are now officially known as media types. mdn web docs content uses the terms interchangeably. syntax var mimetype = mediarecorder.mimetype value the mime media type which describes the format of the recorded media, as a domstring. this string may include the codecs parameter, giving details about the codecs and the codec configurations used by the media recorder. the media type strings are standardized by the internet assigned numbers authority (iana). for their official list of defined media type strings, see the article media types on the iana site. see also media types to learn more about media types and how they're used in web content and by web browers. example ... ...
...And 5 more matches

MediaRecorder.ondataavailable - Web APIs
the mediarecorder.ondataavailable event handler (part of the mediastream recording api) handles the dataavailable event, letting you run code in response to blob data being made available for use. the dataavailable event is fired when the mediarecorder delivers media data to your application for its use. the data is provided in a blob object that contains the data. this occurs in four situations: when the media stream ends, any media data not already delivered to your ondataavailable handler is passed in a single blob. when mediarecorder.stop() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered in a blob; after this, capturing ends. ...
...lob object that contains the data. this occurs in four situations: when the media stream ends, any media data not already delivered to your ondataavailable handler is passed in a single blob. when mediarecorder.stop() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered in a blob; after this, capturing ends. when mediarecorder.requestdata() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new blob is created and media capture continues into that blob. if a timeslice property was passed into the mediarecorder.start() method that started media capture, a dataavailable event is fired every timeslice milliseconds. that mean...
...start() method that started media capture, a dataavailable event is fired every timeslice milliseconds. that means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). so if the method call looked like this — recorder.start(1000); — the dataavailable event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. you can use timeslice alongside mediarecorder.stop() and mediarecorder.requestdata() to produce multiple same-length blobs plus other shorter blobs as well. the blob containing the media data is available in the dataavailable event's data property. ...
...And 5 more matches

MediaSession.metadata - Web APIs
the metadata property of the mediasession interface contains a mediametadata object providing descriptive information about the currently playing media, or null if the metadata has not been set. this metadata is provided by the browser to the device for presentation in any standard media control user interface the device might offer. syntax var mediametadata = navigator.mediasession.metadata; navigator.mediasession.metadata = mediametadata; value an instance of mediametadata containing information about the media currently being played. ...
.... this metadata is provided by the browser to the device for presentation in any standard media control user interface the device might offer. syntax var mediametadata = navigator.mediasession.metadata; navigator.mediasession.metadata = mediametadata; value an instance of mediametadata containing information about the media currently being played. ...
...e for presentation in any standard media control user interface the device might offer. syntax var mediametadata = navigator.mediasession.metadata; navigator.mediasession.metadata = mediametadata; value an instance of mediametadata containing information about the media currently being played. ...
...And 5 more matches

MediaSource.addSourceBuffer() - Web APIs
the addsourcebuffer() method of the mediasource interface creates a new sourcebuffer of the given mime type and adds it to the mediasource's sourcebuffers list. the new sourcebuffer is also returned. syntax var sourcebuffer = mediasource.addsourcebuffer(mimetype); parameters mimetype a domstring specifying the mime type of the sourcebuffer to create and add to the mediasource. return value a sourcebuffer object representing the new source buffer that has been created and added to the media source. exceptions invalidaccesserror the value specified for mimetype is an empty string rather than a valid mime type. invalidstateerror the mediasource is not in the "open" readystate. notsupportederror the specified mimetype isn't supported by the user agent, or is not compatible with ...
... quotaexceedederror the user agent can't handle any more sourcebuffer objects, or creating a new sourcebuffer using the given mimetype would result in an unsupported configuration of sourcebuffers. ...
...unsupported configuration of sourcebuffers. ...
...And 5 more matches

MediaStreamConstraints.audio - Web APIs
the mediastreamconstraints dictionary's audio property is used to indicate what kind of audio track, if any, should be included in the mediastream returned by a call to getusermedia(). to learn more about how constraints work, see capabilities, constraints, and settings. syntax var audioconstraints = true | false | mediatrackconstraints; value the value of the audio property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not an audio track should be included in the returned stream; if it's true, an audio track is included; if no audio source is available or if permission is not given to use the audio source, the call to getusermedia() will fail. if false, no audio track is included. ...
...audio property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not an audio track should be included in the returned stream; if it's true, an audio track is included; if no audio source is available or if permission is not given to use the audio source, the call to getusermedia() will fail. if false, no audio track is included. ...
... false, no audio track is included. mediatrackconstraints a constraints dictionary detailing the preferable and/or required values or ranges of values for the track's constrainable properties. if you specify constraints, an audio track meeting the constraints is required. examples for browsers with feature policy enabled, the samples below need the microphone feature enabled. see security in mediadevices.getusermedia() for details and examples on how to configure this. using a boolean value in this example, we provide a simple value of true for the audio property. this tells getusermedia() that we require an audio track, but we don't care about any specifics beyond that. html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> ...
...And 5 more matches

MediaStreamConstraints.video - Web APIs
the mediastreamconstraints dictionary's video property is used to indicate what kind of video track, if any, should be included in the mediastream returned by a call to getusermedia(). to learn more about how constraints work, see capabilities, constraints, and settings. syntax var videoconstraints = true | false | mediatrackconstraints; value the value of the video property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not a video track should be included in the returned stream; if it's true, a video track is included; if no video source is available or if permission is not given to use the video source, the call to getusermedia() will fail. if false, no video track is included. ...
...e video property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not a video track should be included in the returned stream; if it's true, a video track is included; if no video source is available or if permission is not given to use the video source, the call to getusermedia() will fail. if false, no video track is included. ...
...se, no video track is included. mediatrackconstraints a constraints dictionary detailing the preferable and/or required values or ranges of values for the track's constrainable properties. if you specify constraints, a video track meeting these constraints is required. examples using a boolean value in this example, we provide a simple value of true for the video property. this tells getusermedia() that we require a video track, but we don't care about any specifics beyond that. html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20p...
...And 5 more matches

MediaTrackSettings.echoCancellation - Web APIs
echo cancellation is a feature which attempts to prevent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's output device and their input device. ...
... echo cancellation is a feature which attempts to prevent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's output device and their input device. ...
... echo cancellation is a feature which attempts to prevent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's output device and their input device. ...
...And 5 more matches

MediaTrackSettings.groupId - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...And 5 more matches

Media queries - CSS: Cascading Style Sheets
media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters. they are a key component of responsive design. for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens. in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied. ...
...e the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. media queries in html in html, media queries can be applied to various elements: in the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied. in the <source> element's media attribute, they define the media to which that source should be applied. (this is only valid inside <picture> elements.) in the <style> element's media attribute, they define the media to which the style should be applied. media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query. ...
...he <source> element's media attribute, they define the media to which that source should be applied. (this is only valid inside <picture> elements.) in the <style> element's media attribute, they define the media to which the style should be applied. media queries in javascript in javascript, you can use the window.matchmedia() method to test the window against a media query. you can also use mediaquerylist.addlistener() to be notified whenever the state of a query changes. with this functionality, your site or app can respond to changes in the device configuration, orientation, or state. you can learn more about programmatically using media queries in testing media queries. ...
...And 5 more matches

Media events - Developer guides
various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them. event name description abort sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent. canplay sent when enough data is available that the media can be played, at least for a couple of frames. this corresponds to the have_future_data readystate. canplaythrough sent when the readystate changes to have_enough_data, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. it will also be fired when pla...
...thout interruption, assuming the download rate remains at least at the current level. it will also be fired when playback is toggled between paused and playing. note: manually setting the currenttime will eventually fire a canplaythrough event in firefox. other browsers might not fire this event. durationchange the metadata has loaded or changed, indicating a change in duration of the media. this is sent, for example, when the media has loaded enough that the duration is known. emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. encrypted the user agent has encountered initialization data in the media data. ended sent when p...
...e empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. encrypted the user agent has encountered initialization data in the media data. ended sent when playback completes. error sent when an error occurs. the element's error attribute contains more information. see htmlmediaelement.error for details. loadeddata the first frame of the media has finished loading. loadedmetadata the media's metadata has finished loading; all attributes now contain as much useful information as they're going to. loadstart sent when loading of the media begins. mozaudioavailable sent when an audio buffer is provided to the audio layer for pr...
...And 5 more matches

AudioContext.createMediaStreamTrackSource() - Web APIs
the createmediastreamtracksource() method of the audiocontext interface creates and returns a mediastreamtrackaudiosourcenode which represents an audio source whose data comes from the specified mediastreamtrack. this differs from createmediastreamsource(), which creates a mediastreamaudiosourcenode whose audio comes from the audio track in a specified mediastream whose id is first, lexicographically (alphabetically). syntax var audioctx = new audiocontext(); var track = audioctx.createmediastreamtracksource(track); parameters track the mediastreamtrack to use as the source of all audio data for the new node. return value a mediastreamtrackaudiosourcenode object which acts as a source for audio data found in the specified audio track. ...
...cographically (alphabetically). syntax var audioctx = new audiocontext(); var track = audioctx.createmediastreamtracksource(track); parameters track the mediastreamtrack to use as the source of all audio data for the new node. return value a mediastreamtrackaudiosourcenode object which acts as a source for audio data found in the specified audio track. example in this example, getusermedia() is used to request access to the user's microphone. once that access is attained, an audio context is established and a mediastreamtrackaudiosourcenode is created using createmediastreamtracksource(), taking its audio from the first audio track in the stream returned by getusermedia(). then a biquadfilternode is created using createbiquadfilter(), and it's configured as desired to perform a lo...
... audio from the first audio track in the stream returned by getusermedia(). then a biquadfilternode is created using createbiquadfilter(), and it's configured as desired to perform a lowshelf filter on the audio coming from the source. the output from the microphone is then routed into the new biquad filter, and the filter's output is in turn routed to the audio context's destination. ...
...And 4 more matches

MediaCapabilities.decodingInfo() - Web APIs
the mediacapabilities.decodinginfo() method, part of the media capabilities api, returns a promise with the tested media configuration's mediacapabilitiesinfo; this contains the three boolean properties supported, smooth, and powerefficient, which describe whether decoding the media described would be supported, smooth, and powerefficient. syntax mediacapabilities.decodinginfo(mediadecodingconfiguration) parameters mediadecodingconfiguration a valid mediadecodingconfiguration dictionary containing a valid media decoding type of file or media-source and a valid media configuration: either an audioconfiguration or a videoconfiguration. ...
... would be supported, smooth, and powerefficient. syntax mediacapabilities.decodinginfo(mediadecodingconfiguration) parameters mediadecodingconfiguration a valid mediadecodingconfiguration dictionary containing a valid media decoding type of file or media-source and a valid media configuration: either an audioconfiguration or a videoconfiguration. ...
...iguration a valid mediadecodingconfiguration dictionary containing a valid media decoding type of file or media-source and a valid media configuration: either an audioconfiguration or a videoconfiguration. return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth powerefficient exceptions a typeerror is raised if the mediaconfiguration passed to the decodinginfo() method is invalid, either because the type is not video or audio, the contenttype is not a valid codec mime type, the media decoding configuration is not a valid value for the media decoding type, or any other error in the media configuration passed to the method, including omitting values required in the media decoding configuration. example ...
...And 4 more matches

MediaPositionState - Web APIs
thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. ...
...thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. ...
...thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. ...
...And 4 more matches

MediaRecorder() - Web APIs
the mediarecorder() constructor creates a new mediarecorder object that will record a specified mediastream. the object can optionally be configured to record using a specific media container (file type), and, further, can specify the exact codec and codec configuration(s) to use by specifying the codecs parameter. syntax var mediarecorder = new mediarecorder(stream[, options]); parameters stream the mediastream that will be recorded. this source media can come from a stream created using navigator.mediadevices.getusermedia() or from an <audio>, <video> or <canvas> element. ...
... = new mediarecorder(stream[, options]); parameters stream the mediastream that will be recorded. this source media can come from a stream created using navigator.mediadevices.getusermedia() or from an <audio>, <video> or <canvas> element. options optional a dictionary object that can contain the following properties: mimetype: a mime type specifying the format for the resulting media; you may simply specify the container format (the browser will select its preferred codecs for audio and/or video), or you may use the codecs parameter and/or the profiles parameter to provide detailed information about which codecs to use and how to configure them. applications can check in advance if a mimetype is supported by the user agent by calling mediarecorder.istypesupported(). audiobi...
... select its preferred codecs for audio and/or video), or you may use the codecs parameter and/or the profiles parameter to provide detailed information about which codecs to use and how to configure them. applications can check in advance if a mimetype is supported by the user agent by calling mediarecorder.istypesupported(). audiobitspersecond: the chosen bitrate for the audio component of the media. videobitspersecond: the chosen bitrate for the video component of the media. bitspersecond: the chosen bitrate for the audio and video components of the media. this can be specified instead of the above two properties. if this is specified along with one or the other of the above properties, this will be used for the one that isn't specified. if bits per second values are not specified...
...And 4 more matches

MediaRecorder.pause() - Web APIs
if you call pause() while already paused, it silently does nothing. example ... ...
...if you call pause() while already paused, it silently does nothing. example ... ...
...if you call pause() while already paused, it silently does nothing. example ... ...
...And 4 more matches

MediaRecorderErrorEvent.error - Web APIs
the read-only error property in the mediarecordererrorevent interface is a domexception object providing details about the exception that was thrown by a mediarecorder instance. when a media​recorder​error​event occurs, you can determine to some extent what went wrong by examining the error property within the media​recorder​error​event received by the mediarecorder's error event handler, onerror. syntax error = mediarecordererrorevent.error; value a domexception describing the error represented by the event. the error's name property's value may be any exception that makes sense during the handling of media recording, including these specifically identified by the specification. the descriptions here are generic ones; you'll find more specific ones to various scenarios in wh...
...ng, including these specifically identified by the specification. the descriptions here are generic ones; you'll find more specific ones to various scenarios in which they may occur in the corresponding method references. invalidstateerror an operation was attempted in a context in which it isn't allowed, or a request has been made on an object that's deleted or removed. ...
... occur in the corresponding method references. invalidstateerror an operation was attempted in a context in which it isn't allowed, or a request has been made on an object that's deleted or removed. notsupportederror a mediarecorder couldn't be created because the specified options weren't valid. the message atttribute should provide additional information, if it exists. securityerror the mediastream is configured to disallow recording. ...
...And 4 more matches

MediaStream.getAudioTracks() - Web APIs
audio tracks are those tracks whose kind property is audio. the array is empty if the stream contains no audio tracks. note: the order of the returned tracks is not defined by the specification and may, in fact, change from one call to getaudiotracks() to the next. ...
...audio tracks are those tracks whose kind property is audio. the array is empty if the stream contains no audio tracks. note: the order of the returned tracks is not defined by the specification and may, in fact, change from one call to getaudiotracks() to the next. ...
...rray is empty if the stream contains no audio tracks. note: the order of the returned tracks is not defined by the specification and may, in fact, change from one call to getaudiotracks() to the next. ...
...And 4 more matches

MediaStreamTrack.applyConstraints() - Web APIs
for example, you may prefer high-density video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable sizes or ranges of sizes. ...
...for example, you may prefer high-density video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable sizes or ranges of sizes. ...
...be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable sizes or ranges of sizes. see applying constraints in capabilities, constraints, and settings for more information on how to apply your preferred constraints. syntax const appliedpromise = track.applyconstraints([constraints]) parameters constraints optional a mediatrackconstraints object listing the constraints to apply to the track's constrainable properties; any existing constraints are replaced with the new values specified, and any constrainable properties not included are restored to their default constraints. if this parameter is omitted, all currently set custom constraints are cleared. this object represents the basic set of constraints that must ap...
...And 4 more matches

MediaTrackSettings.autoGainControl - Web APIs
this feature is typically used on microphones, although it can be provided by other input sources as well. ...
...this feature is typically used on microphones, although it can be provided by other input sources as well. ...
...this feature is typically used on microphones, although it can be provided by other input sources as well. ...
...And 4 more matches

MediaTrackSettings.deviceId - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...And 4 more matches

MediaTrackSettings.noiseSuppression - Web APIs
noise suppression automatically filters the audio to remove background noise, hum caused by equipment, and the like from the sound before delivering it to your code. this feature is typically used on microphones, although it is technically possible it could be provided by other input sources as well. ...
... noise suppression automatically filters the audio to remove background noise, hum caused by equipment, and the like from the sound before delivering it to your code. this feature is typically used on microphones, although it is technically possible it could be provided by other input sources as well. ...
... noise suppression automatically filters the audio to remove background noise, hum caused by equipment, and the like from the sound before delivering it to your code. this feature is typically used on microphones, although it is technically possible it could be provided by other input sources as well. ...
...And 4 more matches

Media Source API - Web APIs
the media source api, formally known as media source extensions (mse), provides functionality enabling plugin-free web-based streaming media. using mse, media streams can be created via javascript, and played using <audio> and <video> elements. media source extensions concepts and usage playing video and audio has been available in web applications without plugins for a few years now, but the basic features offered have really only been useful for playing single whole tracks. we can't, for example, combine/split arraybuffers. streaming media has up until recently been the domain of flash, with technologies like flash media server serving video streams using the rtmp protocol. the mse standard with media source extensions (mse), this is changing. mse allows us to replace the usual single ...
... really only been useful for playing single whole tracks. we can't, for example, combine/split arraybuffers. streaming media has up until recently been the domain of flash, with technologies like flash media server serving video streams using the rtmp protocol. the mse standard with media source extensions (mse), this is changing. mse allows us to replace the usual single track src value fed to media elements with a reference to a mediasource object, which is a container for information like the ready state of the media for being played, and references to multiple sourcebuffer objects that represent the different chunks of media that make up the entire stream. mse gives us finer grained control over how much and how often content is fetched, and some control over memory usage details, such as...
...icted. it lays the groundwork for adaptive bitrate streaming clients (such as those using dash or hls) to be built on its extensible api. creating assets that work with mse in modern browsers is a laborious process, taking significant time, computing power, and energy. the usage of external utilities to massage the content into a suitable format is required. while browser support for the various media containers with mse is spotty, usage of the h.264 video codec, aac audio codec, and mp4 container format is a common baseline. mse also provides an api for runtime detection of container and codec support. if you do not require explicit control of video quality over time, the rate at which content is fetched, or the rate at which memory is evicted, then the <video> and <source> tags may well be ...
...And 4 more matches

MIME types (IANA media types) - HTTP
important: browsers use the mime type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime type in the response's content-type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. ...
... important: browsers use the mime type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime type in the response's content-type header. if this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled. ...
...ections, or elements that aren't from html/svg/mathml namespaces. text/javascript per the html specification, javascript files should always be served using the mime type text/javascript. no other values are considered valid, and using any of those may result in scripts that do not load or run. ...
...And 4 more matches

Web audio codec guide - Web media technologies
f audio data to encode and decode it is handled by an audio codec (coder/decoder). in this article, we look at audio codecs used on the web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when choosing audio codecs to use for your content. additionally, webrtc implementations generally use a subset of these codecs for their encoding and decoding of media, and may support additional codecs as well, for optimal cross-platform support of video and audio conferencing, and to integrate better with legacy telecommunication solutions. see codecs used by webrtc for details. for information about the fundamental concepts behind how digital audio works, see the article digital audio concepts. common codecs the list below denotes the codecs most commonly...
...r hand, take advantage of the fact that the human ear is not a perfect interpreter of audio, and of the fact that the human brain can pluck the important information out of imperfect or noisy audio. they strip away audio frequencies that aren't used much, tolerate loss of precision in the decoded output, and use other methods to lose audio content, quality, and fidelity to produce smaller encoded media. upon decoding, the output is, to varying degrees, still understandable. the specific codec used—and the compression configuration selected—determine how close to the original, uncompressed audio signal the output seems to be when heard by the human ear. because of the differences in how lossy codecs work compared to lossless ones, especially the fact that lossless ones have to be much more ...
...ir basic capabilities and their primary use cases. aac (advanced audio coding) the advanced audio coding (aac) codec is defined as part of the mpeg-4 (h.264) standard; specifically, as part of mpeg-4 part 3 and mpeg-2 part 7. designed to be able to provide more compression with higher audio fidelity than mp3, aac has become a popular choice, and is the standard format for audio in many types of media, including blu-ray discs and hdtv, as well as being the format used for songs purchased from online vendors including itunes. aac has a number of profiles that define methods of compressing audio for specific use cases, including everything from high quality surround sound to low-fidelity audio for speech-only use. as a patent-encumbered format, aac support is somewhat less predictable. for exa...
...And 4 more matches

Media (Audio-visual presentation) - MDN Web Docs Glossary: Definitions of Web-related terms
the term media (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. more broadly, media may include still images such as photographs or other still images. media content can be recorded, played back, presented, and at times interacted with in various ways. ...
...to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. more broadly, media may include still images such as photographs or other still images. media content can be recorded, played back, presented, and at times interacted with in various ways. ...
...al such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. more broadly, media may include still images such as photographs or other still images. media content can be recorded, played back, presented, and at times interacted with in various ways. ...
...And 3 more matches

CanvasCaptureMediaStreamTrack - Web APIs
this lets applications that wish to specify the frame capture times directly do so, if they specified a framerate of 0 when calling capturestream(). ...
...this lets applications that wish to specify the frame capture times directly do so, if they specified a framerate of 0 when calling capturestream(). ...
...this lets applications that wish to specify the frame capture times directly do so, if they specified a framerate of 0 when calling capturestream(). ...
...And 3 more matches

DisplayMediaStreamConstraints.video - Web APIs
the displaymediastreamconstraints dictionary's video property is used to configure the video track in the stream returned by getdisplaymedia(). this value may simply be a boolean, where true specifies that a default selection of input source be made (typically the entire display area of the device in use, spanning every screen in a multiple screen configuration). since a video track must always be included, a value of false results in a typeerror exception being thrown. more precise control over the format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream. ...
...le screen configuration). since a video track must always be included, a value of false results in a typeerror exception being thrown. more precise control over the format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream. ...
...ays be included, a value of false results in a typeerror exception being thrown. more precise control over the format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream. syntax displaymediastreamconstraints.video = allowvideoflag; displaymediastreamconstraints.video = mediatrackconstraints; displaymediastreamconstraints = { video: allowvideoflag | mediatrackconstraints; } value the value may be either a boolean or a mediatrackconstraints object. if a boolean is specified, a value of true (the default) indicates that the stream returned by getdisplaymedia() should be in whatever format the user agent feels is best. a value of fal...
...And 3 more matches

HTMLMedia​Element​.textTracks - Web APIs
the read-only texttracks property on htmlmediaelement objects returns a texttracklist object listing all of the texttrack objects representing the media element's text tracks, in the same order as in the list of text tracks. you can detect when tracks are added to and removed from an <audio> or <video> element using the addtrack and removetrack events. however, these events aren't sent directly to the media element itself. instead, they're sent to the track list object of the htmlmediaelement that corresponds to the type of track that was added to the element the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. once you have a reference to the list, you can monitor it for changes to detect when new te...
...the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. ...
...the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...
...And 3 more matches

MediaConfiguration - Web APIs
the mediaconfiguration mediacapabilities dictionary of the media capabilities api describes how media and audio files must be configured, or defined, to be passed as a parameter of the mediacapabilities.encodinginfo() and mediacapabilities.encodinginfo() methods. properties a valid configuration includes a valid encoding configuration type or decoding configuration type and a valid audio configuration or video configuration. if you plan on querying encoding information, set the media type to record or transmission. for decoding, set the type to file or media-source. if the media is an audio file, the audio configuration must include a valid audio mime type as contenttype, the number of channels, the bitrate, and the sample rate. video configurations mush include a valid video mime type as ...
... an audio file, the audio configuration must include a valid audio mime type as contenttype, the number of channels, the bitrate, and the sample rate. video configurations mush include a valid video mime type as contenttype, the bitrate, and framerate, along with the width and the height of the video file. all of these must be present, as in the examples below, or a typeerror will occur. a valid media decoding configuration, to be submitted as the parameter for mediacapabilities.decodinginfo() method, has it's `type` set as: file: for plain playback file. media-source: for media source files. a valid media encoding configuration, to be submitted as the parameter for mediacapabilities.encodinginfo() method, has it's `type` set as: record: for recording media. transmiss...
... a valid audio configuration includes: contenttype: valid audio mime type. channels: number of channels used by the audio track. bitrate: number of bits used to encode one second of the audio file. samplerate: number of audio samples making up one second of the audio file. ...
...And 3 more matches

MediaDeviceInfo.groupId - Web APIs
candidate recommendation initial definition. examples in this example, we assemble a list of the devices which are part of the same group as a given device. ...
... candidate recommendation initial definition. examples in this example, we assemble a list of the devices which are part of the same group as a given device. ...
... candidate recommendation initial definition. ...
...And 3 more matches

MediaError - Web APIs
the mediaerror interface represents an error which occurred while handling media in an html media element based on htmlmediaelement, such as <audio> or <video>. a mediaerror object describes the error in general terms using a numeric code categorizing the kind of error, and a message, which provides specific diagnostics about what went wrong. properties this interface doesn't inherit any properties. mediaerror.code a number which represents the general type of error that occurred, as follows: name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. ...
...rror, and a message, which provides specific diagnostics about what went wrong. properties this interface doesn't inherit any properties. mediaerror.code a number which represents the general type of error that occurred, as follows: name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. ...
...ch represents the general type of error that occurred, as follows: name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error. ...
...And 3 more matches

MediaKeySession - Web APIs
the mediakeysession interface of the encryptedmediaextensions api represents a context for message exchange with a content decryption module (cdm). properties mediakeysession.closed read only returns a promise signaling when a mediakeysession closes. this promise can only be fulfilled and is never rejected. closing a session means that licenses and keys associated with it are no longer valid for decrypting media data. mediakeysession.expiration read only the time after which the keys in the current session can no longer be used to decrypt media data, or nan if no such time exists. this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. this value may change during a session lifetime, such as when an action triggers the start of a window. ...
...alid for decrypting media data. mediakeysession.expiration read only the time after which the keys in the current session can no longer be used to decrypt media data, or nan if no such time exists. this value is determined by the cdm and measured in milliseconds since january 1, 1970, utc. this value may change during a session lifetime, such as when an action triggers the start of a window. mediakeysession.keystatuses read only contains a reference to a read-only mediakeystatusmap of the current session's keys and their statuses. mediakeysession.sessionid read only contains a unique string generated by the cdm for the current media object and its associated keys or licenses. ...
...e during a session lifetime, such as when an action triggers the start of a window. mediakeysession.keystatuses read only contains a reference to a read-only mediakeystatusmap of the current session's keys and their statuses. mediakeysession.sessionid read only contains a unique string generated by the cdm for the current media object and its associated keys or licenses. event handlers mediakeysession.onkeystatuseschange sets the eventhandler called when there has been a change in the keys in a session or their statuses. mediakeysession.onmessage sets the eventhandler called when the content decryption module has generated a message for the session. ...
...And 3 more matches

MediaPositionState.position - Web APIs
the mediapositionstate dictionary's position property is used when calling the mediasession method setpositionstate() to provide the user agent with the current playback position, in seconds, of the currently-playing media. this information is then, in turn, used by the user agent to provide a user interface which displays media playback information to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { position: timeinseconds }; let duration = positionstate.duration; value a floating-p...
...r.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { position: timeinseconds }; let duration = positionstate.duration; value a floating-point value indicating the current playback position within the media currently being performed, in seconds. this value should always be zero or more. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position information by calling setpositionstate(). ...
...oating-point value indicating the current playback position within the media currently being performed, in seconds. this value should always be zero or more. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position information by calling setpositionstate(). if the media is still playing when the interval is fired, setpositionstate() is called with an object that specifies the duration, playback rate, and position as reported by a mymedia object that describes the track being played. if the media is not playing, clearinterval() is used to remove the interval handler. ...
...And 3 more matches

MediaRecorder: dataavailable event - Web APIs
the mediarecorder interface's dataavailable event is fired when the mediarecorder delivers media data to your application for its use. bubbles no cancelable no interface blobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... ...
...our application for its use. bubbles no cancelable no interface blobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... ...
...interface blobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but usi...
...And 3 more matches

MediaSource.endOfStream() - Web APIs
the endofstream() method of the mediasource interface signals the end of the stream. syntax mediasource.endofstream(endofstreamerror); parameters endofstreamerror optional a domstring representing an error to throw when the end of the stream is reached. the possible values are: network: terminates playback and signals that a network error has occured. this can be used create a custom error handler related to media streams. for example, you might have a function that handles media chunk requests, separate from other network requests. ...
...presenting an error to throw when the end of the stream is reached. the possible values are: network: terminates playback and signals that a network error has occured. this can be used create a custom error handler related to media streams. for example, you might have a function that handles media chunk requests, separate from other network requests. when you make an xmlhttprequest call for a media chunk, and onabort or onerror triggers, you might want to call endofstream('network'), display a descriptive message in the ui, and maybe retry the network request immediately or wait until the network is back up (via some kind of polling.) decode: terminates playback and signals that a decoding error has occured. this can be used to indicate that a parsing error has occured while fetching medi...
...some kind of polling.) decode: terminates playback and signals that a decoding error has occured. this can be used to indicate that a parsing error has occured while fetching media data; maybe the data is corrupt, or is encoded using a codec that the browser doesn't know how to decode. return value undefined exceptions exception explanation invalidstateerror mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e. their sourcebuffer.updating property is true.) example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var asseturl = 'frag_bunny.mp4'; // need to be s...
...And 3 more matches

MediaStreamConstraints - Web APIs
if constraints are specified, an audio track is inherently requested. ...
...if constraints are specified, an audio track is inherently requested. ...
...rned mediastream, and, optionally, to establish constraints for those tracks' settings. to learn more about how constraints work, see capabilities, constraints, and settings. properties some combination—but not necessarily all—of the following properties will exist on the object. track constraints audio either a boolean (which indicates whether or not an audio track is requested) or a mediatrackconstraints object providing the constraints which must be met by the audio track included in the returned mediastream. if constraints are specified, an audio track is inherently requested. ...
...And 3 more matches

MediaStreamTrackEvent - Web APIs
these events are sent to the stream when these changes occur. ...
...these events are sent to the stream when these changes occur. ...
...these events are sent to the stream when these changes occur. ...
...And 3 more matches

MediaTrackConstraints.deviceId - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...And 3 more matches

MediaTrackSettings.facingMode - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...And 3 more matches

MediaTrackSettings.frameRate - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...And 3 more matches

MediaTrackSupportedConstraints.displaySurface - Web APIs
it adds the displaysurface constraint (requesting that only full-screen sharing be allowed) only if it is known to be supported by the browser. ...
...it adds the displaysurface constraint (requesting that only full-screen sharing be allowed) only if it is known to be supported by the browser. ...
...ed. the supported constraints list is obtained by calling navigator.mediadevices.getsupportedconstraints(). syntax isdisplaysurfacesupported = supportedconstraints.displaysurface; value a boolean value which is true if the displaysurface constraint is supported by the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the displaysurface constraint (requesting that only full-screen sharing be allowed) only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. ...
...And 3 more matches

Navigator.requestMediaKeySystemAccess() - Web APIs
the navigator.requestmediakeysystemaccess() method returns a promise which delivers a mediakeysystemaccess object that can be used to access a particular media key system, which can in turn be used to create keys for decrypting a media stream. this method is part of the encrypted media extensions api, which brings support for encrypted media and drm-protected video to the web. this method may have user-visible effects such as asking for permission to access one or more system resources. consider that when deciding when to call requestmediakeysystemaccess(); you don't want those requests to happen at inconvenient times. ...
...for encrypted media and drm-protected video to the web. this method may have user-visible effects such as asking for permission to access one or more system resources. consider that when deciding when to call requestmediakeysystemaccess(); you don't want those requests to happen at inconvenient times. as a general rule, this function should be called only when it's about time to create and use a mediakeys object by calling the returned mediakeysystemaccess object's createmediakeys() method. syntax ​promise = navigator.requestmediakeysystemaccess(keysystem, supportedconfigurations); parameters keysystem a domstring identifying the key system. for example com.example.somesystem or org.w3.clearkey. supportedconfigurations a non-empty array of mediakeysystemconfiguration objects. the fi...
...igator.requestmediakeysystemaccess(keysystem, supportedconfigurations); parameters keysystem a domstring identifying the key system. for example com.example.somesystem or org.w3.clearkey. supportedconfigurations a non-empty array of mediakeysystemconfiguration objects. the first element with a satisfiable configuration will be used. return value a promise that, when resolved, delivers a mediakeysystemaccess object to your fulfillment handler function. ...
...And 3 more matches

Window.matchMedia() - Web APIs
the window interface's matchmedia() method returns a new mediaquerylist object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query. syntax mqlist = window.matchmedia(mediaquerystring) parameters mediaquerystring a string specifying the media query to parse into a mediaquerylist. return value a new mediaquerylist object for the media query. use this object's properties and events to detect matches and to monitor for changes to those matches over time. usage notes you can use the returned media query to perform both instantanteous and event-driven checks to see if the document matches the media query. to perform a one-time, instantaneous check to see if th...
...there's a good example of this in the article on window.devicepixelratio. ...
...ct matches and to monitor for changes to those matches over time. usage notes you can use the returned media query to perform both instantanteous and event-driven checks to see if the document matches the media query. to perform a one-time, instantaneous check to see if the document matches the media query, look at the value of the matches property, which will be true if the document meets the media query's requirements. if you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change event to be delivered to the object. there's a good example of this in the article on window.devicepixelratio. ...
...And 3 more matches

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
reduced motion blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd). additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers. syntax no-preference indicates that the user has made no preference known to the system. ...
...he amount of movement or animation, preferably to the point where all non-essential movement is removed. example this example has an annoying animation unless you turn on reduce motion in your accessibility preferences. html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation. this will help not only users with low vision and contrast sensitivity issues but also users that are working on a comp...
... values active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation. ...
...And 3 more matches

Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average website. in terms of download performance, eliminating media, and reducing file size is the low-hanging fruit. this article looks at optimizing image and video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time. this is a high-level introduction to optimizing multimedia delivery on the web, covering general principles and techniques. for a more in-depth guide, see https://images.guide.
...ient-side web technologies. objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time. this is a high-level introduction to optimizing multimedia delivery on the web, covering general principles and techniques. for a more in-depth guide, see https://images.guide. why optimize your multimedia? for the average website, 51% of its bandwidth comes from imagery, followed by video at 25%, so it's safe to say it's important to address and optimize your multi-media content. you need to be considerate of data usage. many people are on capped data plans or even pay-as-you-go where they are literally paying by the megabyte. this isn't an emerging market problem either. as of 2018, 24% of the ...
... serving the optimal size in image delivery the "one size fits all" approach will not yield the best results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens. on top of that you'd also want to serve higher resolution images to those devices that boast a high dpi screen (e.g. "retina"). so apart from creating plenty of intermediate image variants you also need a way to serve the right file to the right browser. that's where you would need to upgrade your <picture> and <source> elements with media and/or sizes attributes. a detailed article on how to combine all of these attributes can be found here. two interesting effects to keep in mind regarding high dpi screens is that: with high dpi screen, humans will spot comp...
...And 2 more matches

HTMLMediaElement.controller - Web APIs
recommendation initial definition. ...
... recommendation initial definition. ...
... recommendation initial definition. ...
...And 2 more matches

HTMLMediaElement.error - Web APIs
example this example establishes a video element and adds an error handler to it; the error handler simply logs the details to console. ...
... example this example establishes a video element and adds an error handler to it; the error handler simply logs the details to console. ...
... example this example establishes a video element and adds an error handler to it; the error handler simply logs the details to console. ...
...And 2 more matches

HTMLMediaElement.play() - Web APIs
return value a promise which is resolved when playback has been started, or is rejected if for any reason playback cannot be started. note: older browsers may not return a value from play(). exceptions the promise's rejection handler is called with an exception name passed in as its sole input parameter (as opposed to a traditional exception being thrown). ...
...ejected if for any reason playback cannot be started. note: older browsers may not return a value from play(). exceptions the promise's rejection handler is called with an exception name passed in as its sole input parameter (as opposed to a traditional exception being thrown). possible errors include: notallowederror the user agent (browser) or operating system doesn't allow playback of media in the current context or situation. this may happen, for example, if the browser requires the user to explicitly start media playback by clicking a "play" button. notsupportederror the media source (which may be specified as a mediastream, mediasource, blob, or file, for example) doesn't represent a supported media format. other exceptions may be reported, depending on browser implementation...
...rrent context or situation. this may happen, for example, if the browser requires the user to explicitly start media playback by clicking a "play" button. notsupportederror the media source (which may be specified as a mediastream, mediasource, blob, or file, for example) doesn't represent a supported media format. other exceptions may be reported, depending on browser implementation details, media player implementation, and so forth. ...
...And 2 more matches

HTMLMediaElement.readyState - Web APIs
seeking will no longer raise an exception. have_current_data 2 data is available for the current playback position, but not enough to actually play more than one frame. ...
...seeking will no longer raise an exception. have_current_data 2 data is available for the current playback position, but not enough to actually play more than one frame. ...
...seeking will no longer raise an exception. have_current_data 2 data is available for the current playback position, but not enough to actually play more than one frame. ...
...And 2 more matches

MediaDevices.enumerateDevices() - Web APIs
the mediadevices method enumeratedevices() requests a list of the available media input and output devices, such as microphones, cameras, headsets, and so forth. the returned promise is resolved with a mediadeviceinfo array describing the devices. syntax var enumeratorpromise = navigator.mediadevices.enumeratedevices(); return value a promise that receives an array of mediadeviceinfo objects when the promise is fulfilled. each object in the array describes one of the available media input and output devices. if enumeration fails, the promise is rejected. example here's an example of using enumeratedevices(). it simply outputs a list of the device ids, with their labels if available. ...
...ices(); return value a promise that receives an array of mediadeviceinfo objects when the promise is fulfilled. each object in the array describes one of the available media input and output devices. if enumeration fails, the promise is rejected. example here's an example of using enumeratedevices(). it simply outputs a list of the device ids, with their labels if available. if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones. ...
...e media input and output devices. if enumeration fails, the promise is rejected. example here's an example of using enumeratedevices(). it simply outputs a list of the device ids, with their labels if available. if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumeratedevices() not supported."); return; } // list cameras and microphones. ...
...And 2 more matches

MediaKeySession.onmessage - Web APIs
this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
...t="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="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysessi...
...And 2 more matches

MediaPositionState.playbackRate - Web APIs
the mediapositionstate dictionary's playbackrate property is used when calling the mediasession method setpositionstate() to tell the user agent the rate at which media is currently being played. this information can then, in turn, be used by the user agent to provide a user interface which displays media playback information to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying...
...s well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying a multiplier corresponding to the current relative rate at which the media being performed is playing. a value of 1.0 indicates the media is playing forward at normal speed, while higher values indicate that the media is being played faster than normal. lower values indicate the media is being played more slowly. negative values can be specified to indicate the media is playing in reverse, with decreasing values then indicating faster and faster reverse playback. note...
...layed more slowly. negative values can be specified to indicate the media is playing in reverse, with decreasing values then indicating faster and faster reverse playback. note: a value of 0.0 is not permitted. example in this example, an app is updating the browser to let it know that the user has clicked a button causing the playback to shift to a double-speed mode. it begins by creating a mediapositionstate object, then submits it to the browser it by calling navigator.mediasession.setpositionstate(). let positionstate = { duration: mymediaduration; playbackrate: 2.0; position: mymediaposition; }; navigator.mediasession.setpositionstate(positionstate); note the value 2.0 as the playbackrate. ...
...And 2 more matches

MediaRecorder: error event - Web APIs
the mediarecorder interface's error event is fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec. bubbles no cancelable no interface mediarecordererrorevent event handler property onerror for details of the all the possible errors see the documentation for the event handler property: onerror. ...
...g an unsupported codec. bubbles no cancelable no interface mediarecordererrorevent event handler property onerror for details of the all the possible errors see the documentation for the event handler property: onerror. ...
...ec. bubbles no cancelable no interface mediarecordererrorevent event handler property onerror for details of the all the possible errors see the documentation for the event handler property: onerror. ...
...And 2 more matches

MediaRecorder.isTypeSupported - Web APIs
recording may still fail if there are insufficient resources to support the recording and encoding process. if the value is false, the user agent is incapable of recording the specified format. ...
...recording may still fail if there are insufficient resources to support the recording and encoding process. if the value is false, the user agent is incapable of recording the specified format. ...
...recording may still fail if there are insufficient resources to support the recording and encoding process. if the value is false, the user agent is incapable of recording the specified format. ...
...And 2 more matches

MediaRecorder.onstop - Web APIs
the mediarecorder.onstop event handler (part of the mediarecorder api) handles the stop event, allowing you to run code in response to media recording via a mediarecorder being stopped. the stop event is thrown either as a result of the mediarecorder.stop() method being invoked, or when the media stream being captured ends. in each case, the stop event is preceded by a dataavailable event, making the blob captured up to that point available for you to use in your application. syntax mediarecorder.onstop = function(event) { ... } mediarecorder.addeventlistener('stop', function(event) { ... }) example ... ...
...as a result of the mediarecorder.stop() method being invoked, or when the media stream being captured ends. in each case, the stop event is preceded by a dataavailable event, making the blob captured up to that point available for you to use in your application. syntax mediarecorder.onstop = function(event) { ... } mediarecorder.addeventlistener('stop', function(event) { ... }) example ... ...
...edia stream being captured ends. in each case, the stop event is preceded by a dataavailable event, making the blob captured up to that point available for you to use in your application. syntax mediarecorder.onstop = function(event) { ... } mediarecorder.addeventlistener('stop', function(event) { ... }) example ... mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ... specifications ...
...And 2 more matches

MediaRecorderErrorEvent() - Web APIs
it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...it must contain the error property at a minimum. error a domexception that describes the error that occurred. this object's name property should indicate the name of the error that occurred. the other fields may or may not be present. ...
...And 2 more matches

MediaSource.activeSourceBuffers - Web APIs
the activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks. syntax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks. ...
...ax var myactivesourcebuffers = mediasource.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks. ...
...ce.activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the active tracks. ...
...And 2 more matches

MediaStream.getTrackById() - Web APIs
otherwise, the returned value is null. example this example activates a commentary track on a video by ducking the audio level of the main audio track to 50%, then enabling the commentary track. ...
...otherwise, the returned value is null. example this example activates a commentary track on a video by ducking the audio level of the main audio track to 50%, then enabling the commentary track. ...
...otherwise, the returned value is null. example this example activates a commentary track on a video by ducking the audio level of the main audio track to 50%, then enabling the commentary track. ...
...And 2 more matches

MediaStream Image Capture API - Web APIs
the mediastream image capture api is an api for capturing images or videos from a photographic device. in addition to capturing data, it also allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether or not there is a flash and what they are currently set to. conversely, the api allows the capabilities to be configured within the constraints what the device allows. mediastream image capture concepts and usage the process of retrieving an image or video stream happens as described below. the example code is adapted from chrome's image capture examples. first, get a reference to a device by calling mediadevices.getusermedia(). ...
...the constraints what the device allows. mediastream image capture concepts and usage the process of retrieving an image or video stream happens as described below. the example code is adapted from chrome's image capture examples. first, get a reference to a device by calling mediadevices.getusermedia(). the example below simply says give me whatever video device is available, though the getusermedia() method allows more specific capabilities to be requested. this method returns a promise that resolves with a mediastream object. navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { // do something with the stream. }) next, isolate the visual part of the media stream. do this by calling mediastream.getvideotracks(). ...
...ugh the getusermedia() method allows more specific capabilities to be requested. this method returns a promise that resolves with a mediastream object. navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { // do something with the stream. }) next, isolate the visual part of the media stream. do this by calling mediastream.getvideotracks(). this returns an array of mediastreamtrack objects. the code below assumes that the first item in the mediastreamtrack array is the one to use. you can use the properties of the mediastreamtrack objects to select the one you need. const track = mediastream.getvideotracks()[0]; at this point, you might want to configure the device capabilities before capturing an image. you can do this by calling applyconstraints() on the trac...
...And 2 more matches

MediaTrackConstraints.autoGainControl - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. automatic gain control is typically a feature provided by microphones, although it can be provided by other input sources as well. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. automatic gain control is typically a feature provided by microphones, although it can be provided by other input sources as well. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. automatic gain control is typically a feature provided by microphones, although it can be provided by other input sources as well. ...
...And 2 more matches

MediaTrackConstraints.displaySurface - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...laysurface property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the displaysurface constrainable property. this is used to specify the type or types of display surfaces which getdisplaymedia() will let the user select among for sharing purposes. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.displaysurface as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { displaysurface: constraint }; constraintsobject.displaysurface = constraint; value a constraindomstring which specifies the type of display s...
...And 2 more matches

MediaTrackConstraints.echoCancellation - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...And 2 more matches

MediaTrackConstraints.facingMode - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...And 2 more matches

MediaTrackConstraints.latency - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...And 2 more matches

MediaTrackConstraints.noiseSuppression - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. noise suppression is typically provided by microphones, although it can be provided by other input sources as well. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. noise suppression is typically provided by microphones, although it can be provided by other input sources as well. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. noise suppression is typically provided by microphones, although it can be provided by other input sources as well. ...
...And 2 more matches

MediaTrackConstraints - Web APIs
a constraints dictionary is passed into applyconstraints() to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling getconstraints(). for each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. the specifics vary somewhat depending on the type of the constrainable property. to learn more about how constraints work, see capabilities, constraints, and settings. ...
... necessarily all—of the following properties will exist on the object. this may be because a given browser doesn't support the property, or because it doesn't apply. for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid. properties of all media tracks deviceid a constraindomstring object specifying a device id or an array of device ids which are acceptable and/or required. groupid a constraindomstring object specifying a group id or an array of group ids which are acceptable and/or required. properties of audio tracks autogaincontrol a constrainboolean object which specifies whether automatic gain control is preferred and/or...
...he resolution of a video track. allowed values are none and crop-and-scale. none means that the user agent uses the resolution provided by the camera, its driver or the os. crop-and-scale means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constraints that affect the resolution. properties of shared screen tracks these constraints apply to mediatrackconstraints objects specified as part of the displaymediastreamconstraints object's video property when using getdisplaymedia() to obtain a stream for screen sharing. cursor a constraindomstring which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. the value may be a single one of the following strings, ...
...And 2 more matches

MediaTrackSettings - Web APIs
to learn more about how constraints and settings work, see capabilities, constraints, and settings. properties some or all of the following will be included in the object, either because it's not supported by the browser or because it's not available due to context. ...
...properties some or all of the following will be included in the object, either because it's not supported by the browser or because it's not available due to context. for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid. properties of all media tracks deviceid a domstring indicating the current value of the deviceid property. the device id is a origin-unique string identifying the source of the track; this is usually a guid. this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling mediadevices.getusermedia(). groupid a do...
...l device. for instance, the audio input and output devices for the speaker and microphone built into a phone would share the same group id, since they're part of the same physical device. the microphone on a headset would have a different id, though. this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling mediadevices.getusermedia(). properties of audio tracks autogaincontrol a boolean which indicates the current value of the autogaincontrol property, which is true if automatic gain control is enabled and is false otherwise. channelcount a long integer value indicating the current value of the channelcount property, specifying the number of audio channels present on the track ...
...And 2 more matches

MediaTrackSupportedConstraints.logicalSurface - Web APIs
the mediatracksupportedconstraints dictionary's logicalsurface property indicates whether or not the logicalsurface constraint is supported by the user agent and the device on which the content is being used. the supported constraints list is obtained by calling navigator.mediadevices.getsupportedconstraints(). syntax islogicalsurfacesupported = supportedconstraints.logicalsurface; value a boolean value which is true if the logicalsurface constraint is supported by the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the logicalsurface constraint (requesting that only logical display surfaces—those which may not be entirely visible onscreen—be included among the options available to the user)...
...example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the logicalsurface constraint (requesting that only logical display surfaces—those which may not be entirely visible onscreen—be included among the options available to the user) only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. ...
...y logical display surfaces—those which may not be entirely visible onscreen—be included among the options available to the user) only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. ...
...And 2 more matches

MediaTrackSupportedConstraints - Web APIs
because of the way interface definitions in webidl work, if a constraint is requested but not supported, no error will occur. ...
... because of the way interface definitions in webidl work, if a constraint is requested but not supported, no error will occur. ...
... because of the way interface definitions in webidl work, if a constraint is requested but not supported, no error will occur. ...
...And 2 more matches

StyleSheet.media - Web APIs
the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
... the media property of the stylesheet interface specifies the intended destination media for style information. it is a read-only, array-like medialist object and can be removed with deletemedium() and added with appendmedium(). ...
...And 2 more matches

CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements. csp version 1 directive type fetch directive default-src fallback yes. if this directive is absent, the user agent will look for the default-src directive. syntax one or more sources can be allowed for the media-src policy: content-security-policy: media-src <source>; content-security-policy: media-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number. the site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as t...
...domain of example.com using the current protocol. <scheme-source> a schema such as 'http:' or 'https:'. the colon is required, single quotes shouldn't be used. you can also specify data schemas (not recommended). data: allows data: uris to be used as a content source. this is insecure; an attacker can also inject arbitrary data: uris. use this sparingly and definitely not for scripts. mediastream: allows mediastream: uris to be used as a content source. blob: allows blob: uris to be used as a content source. filesystem: allows filesystem: uris to be used as a content source. 'self' refers to the origin from which the protected document is being served, including the same url scheme and port number. you must include the single quotes. some browsers specifically exclude blob...
...le. when generating the hash, don't include the <script> or <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace. see unsafe inline script for an example. in csp 2.0 this applied only to inline scripts. csp 3.0 allows it in the case of script-src for external scripts. ...
...And 2 more matches

Feature-Policy: encrypted-media - HTTP
'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
... 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...
...And 2 more matches

Test your skills: Multimedia and embedding - Learn web development
o content and from object to iframe — other embedding technologies articles. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. multimedia and embedding 1 in this task we want you to embed a simple audio file onto the page. you need to: add the path to the audio file to an appropriate attribute to embed it on the page. the audio is called audio.mp3, and it is in a folder inside the current folder called media. add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that ...
...you need to: add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that don't support <video>. ...
...x video player, with multiple sources, subtitles, and other features besides. you need to: add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that don't support <video>. add multiple sources, containing the paths to the video files. the files are called video.mp4 and video.webm, and are in a folder inside the current folder called media. let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time. give the <video> a width and height equal to its intrinsic size (320 by 240 pixels). make the video muted by default. display the text tracks contained in the media folder, in a file called subtitles_en.vtt, when the video is playing. you must exp...
...video muted by default. display the text tracks contained in the media folder, in a file called subtitles_en.vtt, when the video is playing. you must explicitly set the type as subtitles, and the subtitle language to english. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. multimedia and embedding 3 for this final task you have two tasks to do: embed a pdf into the page. the pdf is called mypdf.pdf, and is contained in the media folder. go to a sharing site like youtube or google maps, and embed a video or other media item into the page. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own ...

HTMLMediaElement.autoplay - Web APIs
the htmlmediaelement.autoplay property reflects the autoplay html attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. a media element whose source is a mediastream and whose autoplay property is true will begin playback when it becomes active (that is, when mediastream.active becomes true). note: 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, autoplay can be useful when creating media elements whose source will be set at a later time, under user control. for a much more in-depth look a...
...ou must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, autoplay can be useful when creating media elements whose source will be set at a later time, under user control. for a much more in-depth look at autoplay, autoplay blocking, and how to respond whena autoplay is blocked by the user's browser, see our article autoplay guide for media and web audio apis. syntax htmlmediaelement.autoplay = true | false; var autoplay = htmlmediaelement.autoplay; value a boolean whose value is true if the media element will begin playback as soon as enough content has loaded to allow it to do so without interruption. note: some browsers offer users the ability to override autoplay in order to prevent disruptive audio or video from playing ...
... recommendation initial definition. ...
... recommendation initial definition. ...

HTMLMediaElement.networkState - Web APIs
examples this example will listen for the audio element to begin playing and then check if it is still loading data. ...
... examples this example will listen for the audio element to begin playing and then check if it is still loading data. ...
...orkstate = audioorvideo.networkstate; value an unsigned short. possible values are: constant value description network_empty 0 there is no data yet. also, readystate is have_nothing. network_idle 1 htmlmediaelement is active and has selected a resource, but is not using the network. network_loading 2 the browser is downloading htmlmediaelement data. network_no_source 3 no htmlmediaelement src found. examples this example will listen for the audio element to begin playing and then check if it is still loading data. <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (ob...
...heck if it is still loading data. <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading... } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.networkstate' in that specification. living standard html5the definition of 'htmlmediaelement.networkstate' in that specification. recommendation ...

HTMLMediaElement.onencrypted - Web APIs
this interface inherits from the extendableevent interface. ...
... this interface inherits from the extendableevent interface. ...
...aco,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="/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;} syntax htmlmediaeleme...
... recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...

HTMLStyleElement.media - Web APIs
the htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
... the htmlstyleelement.media property specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
...y specifies the intended destination medium for style information. syntax medium = style.media style.media = medium parameters medium is a string describing a single medium or a comma-separated list. ...
...m is a string describing a single medium or a comma-separated list. example <!doctype html> <html> <head> <link id="linkedstyle" rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living standardthe definition of 'htmlstyleelement' in that specification. living standard html 5.1the definition of 'htmlstyleelement' in that specification. recommend...

MediaDecodingConfiguration - Web APIs
the mediadecodingconfiguration dictionary of the media capabilities api is used to define the type of media being tested when calling mediacapabilities.decodinginfo() to query whether a specific media configuration is supported, smooth, and/or power efficient. properties a mediadecodingconfiguration dictionary takes two properties: type — the type of media being tested. this takes one of two values: file: represents a configuration that is meant to be used for a plain file playback. media-source: represents a configuration that is meant to be used for playback of a mediasource. a media configuration — a videoconfiguration or audioconfiguration dictionary. ...
...ary takes two properties: type — the type of media being tested. this takes one of two values: file: represents a configuration that is meant to be used for a plain file playback. media-source: represents a configuration that is meant to be used for playback of a mediasource. a media configuration — a videoconfiguration or audioconfiguration dictionary. ...
...he type of media being tested. this takes one of two values: file: represents a configuration that is meant to be used for a plain file playback. media-source: represents a configuration that is meant to be used for playback of a mediasource. a media configuration — a videoconfiguration or audioconfiguration dictionary. examples //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; // check support and perfo...
...pe : 'file', // or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; // check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(result => { console.log('this configuration is ' + (result.supported ? '' : 'not ') + 'supported.') }); specifications specification status comment media capabilitiesthe definition of 'mediadecodingconfiguration' in that specification. draft initial definition ...

MediaDevices.getSupportedConstraints() - Web APIs
the getsupportedconstraints() method of the mediadevices interface returns an object based on the mediatracksupportedconstraints dictionary, whose member fields each specify one of the constrainable properties the user agent understands. syntax var supportedconstraints = navigator.mediadevices.getsupportedconstraints(); parameters none. return value a new object based on the mediatracksupportedconstraints dictionary listing the constraints supported by the user agent. because only constraints supported by the user agent are included in the list, each of these boolean properties has the value true. example this example outputs a list of the constraints supported by your browser. ...
...(); parameters none. return value a new object based on the mediatracksupportedconstraints dictionary listing the constraints supported by the user agent. because only constraints supported by the user agent are included in the list, each of these boolean properties has the value true. example this example outputs a list of the constraints supported by your browser. ...
...hese boolean properties has the value true. example this example outputs a list of the constraints supported by your browser. ...
...ortedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification. candidate recommendation initial definition. ...

MediaEncodingConfiguration - Web APIs
the mediaencodingconfiguration dictionary of the media capabilities api is used to define the type of media being tested when calling mediacapabilities.encodinginfo() to query whether a specific media configuration is supported, smooth, and/or power efficient. properties a mediaencodingconfiguration dictionary takes two properties: type — the type of media being tested; takes one of two values: record — represents a configuration for recording of media, e.g. using mediarecorder. transmission — represents a configuration meant to be transmitted over electronic means (e.g. using rtcpeerconnection). a media configuration — a videoconfiguration audioconfiguration dictionary. ...
...ties: type — the type of media being tested; takes one of two values: record — represents a configuration for recording of media, e.g. using mediarecorder. transmission — represents a configuration meant to be transmitted over electronic means (e.g. using rtcpeerconnection). a media configuration — a videoconfiguration audioconfiguration dictionary. ...
...ng tested; takes one of two values: record — represents a configuration for recording of media, e.g. using mediarecorder. transmission — represents a configuration meant to be transmitted over electronic means (e.g. using rtcpeerconnection). a media configuration — a videoconfiguration audioconfiguration dictionary. examples //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; // check support and per...
... : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8", // valid content type width : 800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s. } }; // check support and performance navigator.mediacapabilities.encodinginfo(mediaconfig).then(result => { console.log('this configuration is ' + (result.supported ? '' : 'not ') + 'supported.') }); specifications specification status comment media capabilitiesthe definition of 'mediaencodingconfiguration' in that specification. draft initial definition ...

MediaKeyMessageEvent - Web APIs
the mediakeymessageevent interface of the encryptedmediaextensions api contains the content and related data when the content decryption module generates a message for the session. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</te...
...75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor...
...essageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent. properties inherits properties from its parent, event. mediakeymessageevent.message read only returns an arraybuffer with a message from the content decryption module. messages vary by key system. mediakeymessageevent.messagetype read only indicates the type of message. may be one of license-request, license-renewal, lic...
...th a message from the content decryption module. messages vary by key system. mediakeymessageevent.messagetype read only indicates the type of message. may be one of license-request, license-renewal, license-release, or individualization-request. methods inherits methods from its parent, event. examples // tbd specifications specification status comment encrypted media extensionsthe definition of 'mediakeymessageevent' in that specification. recommendation initial definition. ...

MediaQueryList.matches - Web APIs
the matches read-only property of the mediaquerylist interface is a boolean that returns true if the document currently matches the media query list, or false if not. you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
...he media query list, or false if not. you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
...ot. you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist. syntax var matches = <varm>mediaquerylist.matches; value a boolean which is true if the document currently matches the media query list; otherwise, it's false. ...
... is true if the document currently matches the media query list; otherwise, it's false. examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification. working draft initial definition ...

MediaRecorder.onpause - Web APIs
the mediarecorder.onpause event handler (part of the mediarecorder api) handles the pause event, allowing you to run code in response to the media recording being paused. the pause event is thrown as a result of the mediarecorder.pause() method being invoked. syntax mediarecorder.onpause = function(event) { ... } mediarecorder.addeventlistener('pause', function(event) { ... }) example ... ...
...er (part of the mediarecorder api) handles the pause event, allowing you to run code in response to the media recording being paused. the pause event is thrown as a result of the mediarecorder.pause() method being invoked. syntax mediarecorder.onpause = function(event) { ... } mediarecorder.addeventlistener('pause', function(event) { ... }) example ... ...
...e pause event, allowing you to run code in response to the media recording being paused. the pause event is thrown as a result of the mediarecorder.pause() method being invoked. syntax mediarecorder.onpause = function(event) { ... } mediarecorder.addeventlistener('pause', function(event) { ... }) example ... pause.onclick = function() { if(mediarecorder.state === "recording") { mediarecorder.pause(); // recording paused } else if(mediarecorder.state === "paused") { mediarecorder.resume(); // resume recording } } mediarecorder.onpause = function() { // do something in response to // recording being paused } mediarecorder.onresume = function() { // do something in response to // recording being resumed } ... properties no...
...ate === "paused") { mediarecorder.resume(); // resume recording } } mediarecorder.onpause = function() { // do something in response to // recording being paused } mediarecorder.onresume = function() { // do something in response to // recording being resumed } ... properties none. specifications specification status comment mediastream recordingthe definition of 'mediarecorder.onpause' in that specification. working draft initial definition ...

MediaRecorder.onresume - Web APIs
the mediarecorder.onresume event handler (part of the mediarecorder api) handles the resume event, allowing you to run code in response to the media recording being resumed after pausing. the resume event is thrown as a result of the mediarecorder.resume() method being invoked. syntax mediarecorder.onresume = function(event) { ... } mediarecorder.addeventlistener('resume', function(event) { ... }) example ... ...
...arecorder api) handles the resume event, allowing you to run code in response to the media recording being resumed after pausing. the resume event is thrown as a result of the mediarecorder.resume() method being invoked. syntax mediarecorder.onresume = function(event) { ... } mediarecorder.addeventlistener('resume', function(event) { ... }) example ... ...
...wing you to run code in response to the media recording being resumed after pausing. the resume event is thrown as a result of the mediarecorder.resume() method being invoked. syntax mediarecorder.onresume = function(event) { ... } mediarecorder.addeventlistener('resume', function(event) { ... }) example ... pause.onclick = function() { if(mediarecorder.state === "recording") { mediarecorder.pause(); // recording paused } else if(mediarecorder.state === "paused") { mediarecorder.resume(); // resume recording } } mediarecorder.onpause = function() { // do something in response to // recording being paused } mediarecorder.onresume = function() { // do something in response to // recording being resumed } ... properties no...
...ate === "paused") { mediarecorder.resume(); // resume recording } } mediarecorder.onpause = function() { // do something in response to // recording being paused } mediarecorder.onresume = function() { // do something in response to // recording being resumed } ... properties none. specifications specification status comment mediastream recordingthe definition of 'mediarecorder.onresume' in that specification. working draft initial definition ...

MediaRecorder.resume() - Web APIs
the mediarecorder.resume() method (part of the mediarecorder api) is used to resume media recording when it has been previously paused. when the resume() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps. if mediarecorder.state is not "inactive", continue to the next step. set mediarecorder.state to "recording". continue gathering data into the current blob. raise a resume event. ...
...iously paused. when the resume() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps. if mediarecorder.state is not "inactive", continue to the next step. set mediarecorder.state to "recording". continue gathering data into the current blob. raise a resume event. ...
...s: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps. if mediarecorder.state is not "inactive", continue to the next step. set mediarecorder.state to "recording". continue gathering data into the current blob. raise a resume event. syntax mediarecorder.resume() errors an invalidstate error is raised if the resume() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — the recording cannot be resumed if it is not already paused; if mediarecorder.state is already "recording", resume() has no effect. example ... ...
...rrent blob. raise a resume event. syntax mediarecorder.resume() errors an invalidstate error is raised if the resume() method is called while the mediarecorder object’s mediarecorder.state is "inactive" — the recording cannot be resumed if it is not already paused; if mediarecorder.state is already "recording", resume() has no effect. example ... pause.onclick = function() { if(mediarecorder.state === "recording") { mediarecorder.pause(); // recording paused } else if(mediarecorder.state === "paused") { mediarecorder.resume(); // resume recording } } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.resume()' in that specification. working draft initial defin...

MediaRecorderErrorEvent - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...ents errors returned by the mediastream recording api. it is an event object that encapsulates a reference to a domexception describing the error that occurred. properties inherits properties from its parent interface, event. error read only a domexception containing information about the error that occurred. read only. constructor mediastreamrecorderevent() creates and returns a new mediarecordererrorevent event object with the given parameters. methods inherits methods from its parent interface, event. specifications specification status comment mediastream recordingthe definition of 'mediarecordererrorevent' in that specification. working draft initial definition. ...

MediaSource.sourceBuffers - Web APIs
the sourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource. syntax var mysourcebuffers = mediasource.sourcebuffers; value a sourcebufferlist. ...
...ining the list of sourcebuffer objects associated with this mediasource. syntax var mysourcebuffers = mediasource.sourcebuffers; value a sourcebufferlist. ...
...sociated with this mediasource. syntax var mysourcebuffers = mediasource.sourcebuffers; value a sourcebufferlist. example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ... ...
...{ sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ... specifications specification status comment media source extensionsthe definition of 'sourcebuffers' in that specification. recommendation initial definition. ...

MediaStream.addTrack() - Web APIs
candidate recommendation initial specification. ...
... candidate recommendation initial specification. ...
... candidate recommendation initial specification. ...
...thod adds a new track to the stream. the track is specified as a parameter of type mediastreamtrack. if the specified track is already in the stream's track set, this method has no effect. syntax stream.addtrack(track); parameters track a mediastreamtrack to add to the stream. return value undefined example specifications specification status comment media capture and streamsthe definition of 'addtrack()' in that specification. candidate recommendation initial specification. ...

MediaStream.getVideoTracks() - Web APIs
the getvideotracks() method of the mediastream interface returns a sequence of mediastreamtrack objects representing the video tracks in this stream. syntax var mediastreamtracks[] = mediastream.getvideotracks(); parameters none. return value an array of mediastreamtrack objects, one for each video track contained in the media stream. video tracks are those tracks whose kind property is video. the array is empty if the stream contains no video tracks. note: the order of the tracks is not defined by the specification, and may not be the same from one call to getvideotracks() to another. ...
...deo. the array is empty if the stream contains no video tracks. note: the order of the tracks is not defined by the specification, and may not be the same from one call to getvideotracks() to another. ...
...cial videostreamtrack interface which was used as the type for each entry in the list of video streams; however, this has since been merged into the main mediastreamtrack interface. example the following example, extracted from chrome's image capture / photo resolution sample, uses getvideotracks() to retrieve a track for passing to the imagecapture() constructor. ...
...k interface which was used as the type for each entry in the list of video streams; however, this has since been merged into the main mediastreamtrack interface. example the following example, extracted from chrome's image capture / photo resolution sample, uses getvideotracks() to retrieve a track for passing to the imagecapture() constructor. var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) specifications specification status comment media capture and streamsthe definition of 'getvideotracks()' in that specification. ca...

MediaStream.id - Web APIs
candidate recommendation initial definition. browser compatibility 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. ...
... candidate recommendation initial definition. browser compatibility 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. ...
... candidate recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... ...

MediaStreamTrack.enabled - Web APIs
this can be used to intentionally mute a track. when enabled, a track's data is output from the source to the destination; otherwise, empty frames are output. in the case of audio, a disabled track generates frames of silence (that is, frames in which every sample's value is 0). for video tracks, every frame is filled entirely with black pixels. ...
...cates a state in which the track is temporarily unable to output data, such as a scenario in which frames have been lost in transit. note: if the track has been disconnected, the value of this property can be changed, but has no effect. ...
... | false] value when true, enabled indicates that the track is permitted to render its actual media to the output. when enabled is set to false, the track only generates empty frames. empty audio frames have every sample's value set to 0. empty video frames have every pixel set to black. note: when implementing a mute/unmute feature, you should use the enabled property. usage notes if the mediastreamtrack represents the video input from a camera, disabling the track by setting enabled to false also updates device activity indicators to show that the camera is not currently recording or streaming. for example, the green "in use" light next to the camera in imac and macbook computers turns off while the track is muted in this way. example this example demonstrates a click event handler ...
... candidate recommendation initial specification. ...

MediaStreamTrack.getConstraints() - Web APIs
for example, you may prefer high definition video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable sizes or ranges of sizes. ...
...for example, you may prefer high definition video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable sizes or ranges of sizes. see capabilities, constraints, and settings for details on how to work with constrainable properties. ...
..., you may prefer high definition video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable sizes or ranges of sizes. see capabilities, constraints, and settings for details on how to work with constrainable properties. syntax const constraints = track.getconstraints() return value a mediatrackconstraints object which indicates the constrainable properties the web site or app most recently set using applyconstraints(). the properties in the returned object are listed in the same order as when they were set, and only properties specifically set by the site or app are included. note: the returned set of constraints doesn't necessarily describe the actual state of the media. even if...
... you should instead call getsettings(). example this example obtains the current constraints for a track, sets the facingmode, and applies the updated constraints. function switchcameras(track, camera) { const constraints = track.getconstraints(); constraints.facingmode = camera; track.applyconstraints(constraints); } specifications specification status comment media capture and streamsthe definition of 'getconstraints()' in that specification. candidate recommendation initial definition. ...

MediaStreamTrack.onended - Web APIs
the event handler function receives a single parameter: the event object, which is a simple event object. examples this example sets up an event handler for the ended event which changes an on-screen icon to indicate that the track is no longer active. ...
...the event handler function receives a single parameter: the event object, which is a simple event object. examples this example sets up an event handler for the ended event which changes an on-screen icon to indicate that the track is no longer active. ...
...ended event handler is used to specify a function which serves as an eventhandler to be called when the ended event occurs on the track. this event occurs when the track will no longer provide data to the stream for any reason, including the end of the media input being reached, the user revoking needed permissions, the source device being removed, or the remote peer ending a connection. syntax mediastreamtrack.onended = function; value a function to serve as an eventhandler for the ended event. the event handler function receives a single parameter: the event object, which is a simple event object. examples this example sets up an event handler for the ended event which changes an on-screen icon to indicate that the track is no longer active. track.onended = function(event) { let sta...
...which is a simple event object. examples this example sets up an event handler for the ended event which changes an on-screen icon to indicate that the track is no longer active. track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification. candidate recommendation initial specification. ...

MediaTrackConstraints.aspectRatio - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { aspectratio: constraint }; constraintsobject.aspectratio = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's aspect ratio. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { aspectratio: constraint }; constraintsobject.aspectratio = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's aspect ratio. ...
....aspectratio = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's aspect ratio. the value is the width divided by the height and is rounded to ten decimal places. for example, the standard high-definition video aspect ratio of 16:9 can be computed as 1920/1080, or 1.7777777778. if this value is a number, the user agent will attempt to obtain media whose aspect ratio is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required aspect ratio (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. example see ...
... candidate recommendation initial specification. ...

MediaTrackConstraints.frameRate - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { framerate: constraint }; constraintsobject.framerate = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's frame rate, in frames per second. ...
...however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { framerate: constraint }; constraintsobject.framerate = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's frame rate, in frames per second. ...
...pically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { framerate: constraint }; constraintsobject.framerate = constraint; value a constraindouble describing the acceptable or required value(s) for a video track's frame rate, in frames per second. if this value is a number, the user agent will attempt to obtain media whose frame rate is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required frame rate (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. example see exam...
... candidate recommendation initial specification. ...

MediaTrackConstraints.groupId - Web APIs
the mediatrackconstraints dictionary's groupid property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the groupid constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.groupid as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { groupid: constraint }; constraintsobject.groupid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) group ids which are acceptable as the source of media content. group ids are uniqu...
...amiliar with. syntax var constraintsobject = { groupid: constraint }; constraintsobject.groupid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) group ids which are acceptable as the source of media content. group ids are unique for a given origin for the duration of a single browsing session, and are shared by all media sources that come from the same physical device. for example, the microphone and speaker on the same headset would share a group id. this makes it possible to use the group id to ensure that the audio and input devices are on the same headset by retrieving the group id of the input device and specifying it when asking for an output device, perhaps. however, the value of the groupid is determined...
...s determined by the source of the track's content, and there's no particular format mandated by the specification (although some kind of guid is recommended). that means that a given track will only return one value for the groupid when you call getcapabilities(), and keep in mind that this value will change for each browsing session. ...
...ack will only return one value for the groupid when you call getcapabilities(), and keep in mind that this value will change for each browsing session. because of this, there's no use for the group id when calling mediastreamtrack.applyconstraints(), since there is only one possible value, and you can't use it to ensure the same group is used across multiple browsing sessions when calling getusermedia(). example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'groupid' in that specification. candidate recommendation initial specification. ...

MediaTrackSettings.cursor - Web APIs
motion the mouse cursor should always be included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. ...
... motion the mouse cursor should always be included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. ...
...whether or not the cursor should be captured as part of the video track included in the mediastream returned by getdisplaymedia(). syntax cursorsetting = mediatracksettings.cursor; value the value of cursor comes from the cursorcaptureconstraint enumerated string type, and may have one of the following values: always the mouse should always be visible in the video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor should always be included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. ...
... video content of the {domxref("mediastream"), unless the mouse has moved outside the area of the content. motion the mouse cursor should always be included in the video if it's moving, and for a short time after it stops moving. never the mouse cursor is never included in the shared video. specifications specification status comment screen capturethe definition of 'mediatracksettings.cursor' in that specification. working draft initial definition ...

MediaTrackSupportedConstraints.cursor - Web APIs
the mediatracksupportedconstraints dictionary's cursor property indicates whether or not the cursor constraint is supported by the user agent and the device on which the content is being used. the supported constraints list is obtained by calling navigator.mediadevices.getsupportedconstraints(). syntax iscursorsupported = supportedconstraints.cursor; value a boolean value which is true if the cursor constraint is supported by the device and user agent. example this method sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the cursor constraint only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. ...
...hod sets up the constraints object specifying the options for the call to getdisplaymedia(). it adds the cursor constraint only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. ...
...ions for the call to getdisplaymedia(). it adds the cursor constraint only if it is known to be supported by the browser. capturing is then started by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. ...
...tarted by calling getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem. async function capturewithcursor() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.cursor' in that specification. unknown initial definition ...

msSetMediaProtectionManager - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mssetmediaprotectionmanager method specifies the media protection manager for a given media pipeline. this proprietary method is specific to internet explorer and microsoft edge. ...
.... do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mssetmediaprotectionmanager method specifies the media protection manager for a given media pipeline. this proprietary method is specific to internet explorer and microsoft edge. syntax htmlmediaelement.mssetmediaprotectionmanager(mediaprotectionmanager); parameters the windows.media.protection namespace provides classes to manage digital rights management (drm) media contents. ...
... return value this method does not return a value. ...
...ia protection manager for a given media pipeline. this proprietary method is specific to internet explorer and microsoft edge. syntax htmlmediaelement.mssetmediaprotectionmanager(mediaprotectionmanager); parameters the windows.media.protection namespace provides classes to manage digital rights management (drm) media contents. the mediaprotectionmanager class can be passed as an input to a media playback api or the mediaprotectionmanager property inside the tag's video or audio. the optional parameter of the mssetmediaprotectionmanager property is mediaprotectionmanager and can be any type. return value this method does not return a value. ...

Navigator.mediaSession - Web APIs
the read-only navigator property mediasession returns a mediasession object that can be used to share with the browser metadata and other information about the current playback state of media being handled by a document. this information may, in turn, be shared with the device and/or operating system in order to a device's standard media control user experience to describe and control the playback of the media. in addition, the mediasession interface provides the setactionhandler() method, which lets you receive events when the user engages device controls such as either onscreen or physical play, pause, seek, and other similar controls. ...
...e's standard media control user experience to describe and control the playback of the media. in addition, the mediasession interface provides the setactionhandler() method, which lets you receive events when the user engages device controls such as either onscreen or physical play, pause, seek, and other similar controls. an internet radio app, for example, can use setactionhandler() to let fhe media controls on a keyboard or elsehwere on the user's device be used to control the app's media playback. syntax let mediasession = navigator.mediasession; value a mediasession object the current document can use to share information about media it's playing and its current playback status. this information can include typical metadata such as the title, artist, and album name of the song being p...
...diasession object the current document can use to share information about media it's playing and its current playback status. this information can include typical metadata such as the title, artist, and album name of the song being played as well as potentially one or more images containing things like album art, artist photos, and so forth. example in this example, metadata is submitted to the mediasession object. note that the code begins by ensuring that the navigator.mediasession property is available before attempting to use it. ...
...nclude typical metadata such as the title, artist, and album name of the song being played as well as potentially one or more images containing things like album art, artist photos, and so forth. example in this example, metadata is submitted to the mediasession object. note that the code begins by ensuring that the navigator.mediasession property is available before attempting to use it. if ("mediasession" in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); } specifications specification status comment media session standardthe definition of 'navigator.mediasession' in that specification. draft initial de...

media - SVG: Scalable Vector Graphics
if not specified, the style sheet is applied unconditionally. ...
... if not specified, the style sheet is applied unconditionally. ...
...attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied. ...
...ue <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied. if not specified, the style sheet is applied unconditionally. specifications specification status comment scalable vector graphics (svg) 2the definition of 'media' in that specification. candidate recommendation changed the value definition from different media types as defined in css 2 to <media-query-list>. scalable vector graphics (svg) 1.1 (second edition)the definition of 'media' in that specification. recommendation initial definition ...

Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine. typically, this is a screen—but it may also be a printer, a speech synthesizer, braille display, or another type of device. css offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device. ...
...t may also be a printer, a speech synthesizer, braille display, or another type of device. css offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device. ...
...esizer, braille display, or another type of device. css offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device. learn more general knowledge using media queries technical reference media queries define a set of characteristics or parameters required to apply the css styles that are specified within the curly braces of the media query; for example: only applying certain css styles for devices below 768 pixels. @media at-rule conditionally apply part of a stylesheet, based on the result of a media query. window.matchmedia() test the viewing device against a media query. ...

Images, media, and form elements - Learn web development
understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know. ...
...forms advanced form styling test your skills! we have covered a lot in this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: images and form elements. summary this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders ha...
... when you have to style html tables. ...

Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website. we have already taken a look at optimizing images. this article looks at optimizing video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential...
...smallest version, make sure that the most compressed video still looks good. there are some compression algorithms that can make video look (bad) like an animated gif. while a 128 kb video may seem like it could provide a better user experience than a 10 mb download, a grainy gif-like video may reflect poorly on the brand or project. see caniuse.com for current browser support of video and other media types. video autoplay to ensure that a looping background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline. <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers. playsinlin...
...re relatively large compared to other website files, and always worthy of attention. this article explains how to optimize website video through reducing file size, with (html) download settings, and with streaming. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance features fonts and performance mobile performance focusing on performance ...

CSSMediaRule - Web APIs
the cssmediarule interface represents a single css @media rule. it implements the cssconditionrule interface, and therefore the cssgroupingrule and the cssrule interface with a type value of 4 (cssrule.media_rule). syntax the syntax is described using the webidl format. interface cssmediarule : cssconditionrule { readonly attribute medialist media; } properties as a cssconditionrule, and therefore both a cssgroupingrule and a cssrule, cssmediarule also implements the properties of these interfaces. it has the following specific property: cssmediarule.media read only specifies a medialist representing the intended destination medium for style information. ...
...rties as a cssconditionrule, and therefore both a cssgroupingrule and a cssrule, cssmediarule also implements the properties of these interfaces. it has the following specific property: cssmediarule.media read only specifies a medialist representing the intended destination medium for style information. methods as a cssconditionrule, and therefore both a cssgroupingrule and a cssrule, cssmediarule also implements the methods of that interface. it has no specific methods. specifications specification status comment css conditional rules module level 3the definition of 'cssmediarule' in that specification. ...
...e and a cssrule, cssmediarule also implements the methods of that interface. it has no specific methods. specifications specification status comment css conditional rules module level 3the definition of 'cssmediarule' in that specification. candidate recommendation make it derived from the cssconditionrule. css object model (cssom)the definition of 'cssmediarule' in that specification. working draft no changes from document object model (dom) level 2 style specification document object model (dom) level 2 style specificationthe definition of 'cssmediarule' in that specification. obsolete ...

DisplayMediaStreamConstraints - Web APIs
the displaymediastreamconstraints dictionary is used to specify whether or not to include video and/or audio tracks in the mediastream to be returned by getdisplaymedia(), as well as what type of processing must be applied to the tracks. processing information is specified using mediatrackconstraints objects providing options which are applied to the track after the media data is received but before it is made available on the mediastream. properties audio a boolean or mediatrackconstraints value; if a boolean, this value simply indicates whether or not to include an audio track in the mediastream returned by getdisplaymedia(). ...
...ng information is specified using mediatrackconstraints objects providing options which are applied to the track after the media data is received but before it is made available on the mediastream. properties audio a boolean or mediatrackconstraints value; if a boolean, this value simply indicates whether or not to include an audio track in the mediastream returned by getdisplaymedia(). if a mediatrackconstraints object is provided here, an audio track is included in the stream, but the audio is processed to match the specified constraints after being retrieved from the hardware but before being added to the mediastream. the default value is false. video if true (the default), the display contents are included in a mediastreamtrack within the stream provided by getdisplaymedia(). optiona...
...nstraints object is provided here, an audio track is included in the stream, but the audio is processed to match the specified constraints after being retrieved from the hardware but before being added to the mediastream. the default value is false. video if true (the default), the display contents are included in a mediastreamtrack within the stream provided by getdisplaymedia(). optionally, a mediatrackconstraints object may be given, providing options specifying processing to be performed on the video data before adding it to the stream. a value of false is not permitted, and results in a typeerror being thrown. specifications specification status comment unknownthe definition of 'displaymediastreamconstraints' in that specification. unknown initial definit...

Encrypted Media Extensions API - Web APIs
the encrypted media extensions api provides interfaces for controlling the playback of content which is subject to a digital restrictions management scheme. interfaces mediakeymessageevent contains the content and related data when the content decryption module (cdm) generates a message for the session. mediakeys represents a set of keys that an associated htmlmediaelement can use for decryption of media data during playback. mediakeysession represents a context for message exchange with a content decryption module (cdm). mediakeystatusmap is a read-only map of media key statuses by key ids. mediakeysystemaccess provides access to a key system for decryption and/or a content protection provider. ...
... represents a set of keys that an associated htmlmediaelement can use for decryption of media data during playback. mediakeysession represents a context for message exchange with a content decryption module (cdm). mediakeystatusmap is a read-only map of media key statuses by key ids. mediakeysystemaccess provides access to a key system for decryption and/or a content protection provider. mediakeysystemconfiguration provides configuration information about the media key system. ...
...nge with a content decryption module (cdm). mediakeystatusmap is a read-only map of media key statuses by key ids. mediakeysystemaccess provides access to a key system for decryption and/or a content protection provider. mediakeysystemconfiguration provides configuration information about the media key system. ...

HTMLMediaElement.canPlayType() - Web APIs
the htmlmediaelement method canplaytype() reports how likely it is that the current browser will be able to play media of a given mime type. note: this feature is not available in web workers. syntax canplayresponse = audioorvideo.canplaytype(mediatype); parameters mediatype a domstring containing the mime type of the media. return value a domstring indicating how likely it is that the media can be played. the string will be one of the following values: probably media of the type indicated by the mediatype parameter is probably playable on this device. maybe not enough information is available to determine for sure whether or not the media will play until playback is actually attempted. ...
.... return value a domstring indicating how likely it is that the media can be played. the string will be one of the following values: probably media of the type indicated by the mediatype parameter is probably playable on this device. maybe not enough information is available to determine for sure whether or not the media will play until playback is actually attempted. "" (empty string) media of the given type definitely can't be played on the current device. example var obj = document.createelement('video'); console.log(obj.canplaytype('video/mp4')); // "maybe" specifications specification status comment html living standardthe definition of 'canplaytype' in that specification. ...
...ty string) media of the given type definitely can't be played on the current device. example var obj = document.createelement('video'); console.log(obj.canplaytype('video/mp4')); // "maybe" specifications specification status comment html living standardthe definition of 'canplaytype' in that specification. living standard html5the definition of 'htmlmediaelement.canplaytype' in that specification. recommendation initial definition. ...

HTMLMediaElement: canplay event - Web APIs
the canplay event is 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. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplay specification html5 media examples these examples add an event listener for the htmlmediaelement's canplay event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play thr...
... recommendation ...
... recommendation ...

HTMLMediaElement: canplaythrough event - Web APIs
the canplaythrough event is 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. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplaythrough specification html5 media examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplaythrough', (event) => { console.log('i think i can play thr...
... recommendation ...
... recommendation ...

HTMLMediaElement.controls - Web APIs
recommendation initial definition. ...
... recommendation initial definition. ...
...rols whether user interface controls for playing the media item will be displayed. syntax var ctrls = video.controls; audio.controls = true; value a boolean. a value of true means controls will be displayed. example var obj = document.createelement('video'); obj.controls = true; specifications specification status comment html living standardthe definition of 'htmlmediaelement.controls' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.controls' in that specification. recommendation initial definition. ...

HTMLMediaElement.currentTime - Web APIs
the htmlmediaelement interface's currenttime property specifies the current playback time in seconds. changing the value of currenttime this value seeks the media to the new time. syntax var currenttime = htmlmediaelement.currenttime; htmlmediaelement.currenttime = 35; value a double-precision floating-point value indicating the current playback time in seconds. if the media is not yet playing, the value of currenttime indicates the time position within the media at which playback will begin once the play() method is called. setting currenttime to a new value seeks the media to the given time, if the media is available. ...
...lmediaelement.currenttime = 35; value a double-precision floating-point value indicating the current playback time in seconds. if the media is not yet playing, the value of currenttime indicates the time position within the media at which playback will begin once the play() method is called. setting currenttime to a new value seeks the media to the given time, if the media is available. for media without a known duration—such as media being streamed live—it's possible that the browser may not be able to obtain parts of the media that have expired from the media buffer. also, media whose timeline doesn't begin at 0 seconds cannot be seeked to a time before its timeline's earliest time. the length of the media in seconds can be determined using the duration property. example var vide...
... the duration property. example var video = document.createelement('video'); console.log(video.currenttime); usage notes reduced time precision to offer protection against timing attacks and fingerprinting, browsers may round or otherwise adjust the value returned by currenttime. specifications specification status comment html living standardthe definition of 'htmlmediaelement.currenttime' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.currenttime' in that specification. recommendation initial definition. ...

HTMLMediaElement: durationchange event - Web APIs
the durationchange event is fired when the duration attribute has been updated. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ondurationchange specification html5 media examples these examples add an event listener for the htmlmediaelement's durationchange event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('durationchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselecto...
... recommendation ...
... recommendation ...

HTMLMediaElement: ended event - Web APIs
the ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. this event occurs based upon htmlmediaelement (<audio> and <video>) fire ended when playback of the media reaches the end of the media. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onended specification html5 media this event is also defined in media capture and streams and web audio api examples these examples add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const...
... recommendation ...
... recommendation ...

HTMLMediaElement.initialTime - Web APIs
syntax ... value a double. example ... ...
... syntax ... value a double. example ... ...
... syntax ... value a double. example ... ...

HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings. examples these examples add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadeddata', (event) => { console.log('yay...
... recommendation ...
... recommendation ...

HTMLMediaElement: loadedmetadata event - Web APIs
the loadedmetadata event is fired when the metadata has been loaded. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadedmetadata specification html5 media additional properties property type description mozchannels read only int the number of channels. ...
...ation html5 media additional properties property type description mozchannels read only int the number of channels. mozsamplerate read only int the sample rate per second. mozframebufferlength read only int the number of samples collected in all channels. examples these examples add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }); using the onloadedmetadata event handler property: const ...
... video = document.queryselector('video'); video.addeventlistener('loadedmetadata', (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }); using the onloadedmetadata event handler property: const video = document.queryselector('video'); video.onloadedmetadata = (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known. '); }; specifications specification status html living standardthe definition of 'loadedmetadata media event' in that specification. living standard html5the definition of 'canplay media event' in that specification. recommendation ...

HTMLMediaElement: loadstart event - Web APIs
recommendation ...
... recommendation ...
...'src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart media event' in that specification. living standard html5the definition of 'loadstart media event' in that specification. recommendation ...

HTMLMediaElement.onwaitingforkey - Web APIs
this interface inherits from the extendableevent interface. ...
...aco,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="/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;} syntax htmlmediaeleme...
... recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...

HTMLMediaElement: pause event - Web APIs
the pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method. the event is sent once the pause() method returns and after the media element's paused property has been changed to true. general info bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onpause specification html5 media examples these examples add an event listener for the htmlmediaelement's pause event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = docum...
... recommendation ...
...ueryselector('video'); video.onpause = (event) => { console.log('the boolean paused property is now true. either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'pause media event' in that specification. living standard html5the definition of 'pause media event' in that specification. recommendation ...

HTMLMediaElement: play event - Web APIs
the play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplay specification html5 media examples these examples add an event listener for the htmlmediaelement's play event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('play', (event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.
... recommendation ...
...ment.queryselector('video'); video.onplay = (event) => { console.log('the boolean paused property is now false. either the ' + 'play() method was called or the autoplay attribute was toggled.'); }; specifications specification status html living standardthe definition of 'play media event' in that specification. living standard html5the definition of 'play media event' in that specification. recommendation ...

HTMLMediaElement.playbackRate - Web APIs
the htmlmediaelement.playbackrate property sets the rate at which the media is being played back. this is used to implement user controls for fast forward, slow motion, and so forth. the normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed. if playbackrate is negative, the media is not played backwards. the audio is muted when the fast forward or slow motion is outside a useful range (for example, gecko mutes the sound outside the range 0.25 to 5.0). the pitch of the audio is corrected by default and is the same for every speed. some browsers implement the non-standard htmlmediaelement.preservespitch property to control this. syntax // video video.playbackrate = 1.5; // audio audio.playbackrate = 1.0; value a double. 1.
...or example, gecko mutes the sound outside the range 0.25 to 5.0). the pitch of the audio is corrected by default and is the same for every speed. some browsers implement the non-standard htmlmediaelement.preservespitch property to control this. syntax // video video.playbackrate = 1.5; // audio audio.playbackrate = 1.0; value a double. 1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster. (default: 1.0) example var obj = document.createelement('video'); console.log(obj.playbackrate); // expected output: 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.playbackrate' in that specification. living standard html5the definition...
...wer than normal, higher values make it play faster. (default: 1.0) example var obj = document.createelement('video'); console.log(obj.playbackrate); // expected output: 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.playbackrate' in that specification. living standard html5the definition of 'htmlmediaelement.playbackrate' in that specification. recommendation ...

HTMLMediaElement: playing event - Web APIs
the playing event is fired when playback is ready to start after having been paused or delayed due to lack of data. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplaying specification html5 media examples these examples add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onpl...
... recommendation ...
... recommendation ...

HTMLMediaElement: progress event - Web APIs
recommendation ...
... recommendation ...
...ibute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media event' in that specification. living standard html5the definition of 'progress media event' in that specification. recommendation ...

HTMLMediaElement: ratechange event - Web APIs
the ratechange event is fired when the playback rate has changed. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onratechange specification html5 media examples these examples add an event listener for the htmlmediaelement's ratechange event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log...
... recommendation ...
... recommendation ...

HTMLMediaElement.seekToNextFrame() - Web APIs
the htmlmediaelement.seektonextframe() method asynchronously advances the the current play position to the next frame in the media. this non-standard method is part of an experimentation process around support for non-real-time access to media for tasks including filtering, editing, and so forth. you should not use this method in production code, because its implementation may change—or be removed outright—without notice. you are, however, invited to experiment with it. this method lets you access frames of video media without the media being performed in real time. this also lets you access media using frames as a seek unit rather than timecodes (albeit only by seeking one frame at a time until you get to the frame you want). possible uses for this method include filtering and edit...
...er, invited to experiment with it. this method lets you access frames of video media without the media being performed in real time. this also lets you access media using frames as a seek unit rather than timecodes (albeit only by seeking one frame at a time until you get to the frame you want). possible uses for this method include filtering and editing of video content. this method returns immediately, returning a promise, whose fulfillment handler is called when the seek operation is complete. in addition, a seeked event is sent to let interested parties know that a seek has taken place. ...
...y seeking one frame at a time until you get to the frame you want). possible uses for this method include filtering and editing of video content. this method returns immediately, returning a promise, whose fulfillment handler is called when the seek operation is complete. in addition, a seeked event is sent to let interested parties know that a seek has taken place. if the seek fails because the media is already at the last frame, a seeked event occurs, followed immediately by an ended event. if there is no video on the media element, or the media isn't seekable, nothing happens. syntax var seekcompletepromise = htmlmediaelement.seektonextframe(); htmlmediaelement.seektonextframe(); return value a promise which is fulfilled once the seek operation has completed. firefox 49 returns und...

HTMLMediaElement: seeked event - Web APIs
the seeked event is fired when a seek operation completed, the current playback position has changed, and the boolean seeking attribute is changed to false. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeked specification html5 media examples these examples add an event listener for the htmlmediaelement's seeked event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler prop...
... recommendation ...
... recommendation ...

HTMLMediaElement: seeking event - Web APIs
the seeking event is fired when a seek operation starts, meaning the boolean seeking attribute has changed to true and the media is seeking a new position. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeking specification html5 media examples these examples add an event listener for the htmlmediaelement's seeking event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video...
... recommendation ...
... recommendation ...

HTMLMediaElement.setSinkId() - Web APIs
the htmlmediaelement.setsinkid() method sets the id of the audio device to use for output and returns a promise. this only works when the application is authorized to use the specified device. syntax htmlmediaelement.setsinkid(sinkid).then(function() { ... }) returns a promise that resolves to undefined. parameters sinkid the mediadeviceinfo.deviceid of the audio output device. ...
...rized to use the specified device. syntax htmlmediaelement.setsinkid(sinkid).then(function() { ... }) returns a promise that resolves to undefined. parameters sinkid the mediadeviceinfo.deviceid of the audio output device. ...
... ...

HTMLMediaElement: stalled event - Web APIs
the stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onstalled specification html5 media examples these examples add an event listener for the htmlmediaelement's stalled event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video');...
... recommendation ...
... recommendation ...

HTMLMediaElement: suspend event - Web APIs
the suspend event is fired when media data loading has been suspended. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onsuspend specification html5 media examples these examples add an event listener for the htmlmediaelement's suspend event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('da...
... recommendation ...
... recommendation ...

HTMLMediaElement: volumechange event - Web APIs
the volumechange event is fired when the volume has changed. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onvolumechange specification html5 media examples these examples add an event listener for the htmlmediaelement's volumechange event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('volumechange', (event) => { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('...
... recommendation ...
... recommendation ...

HTMLMediaElement: waiting event - Web APIs
the waiting event is fired when playback has stopped because of a temporary lack of data. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onwaiting specification html5 media examples these examples add an event listener for the htmlmediaelement's waiting event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('waiting', (event) => { console.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => {...
... recommendation ...
... recommendation ...

LocalMediaStream - Web APIs
the localmediastream interface was part of the media capture and streams api, representing a stream of data being generated locally (such as by getusermedia(). however, getusermedia() now returns a mediastream instead, and this interface has been removed from the specification. warning: this interface is no longer available in any mainstream browser. do not use localmediastream; you need to update any code that does use it as soon as possible or your content or application will stop working. see stopping a video stream in mediastreamtrack to learn how. all other functionality is found in mediastream. the primary reason for this interface to exist was to add a stop() method to its mediastream parent interface. ...
... not use localmediastream; you need to update any code that does use it as soon as possible or your content or application will stop working. see stopping a video stream in mediastreamtrack to learn how. all other functionality is found in mediastream. the primary reason for this interface to exist was to add a stop() method to its mediastream parent interface. however, control over playback of media has been moved to the individual mediastreamtrack objects, so this is no longer necessary. instead, media is stopped by calling mediastreamtrack.stop() on each track that needs to be stopped. the example for mediastreamtrack.stop() demonstrates how to stop a multi-track stream, which is what localmediastream.stop() used to be used for. methods localmediastream.stop() stops the stream. when t...
... instead, media is stopped by calling mediastreamtrack.stop() on each track that needs to be stopped. the example for mediastreamtrack.stop() demonstrates how to stop a multi-track stream, which is what localmediastream.stop() used to be used for. methods localmediastream.stop() stops the stream. when the source of the stream is a connected device (such as a camera or microphone), capture of media from the device is halted. this method is no longer available with the deprecation of localmediastream. see stopping a video stream in mediastreamtrack to learn how to stop an entire stream. specifications not part of any specification. this interface was previously part of media capture and streams but was removed in 2013. ...

MediaDeviceInfo.deviceId - Web APIs
candidate recommendation initial definition. ...
... candidate recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... is persisted across sessions. it is un-guessable by other applications, and unique to the origin of the calling application. it is reset when the user clears cookies. for private browsing, a different identifier is used that is not persisted across sessions. syntax var deviceid = mediadeviceinfo.deviceid value a domstring. specifications specification status comment media capture and streamsthe definition of 'deviceid' in that specification. candidate recommendation initial definition. browser compatibility 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. desktopmobilechromeedgefirefoxinternet explo...

MediaError.code - Web APIs
the read-only property mediaerror.code returns a numeric value which represents the kind of error that occurred on a media element. to get a text string with specific diagnostic information, see mediaerror.message. syntax var myerror = mediaerror.code; value a numeric value indicating the general type of error which occurred. the possible values are described below, in media error code constants. media error code constants name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. ...
...below, in media error code constants. media error code constants name value description media_err_aborted 1 the fetching of the associated resource was aborted by the user's request. media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available. media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error. media_err_src_not_supported 4 the associated resource or media provider object (such as a mediastream) has been found to be unsuitable. example this example creates a <video> element, establishes an error handler for ...
...media provider object (such as a mediastream) has been found to be unsuitable. example this example creates a <video> element, establishes an error handler for it, and then sets the element's src attribute to the video resource to present in the element. the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; specifications specification status comment html living standardthe definition of 'mediaerror.code' in that specification. living standard initial definition ...

MediaKeySession.onkeystatuseschange - Web APIs
this interface inherits from the extendableevent interface. ...
...t="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="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysessi...
...="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ... } specifications specification status comment encrypted media extensionsthe definition of 'onkeystatuseschange' in that specification. recommendation initial definition. ...

MediaKeyStatusMap - Web APIs
the mediakeystatusmap interface of the encryptedmediaextensions api is a read-only map of media key statuses by key ids. properties mediakeystatusmap.size read only returns the number of key/value pars in the status map. methods mediakeystatusmap.entries() read only returns a new iterator object containing an array of [key, value] for each element in the status map, in insertion order. mediakeystatusmap.foreach(callback[, argument]) read only calls callback once for each key-value pair in the status map, in insertion order. if argument is present it will be passed to the callback. mediakeystatusmap.get() read only returns the value associated with the given key, or undefined if there is none. ...
...n array of [key, value] for each element in the status map, in insertion order. mediakeystatusmap.foreach(callback[, argument]) read only calls callback once for each key-value pair in the status map, in insertion order. if argument is present it will be passed to the callback. mediakeystatusmap.get() read only returns the value associated with the given key, or undefined if there is none. mediakeystatusmap.has() read only returns a boolean asserting whether a value has been associated with the given key. mediakeystatusmap.keys() read only returns a new iterator object containing keys for each element in the status map, in insertion order. mediakeystatusmap.values() read only returns a new iterator object containing values for each element in the status map, in insertion order. ...
...keystatusmap.has() read only returns a boolean asserting whether a value has been associated with the given key. mediakeystatusmap.keys() read only returns a new iterator object containing keys for each element in the status map, in insertion order. mediakeystatusmap.values() read only returns a new iterator object containing values for each element in the status map, in insertion order. mediakeystatusmap.[@@iterator]() read only returns a new iterator object containing an array of [key, value] for each element in the status map, in insertion order. specifications specification status comment encrypted media extensionsthe definition of 'mediakeystatusmap' in that specification. recommendation initial definition. ...

MediaList - Web APIs
the medialist interface represents the media queries of a stylesheet, e.g. those set using a <link> element's media attribute. note: medialist is a live list; updating the list using properties or methods listed below will immediately update the behavior of the document. properties medialist.mediatext a stringifier that returns a domstring representing the medialist as text, and also allows you to set a new medialist. medialist.length read only returns the number of media queries in the medialist. methods medialist.appendmedium() adds a media query to the medialist. medialist.deletemedium() removes a media query from the medialist. ...
...the document. properties medialist.mediatext a stringifier that returns a domstring representing the medialist as text, and also allows you to set a new medialist. medialist.length read only returns the number of media queries in the medialist. methods medialist.appendmedium() adds a media query to the medialist. medialist.deletemedium() removes a media query from the medialist. medialist.item() a getter that returns a cssomstring representing a media query as text, given the media query's index value inside the medialist. examples the following would log to the console a textual representation of the medialist of the first stylesheet applied to the current document. ...
.... medialist.item() a getter that returns a cssomstring representing a media query as text, given the media query's index value inside the medialist. examples the following would log to the console a textual representation of the medialist of the first stylesheet applied to the current document. const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'medialist' in that specification. working draft ...

MediaMetadata - Web APIs
the mediametadata interface of the the media session api provides allows a web page to provide rich media metadata for display in a platform ui. constructor mediametadata.mediametadata() creates a new mediametadata object. properties mediametadata.title returns or sets the title of the media to be played. mediametadata.artist returns or sets the name of the artist, group, creator, etc. of the media to be played. mediametadata.album returns or sets the name of the album or collection containing the media to be played. mediametadata.artwork returns or sets an array of images associated with playing media. specifications specification status comment media session standardthe definition of 'mediametadata' in that specification. draft initial def...
...efinition. browser compatibility 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. ...
... webview android no support nochrome android full support 57firefox android ? opera android no support nosafari ios ? samsung internet android full support 7.0mediametadata() constructor experimentalchrome full support 57edge no support nofirefox full support 71ie no support noopera full support yessafari ? ...

MediaPositionState.duration - Web APIs
the mediapositionstate dictionary's duration property is used when calling the mediasession method setpositionstate() to provide the user agent with the overall total duration in seconds of the media currently being performed. this information can then, in turn, be used by the user agent to provide a user interface which displays media playback information to the viewer. for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { duration: durationinseconds }; let durationinseconds = positionstate.duration; ...
...n.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls. syntax let positionstate = { duration: durationinseconds }; let durationinseconds = positionstate.duration; value a floating-point value indicating the overall duration, in seconds, of the media being performed. this value should always be positive. to indicate media of unknown or indeterminate length, such as an ongoing live stream, specify a value of positive infinity (infinity). example in this example, an app performing a live stream provides information to the browser by preparing a mediapositionstate object and submitting it by calling navigator.mediasession.setpositionstate(). ...
...inate length, such as an ongoing live stream, specify a value of positive infinity (infinity). example in this example, an app performing a live stream provides information to the browser by preparing a mediapositionstate object and submitting it by calling navigator.mediasession.setpositionstate(). let positionstate = { duration: infinity; playbackrate: 1.0; position: 0.0; }; navigator.mediasession.setpositionstate(positionstate); specifications specification status comment media session standardthe definition of 'mediapositionstate.duration' in that specification. draft initial definition. ...

MediaQueryList.addListener() - Web APIs
the addlistener() method of the mediaquerylist interface adds a listener to the mediaquerylistener that will run a custom callback function in response to the media query status changing. this is basically an alias for eventtarget.addeventlistener(), for backwards compatibility purposes. older browsers should use addlistener instead of addeventlistener since mediaquerylist only inherits from eventtarget in newer browsers. syntax mediaquerylist.addlistener(func) parameters func a function or function reference representing the callback function you want to run when the media query status changes. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, the callback is a standard functio...
...x mediaquerylist.addlistener(func) parameters func a function or function reference representing the callback function you want to run when the media query status changes. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a mediaquerylistevent, which inherits from event. return value void. ...
...en the media query status changes. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a mediaquerylistevent, which inherits from event. return value void. ...

MediaQueryListEvent - Web APIs
the mediaquerylistevent object stores information on the changes that have happened to a mediaquerylist object — instances are available as the event object on a function referenced by a mediaquerylist.onchange property or mediaquerylist.addlistener() call. constructor mediaquerylistevent() creates a new mediaquerylistevent instance. properties the mediaquerylistevent interface inherits properties from its parent interface, event. mediaquerylistevent.matchesread only a boolean that returns true if the document currently matches the media query list, or false if not. mediaquerylistevent.mediaread only a domstring representing a serialized media query. methods the mediaquerylistevent interface inherits methods from its parent interface, event. examples var mql = wind...
...from its parent interface, event. mediaquerylistevent.matchesread only a boolean that returns true if the document currently matches the media query list, or false if not. mediaquerylistevent.mediaread only a domstring representing a serialized media query. methods the mediaquerylistevent interface inherits methods from its parent interface, event. ...
... working draft initial definition ...

MediaRecorder.requestData() - Web APIs
the mediarecorder.requestdata() method (part of the mediarecorder api) is used to raise a dataavailable event containing a blob object of the captured media as it was when the method was called. this can then be grabbed and manipulated as you wish. when the requestdata() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is not "recording", raise a dom invalidstate error and terminate these steps. if mediarecorder.state is "recording", continue to the next step. raise a dataavailable event containing a blob of the currently captured data (the blob is available under the event's data attribute.) create a new blob and place subsequently captured data into it. ...
...e following steps: if mediarecorder.state is not "recording", raise a dom invalidstate error and terminate these steps. if mediarecorder.state is "recording", continue to the next step. raise a dataavailable event containing a blob of the currently captured data (the blob is available under the event's data attribute.) create a new blob and place subsequently captured data into it. syntax mediarecorder.requestdata() errors an invalidstate error is raised if the requestdata() method is called while the mediarecorder object’s mediarecorder.state is not "recording" — the media cannot be captured if recording is not occurring. example ... ...
...he blob is available under the event's data attribute.) create a new blob and place subsequently captured data into it. syntax mediarecorder.requestdata() errors an invalidstate error is raised if the requestdata() method is called while the mediarecorder object’s mediarecorder.state is not "recording" — the media cannot be captured if recording is not occurring. example ... capturemedia.onclick = function() { mediarecorder.requestdata(); // makes snapshot available of data so far // ondataavailable fires, then capturing continues // in new blob } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.requestdata()' in that specification. working draft initial definition ...

MediaSession.playbackState - Web APIs
the playbackstate property of the mediasession interface indicates whether the current media session is playing or paused. syntax let playbackstate = mediasession.playbackstate; mediasession.playbackstate = playbackstate; value a domstring indicating the current playback state of the media session. the value may be one of the following: none the browsing context doesn't currently know the current playback state, or the playback state is not available at this time. paused the browser's media session is currently paused. playback may be resumed. playing the browser's media session is currently playing media, which can be paused. example the following example sets up event handlers, for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; na...
...back state, or the playback state is not available at this time. paused the browser's media session is currently paused. playback may be resumed. playing the browser's media session is currently playing media, which can be paused. ...
...his time. paused the browser's media session is currently paused. playback may be resumed. playing the browser's media session is currently playing media, which can be paused. example the following example sets up event handlers, for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status comment media session standardthe definition of 'playbackstate' in that specification. draft initial defini...

MediaSessionActionDetails.action - Web APIs
the action property is the only required property mediasessionactiondetails dictionary, specifying the type of media session action which the action handler callback is being executed for. syntax let mediasessionactiondetails = { action: actiontype }; let actiontype = mediasessionactiondetails.action; value a domstring specifying which of the action types the callback is being invoked for: nexttrack advances playback to the next track. pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. seekforward seeks forward from the current position through the media. seekto moves the playback position to the specified time within the ...
...track advances playback to the next track. pause pauses playback of the media. play begins (or resumes) playback of the media. previoustrack moves back to the previous track. seekbackward seeks backward through the media from the current position. seekforward seeks forward from the current position through the media. seekto moves the playback position to the specified time within the media. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback entirely. ...
...eekto moves the playback position to the specified time within the media. skipad skips past the currently playing advertisement or commercial. this action may or may not be available, depending on the platform and user agent, or may be disabled due to subscription level or other circumstances. stop halts playback entirely. specifications specification status comment media session standardthe definition of 'mediasessionactiondetails.action' in that specification. draft initial definition. ...

MediaSessionActionDetails.fastSeek - Web APIs
the boolean property fastseek in the mediasessionactiondetails dictionary is an optional value which, when specified and true, indicates that the requested seekto operation is part of an ongoing series of seekto operations. your handler should take steps to return as quickly as possible by skipping any steps of its operation which are only necessary when the seek operation is complete. once fastseek is false or not present, the repeating series of seekto actions is complete and you can finalize the state of your web app or content. ...
...ted seekto operation is part of an ongoing series of seekto operations. your handler should take steps to return as quickly as possible by skipping any steps of its operation which are only necessary when the seek operation is complete. once fastseek is false or not present, the repeating series of seekto actions is complete and you can finalize the state of your web app or content. syntax let mediasessionactiondetails = { fastseek: shouldfastseek }; let shouldfastseek = mediasessionactiondetails.fastseek; value a boolean which is true if the action is part of an ongoing series of seek actions which should be treated as part of an overall seek operation. if the value is false or this property isn't present, the seek is final. specifications specification status comment ...
...ctiondetails = { fastseek: shouldfastseek }; let shouldfastseek = mediasessionactiondetails.fastseek; value a boolean which is true if the action is part of an ongoing series of seek actions which should be treated as part of an overall seek operation. if the value is false or this property isn't present, the seek is final. specifications specification status comment media session standardthe definition of 'mediasessionactiondetails.fastseek' in that specification. draft initial definition. ...

MediaSessionActionDetails.seekOffset - Web APIs
the mediasessionactiondetails dictionary's seekoffset property is an optional value passed into the action handler callback to provide the number of seconds the seekforward and seekbackward actions should move the playback time by. syntax let mediasessionactiondetails = { seekoffset: deltatimeinseconds }; let deltatime = mediasessionactiondetails.seekoffset; value a floating-point value indicating the time delta in seconds by which to move the playback position relative to its current timestamp. if the offset isn't specified, the user agent will choose an appropriate offset automatically. this is typically in the range of five to ten seconds. ...
... draft initial definition. ...
...lue a floating-point value indicating the time delta in seconds by which to move the playback position relative to its current timestamp. if the offset isn't specified, the user agent will choose an appropriate offset automatically. this is typically in the range of five to ten seconds. specifications specification status comment media session standardthe definition of 'mediasessionactiondetails.seekoffset' in that specification. draft initial definition. ...

MediaSessionActionDetails.seekTime - Web APIs
the mediasessionactiondetails dictionary's seektime property is always included when a seekto action is sent to the action handler callback. its value is the absolute time, in seconds, to move the current play position to. to change the time by an offset rather than moving to an absolute time, the seekforward or seekbackward actions should be used instead. syntax let mediasessionactiondetails = { seektime: abstimeinseconds }; let abstime = mediasessionactiondetails.seektime; value a floating-point value indicating the absolute time in seconds into the media to which to move the current play position. usage notes to perform a "fast" seek (such as when issuing multiple seekto actions in sequence while handling a scrubbing operation, the details object's fastseek property's value is set ...
... draft initial definition. ...
...ize or eliminate anything you do while handling the action that is only necessary at the final step. if the value of fastseek is false, or fastseek is missing, the action should be treated as the final action of the operation, and you should finalize any details that need to be handled. specifications specification status comment media session standardthe definition of 'mediasessionactiondetails.seektime' in that specification. draft initial definition. ...

MediaSource.duration - Web APIs
the duration property of the mediasource interface gets and sets the duration of the current media being presented. syntax mediasource.duration = 5.5; // 5.5 seconds var myduration = mediasource.duration; value a double. a value in seconds is expected. exceptions the following exceptions may be thrown when setting a new value for this property. exception explanation invalidaccesserror an attempt was made to set a duration value that was negative, or nan. invalidstateerror mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e. their sourcebuffer.updating property is true.) example the following snippet is based on a simple example written by nic...
... to open, or one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e. their sourcebuffer.updating property is true.) example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); mediasource.duration = 120; video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ... specifications ...
...rce.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); mediasource.duration = 120; video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ... specifications specification status comment media source extensionsthe definition of 'duration' in that specification. recommendation initial definition. ...

MediaStream.onaddtrack - Web APIs
the mediastream.onaddtrack property is an eventhandler which specifies a function to be called when the addtrack event occurs on a mediastream instance. this happens when a new track of any kind is added to the media stream. this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source. the addtrack event does not get fired when javascript code explicitly adds tracks to the stream (by calling addtrack()). ...
.... this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source. the addtrack event does not get fired when javascript code explicitly adds tracks to the stream (by calling addtrack()). syntax mediastream.onaddtrack = eventhandler; value this should be set to a function which you provide that accepts as input a mediastreamtrackevent object representing the addtrack event which has occurred. the mediastreamtrack representing the track which was added is specified in the event's track property. example this example adds a listener which, when a new track is added to the stream, appends a ...
...o a list of tracks; the new item shows the track's kind ("audio" or "video") and label. stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification. candidate recommendation initial specification. ...

MediaStream.onremovetrack - Web APIs
the mediastream.onremovetrack property is an eventhandler which specifies a function to be called when the removetrack event occurs on a mediastream instance. this happens when a track of any kind is removed from the media stream. this event is fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source. the removetrack event does not get fired when javascript code explicitly removes tracks from the stream (by calling removetrack()). ...
...fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source. the removetrack event does not get fired when javascript code explicitly removes tracks from the stream (by calling removetrack()). syntax mediastream.onremovetrack = eventhandler; value this should be set to a function which you provide that accepts as input a mediastreamtrackevent object representing the removetrack event which has occurred. the mediastreamtrack representing the track which was removed is specified in the event's track property. example this example adds a listener which, when a track is removed from the stream, lo...
...n a track is removed from the stream, logs the track that was removed. stream.onremovetrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification. candidate recommendation initial specification. ...

MediaStreamAudioDestinationNode - Web APIs
the mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc mediastream with a single audiomediastreamtrack, which can be used in a similar way to a mediastream obtained from navigator.getusermedia. it is an audionode that acts as an audio destination, created using the audiocontext.createmediastreamdestination method. number of inputs 1 number of outputs 0 channel count 2 channel count mode "explicit" channel count interpretation "speakers" constructor mediastreamaudiodestinationnode.mediastreamaudiodestinationnode() creates a new mediastreamaudiodestinationnode object instance. properties inherits properties from its parent, audionode. ...
... number of inputs 1 number of outputs 0 channel count 2 channel count mode "explicit" channel count interpretation "speakers" constructor mediastreamaudiodestinationnode.mediastreamaudiodestinationnode() creates a new mediastreamaudiodestinationnode object instance. properties inherits properties from its parent, audionode. mediastreamaudiodestinationnode.stream is a mediastream containing a single audiomediastreamtrack with the same number of channels as the node itself. you can use this property to get a stream out of the audio graph and feed it into another construct, such as a media recorder. methods inherits methods from its parent, audionode. example specification specification status comment...
...diastream containing a single audiomediastreamtrack with the same number of channels as the node itself. you can use this property to get a stream out of the audio graph and feed it into another construct, such as a media recorder. methods inherits methods from its parent, audionode. example specification specification status comment web audio apithe definition of 'mediastreamaudiodestinationnode' in that specification. working draft ...

MediaStreamEvent() - Web APIs
the mediastreamevent() constructor creates a new mediastreamevent. syntax var event = new mediastreamevent(type, mediastreameventinit); values type is a domstring containing the name of the event, like addstream or removestream. mediastreameventinit is a mediastreameventinit dictionary, having the following fields: "stream" of type mediastream representing the stream being concerned by the event. "bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not. "cancelable", optional and defaulting to false, inherited from eventinit, and indicating if the event can be canceled or not. ...
...ctionary, having the following fields: "stream" of type mediastream representing the stream being concerned by the event. "bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not. "cancelable", optional and defaulting to false, inherited from eventinit, and indicating if the event can be canceled or not. ...
...ng fields: "stream" of type mediastream representing the stream being concerned by the event. "bubbles", optional and defaulting to false, inherited from eventinit, and indicating if the event must bubble or not. "cancelable", optional and defaulting to false, inherited from eventinit, and indicating if the event can be canceled or not. ...

MediaStreamTrack.getSettings() - Web APIs
note: the returned object identifies the current values of every constrainable property, including those which are platform defaults rather than having been expressly set by the site's code. ...
... note: the returned object identifies the current values of every constrainable property, including those which are platform defaults rather than having been expressly set by the site's code. ...
... candidate recommendation initial definition. ...

MediaStreamTrack.id - Web APIs
candidate recommendation initial specification. ...
... candidate recommendation initial specification. ...
... candidate recommendation initial specification. ...

MediaStreamTrack: mute event - Web APIs
the mute event is sent to a mediastreamtrack when the track's source is temporarily unable to provide media data. when the track is once again able to produce media output, an unmute event is sent. during the time between the mute event and the unmute event, the value of the track's muted property is true. note: the condition that most people think of as "muted" (that is, a user-toggled state of silencing a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events. ...
...uted" (that is, a user-toggled state of silencing a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events. bubbles no cancelable no interface event event handler property onmute examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastreamtrack referenced by musictrack. musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when t...
...t handler is available for setting up a handler for the unmute event. the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.readyState - Web APIs
candidate recommendation initial specification. ...
... candidate recommendation initial specification. ...
...ing values: "live" which indicates that an input is connected and does its best-effort in providing real-time data. in that case, the output of data can be switched on or off using the mediastreamtrack.enabled property. "ended" which indicates that the input is not giving any more data and will never provide new data. specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.readystate' in that specification. candidate recommendation initial specification. ...

MediaTrackConstraints.channelCount - Web APIs
the mediatrackconstraints dictionary's channelcount property is a constrainlong describing the requested or mandatory constraints placed upon the value of the channelcount constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.channelcount as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...racksupportedconstraints.channelcount as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { channelcount: constraint }; constraintsobject.channelcount = constraint; value if this value is a number, the user agent will attempt to obtain media whose channel count is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an exact match to the required channel count (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. the channel c...
... candidate recommendation initial specification. ...

MediaTrackConstraints.height - Web APIs
the mediatrackconstraints dictionary's height property is a constrainlong describing the requested or mandatory constraints placed upon the value of the height constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.height as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an exact match to the required height (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. ...
... candidate recommendation initial specification. ...

MediaTrackConstraints.logicalSurface - Web APIs
the mediatrackconstraints dictionary's logicalsurface property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the logicalsurface constrainable property. this is used to specify whether or not getdisplaymedia() should allow the user to choose display surfaces which are not necessarily fully visible on the screen, such as occluded windows or the complete content of windows which are large enough to require scrolling to see their entire contents. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.logicalsurface as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they'...
...: constraint }; constraintsobject.logicalsurface = constraint; value a constrainboolean which is true if logical surfaces should be permitted among the selections available to the user. see how constraints are defined in capabilities, constraints, and settings for an explanation of how to define constraints. usage notes you can check the setting selected by the user agent after the display media has been created by getdisplaymedia() by calling getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's logicalsurface object. for example, if your app needs to know if the selected display surface is a logical one: let islogicalsurface = displaystream.getvideotracks()[0].getsettings().logicalsurface; following this co...
... working draft initial specification. ...

MediaTrackConstraints.sampleRate - Web APIs
the mediatrackconstraints dictionary's samplerate property is a constrainlong describing the requested or mandatory constraints placed upon the value of the samplerate constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplerate as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an exact match to the required sample rate (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. ...
... candidate recommendation initial specification. ...

MediaTrackConstraints.sampleSize - Web APIs
the mediatrackconstraints dictionary's samplesize property is a constrainlong describing the requested or mandatory constraints placed upon the value of the samplesize constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplesize as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...mediatracksupportedconstraints.samplesize as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { samplesize: constraint }; constraintsobject.samplesize = constraint; value if this value is a number, the user agent will attempt to obtain media whose sample size (in bits per linear sample) is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an exact match to the required sample size (if exact is specified or both min and max are provided and have the same value) or to a best-possib...
...d max are provided and have the same value) or to a best-possible value. since this property can only represent linear sample sizes, this constraint can only be met by devices that can produce audio with linear samples. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'samplesize' in that specification. candidate recommendation initial specification. ...

MediaTrackSettings.aspectRatio - Web APIs
the mediatracksettings dictionary's aspectratio property is a double-precision floating-point number indicating the aspect ratio of the mediastreamtrack as currently configured. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.aspectratio property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.aspectratio as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...the aspect ratio is computed by taking the track's width, dividing by its height, and rounding the result to ten decimal places. for example, the standard 16:9 high-definition aspect ratio can be computed as 1920/1080, or 1.7777777778. ...
...tio is computed by taking the track's width, dividing by its height, and rounding the result to ten decimal places. for example, the standard 16:9 high-definition aspect ratio can be computed as 1920/1080, or 1.7777777778. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'aspectratio' in that specification. candidate recommendation initial specification. ...

MediaTrackSettings.channelCount - Web APIs
the mediatracksettings dictionary's channelcount property is an integer indicating how many audio channel the mediastreamtrack is currently configured to have. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.channelcount property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.channelcount as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...ermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.channelcount as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var channelcount = mediatracksettings.channelcount; value an integer value indicating the number of audio channels on the track. a value of 1 indicates monaural sound, 2 means stereo, and so forth. example see example: constraint exerciser in capabilities, constraints, and settings for an example. ...
...miliar with. syntax var channelcount = mediatracksettings.channelcount; value an integer value indicating the number of audio channels on the track. a value of 1 indicates monaural sound, 2 means stereo, and so forth. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'channelcount' in that specification. candidate recommendation initial specification. ...

MediaTrackSettings.latency - Web APIs
the mediatracksettings dictionary's latency property is a double-precision floating-point number indicating the estimated latency (specified in seconds) of the mediastreamtrack as currently configured. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.latency property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). this is, of course, an approximation, since latency can vary for many reasons including cpu, transmission, and storage overhead. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.latency as returned by a call to mediadevices.getsupportedconstraints(). howeve...
...ed by checking the value of mediatracksupportedconstraints.latency as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var latency = mediatracksettings.latency; value a double-precision floating-point number indicating the estimated latency, in seconds, of the audio track as currently configured. example see example: constraint exerciser in capabilities, constraints, and settings for an example. ...
...ll never include this property. syntax var latency = mediatracksettings.latency; value a double-precision floating-point number indicating the estimated latency, in seconds, of the audio track as currently configured. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'latency' in that specification. candidate recommendation initial specification. ...

MediaTrackSettings.logicalSurface - Web APIs
the most common scenario in which a display surface may be a logical one is if the selected surface contains the entire content area of a window which is too large to display onscreen at once. ...
...ttings dictionary's logicalsurface property indicates whether or not the display area being captured is a logical surface. logical surfaces are those which are not necessarily entirely onscreen, or may even be off-screen, such as windows' backing buffers (where only part of the buffer is visible without scrolling the containing window) and offscreen rendering contexts. syntax islogicalsurface = mediatracksettings.logicalsurface; value a boolean value which is true if the video track in the stream of captured video is taken from a logical display surface. the most common scenario in which a display surface may be a logical one is if the selected surface contains the entire content area of a window which is too large to display onscreen at once. since the window that contains the surface has...
...h is currently visible onscreen. for example, a user agent may choose to allow the user to choose whether to share the entire document (a browser with logicalsurface value of true), or just the currently visible portion of the document (where the logicalsurface of the browser surface is false). specifications specification status comment screen capturethe definition of 'mediatracksettings.logicalsurface' in that specification. working draft initial definition ...

MediaTrackSettings.sampleRate - Web APIs
the mediatracksettings dictionary's samplerate property is an integer indicating how many audio samples per second the mediastreamtrack is currently configured for. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.samplerate property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplerate as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...common values include 44,100 (standard cd audio), 48,000 (standard digital audio), 96,000 (commonly used in audio mastering and post-production), and 192,000 (used for high-resolution audio in professional recording and mastering sessions). ...
... candidate recommendation initial specification. ...

MediaTrackSettings.sampleSize - Web APIs
the mediatracksettings dictionary's samplesize property is an integer indicating the linear sample size (in bits per sample) the mediastreamtrack is currently configured for. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.samplesize property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplesize as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...the most commonly used sample size for many years now is 16 bits per sample, which was used for cd audio among others. other common sample sizes are 8 (for reduced bandwidth requirements) and 24 (for high-resolution professional audio). ...
.... each audio channel on the track requires samplesize bits. that means that a given sample actually uses (samplesize/8)*channelcount bytes of data. for example, 16-bit stereo audio requires (16/8)*2 or 4 bytes per sample. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'samplesize' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.aspectRatio - Web APIs
syntax aspectconstraintsupported = supportedconstraintsdictionary.aspectratio; value this property is present in the dictionary (and its value is always true) if the user agent supports the aspectratio constraint. ...
... syntax aspectconstraintsupported = supportedconstraintsdictionary.aspectratio; value this property is present in the dictionary (and its value is always true) if the user agent supports the aspectratio constraint. ...
...user agent supports the aspectratio constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().aspectratio) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'aspectratio' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.channelCount - Web APIs
syntax channelcountconstraintsupported = supportedconstraintsdictionary.channelcount; value this property is present in the dictionary (and its value is always true) if the user agent supports the channelcount constraint. ...
... syntax channelcountconstraintsupported = supportedconstraintsdictionary.channelcount; value this property is present in the dictionary (and its value is always true) if the user agent supports the channelcount constraint. ...
...ser agent supports the channelcount constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'channelcount' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.deviceId - Web APIs
syntax deviceidconstraintsupported = supportedconstraintsdictionary.deviceid; value this property is present in the dictionary (and its value is always true) if the user agent supports the deviceid constraint. ...
... syntax deviceidconstraintsupported = supportedconstraintsdictionary.deviceid; value this property is present in the dictionary (and its value is always true) if the user agent supports the deviceid constraint. ...
...he user agent supports the deviceid constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().deviceid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'deviceid' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.echoCancellation - Web APIs
syntax echocancellationconstraintsupported = supportedconstraintsdictionary.echocancellation; value this property is present in the dictionary (and its value is always true) if the user agent supports the echocancellation constraint. ...
... syntax echocancellationconstraintsupported = supportedconstraintsdictionary.echocancellation; value this property is present in the dictionary (and its value is always true) if the user agent supports the echocancellation constraint. ...
...agent supports the echocancellation constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'echocancellation' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.facingMode - Web APIs
syntax facingmodeconstraintsupported = supportedconstraintsdictionary.facingmode; value this property is present in the dictionary (and its value is always true) if the user agent supports the facingmode constraint. ...
... syntax facingmodeconstraintsupported = supportedconstraintsdictionary.facingmode; value this property is present in the dictionary (and its value is always true) if the user agent supports the facingmode constraint. ...
...e is always true) if the user agent supports the facingmode constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().facingmode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'facingmode' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.frameRate - Web APIs
if the constraint isn't supported, it's not included in the list, so this value will never be false. the framerate constraint can be used to establish acceptable upper and lower bounds on the video frame rate for a new video track, or to specify an exact frame rate that must be provided for the request to succeed. checking the value of this property lets you determine if the user agent allows constraining the video track configuration by frame rate. see the example to see how this can be used. ...
...the framerate constraint. if the property isn't present, the user agent doesn't allow specifying limits on the frame rate for video tracks. if this property is present, its value is always true. example this simple example looks to see if your browser supports constraining the frame rate when requesting video tracks. javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } result the output, showing if your browser supports the framerate constraint, is: while this example is trivial, you can replace the simple output of "supported" vs. "no...
... candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.groupId - Web APIs
syntax groupidconstraintsupported = supportedconstraintsdictionary.groupid; value this property is present in the dictionary (and its value is always true) if the user agent supports the groupid constraint. ...
... syntax groupidconstraintsupported = supportedconstraintsdictionary.groupid; value this property is present in the dictionary (and its value is always true) if the user agent supports the groupid constraint. ...
...the user agent supports the groupid constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().groupid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'groupid' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.height - Web APIs
syntax heightconstraintsupported = supportedconstraintsdictionary.height; value this property is present in the dictionary (and its value is always true) if the user agent supports the height constraint. ...
... syntax heightconstraintsupported = supportedconstraintsdictionary.height; value this property is present in the dictionary (and its value is always true) if the user agent supports the height constraint. ...
... the user agent supports the height constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().height) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'height' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.latency - Web APIs
syntax latencyconstraintsupported = supportedconstraintsdictionary.latency; value this property is present in the dictionary (and its value is always true) if the user agent supports the latency constraint. ...
... syntax latencyconstraintsupported = supportedconstraintsdictionary.latency; value this property is present in the dictionary (and its value is always true) if the user agent supports the latency constraint. ...
...the user agent supports the latency constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().latency) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'latency' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.sampleRate - Web APIs
syntax samplerateconstraintsupported = supportedconstraintsdictionary.samplerate; value this property is present in the dictionary (and its value is always true) if the user agent supports the samplerate constraint. ...
... syntax samplerateconstraintsupported = supportedconstraintsdictionary.samplerate; value this property is present in the dictionary (and its value is always true) if the user agent supports the samplerate constraint. ...
... user agent supports the samplerate constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'samplerate' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.sampleSize - Web APIs
syntax samplesizeconstraintsupported = supportedconstraintsdictionary.samplesize; value this property is present in the dictionary (and its value is always true) if the user agent supports the samplesize constraint. ...
... syntax samplesizeconstraintsupported = supportedconstraintsdictionary.samplesize; value this property is present in the dictionary (and its value is always true) if the user agent supports the samplesize constraint. ...
... user agent supports the samplesize constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplesize) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'samplesize' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.volume - Web APIs
syntax volumeconstraintsupported = supportedconstraintsdictionary.volume; value this property is present in the dictionary (and its value is always true) if the user agent supports the volume constraint. ...
... syntax volumeconstraintsupported = supportedconstraintsdictionary.volume; value this property is present in the dictionary (and its value is always true) if the user agent supports the volume constraint. ...
... the user agent supports the volume constraint. ...

MediaTrackSupportedConstraints.width - Web APIs
syntax widthconstraintsupported = supportedconstraintsdictionary.width; value this property is present in the dictionary (and its value is always true) if the user agent supports the width constraint. ...
... syntax widthconstraintsupported = supportedconstraintsdictionary.width; value this property is present in the dictionary (and its value is always true) if the user agent supports the width constraint. ...
...f the user agent supports the width constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'width' in that specification. candidate recommendation initial specification. ...

Navigator.mediaCapabilities - Web APIs
the navigator.mediacapabilities read-only property returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities as defined by the media capabilities api. syntax mediacapabilitiesobj = globalobj.navigator.mediacapabilities value a mediacapabilities object. ...
... the navigator.mediacapabilities read-only property returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities as defined by the media capabilities api. syntax mediacapabilitiesobj = globalobj.navigator.mediacapabilities value a mediacapabilities object. ...
...nnels : 2, bitrate : 132700, samplerate : 5200 } }).then(function(result) { console.log('this configuration is ' + (result.supported ? '' : 'not ') + 'supported, ' + (result.smooth ? '' : 'not ') + 'smooth, and ' + (result.powerefficient ? '' : 'not ') + 'power efficient.') }); specifications specification status comment media capabilities draft initial definition ...

Window.setImmediate() - Web APIs
this method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates. this method is not expected to become standard, and is only implemented by recent builds of internet explorer and node.js 0.10+. it meets resistance both from gecko (firefox) and webkit (google/apple). syntax var immediateid = setimmediate(func, [param1, param2, ...]); var immediateid = setimmediate(func); where immediateid is the id of the immediate which can be used later with window.clearimmediate. func is the function you wish to call. all parameters will be passed directly to your function. ...
...it meets resistance both from gecko (firefox) and webkit (google/apple). syntax var immediateid = setimmediate(func, [param1, param2, ...]); var immediateid = setimmediate(func); where immediateid is the id of the immediate which can be used later with window.clearimmediate. func is the function you wish to call. all parameters will be passed directly to your function. notes the clearimmediate method can be used to clear the immediate actions, just like cleartimeout for settimeout. this method can be used instead of the settimeout(fn, 0) method to execute heavy operations. the feature can be emulated in a few different ways: postmessage can be used to trigger an immediate but yielding callback. do note that internet explorer 8 includes a synchronous version of postmessage, whic...
...chronous version of postmessage, which means it cannot be used as a fallback. messagechannel can be used reliably inside of web workers whereas the semantics of postmessage mean it cannot be used there. settimeout(fn, 0) can potentially be used, however as it is clamped to 4ms for timers nested more than 5 levels deep per the html spec, it does not make for a suitable polyfill for the natural immediacy of setimmediate. all of these techniques are incorporated into a robust setimmediate polyfill. specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification. editor's draft initial definition. ...

Recipe: Media objects - CSS: Cascading Style Sheets
the media object is a pattern we see all over the web. named by nicole sullivan it refers to a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. requirements media object pattern needs some or all of the following characteristics: stacked on mobile, two columns on desktop. the image can be on the left or right. the image might be small or large. media objects can be nested. the media object should clear the contents no matter which side is tallest. the recipe download this example choices made i have chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when i need to. this means that when we have a footer, with short content above, the footer can be pushed down to the ...
... another reason to use grid layout is in order that i can use fit-content() for the track sizing of the image. by using fit-content with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the max-content size. ...
...ge as the size of that image — the max-content size. if the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column. by using grid-template-areas to achieve the layout, i can see the pattern in the css. i define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks. an option for the pattern is to flip it to switch the image to the other side — this is done by adding the media-flip class, which defines a flipped grid template causing the layout to be mirrored. when we nest one media object inside another we need to place it into the second track in the regular layout, and the first track when flipped. fallbacks there are a number of poss...

415 Unsupported Media Type - HTTP
the http 415 unsupported media type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. the format problem might be due to the request's indicated content-type or content-encoding, or as a result of inspecting the data directly. ...
... the http 415 unsupported media type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. the format problem might be due to the request's indicated content-type or content-encoding, or as a result of inspecting the data directly. ...
...onse code indicates that the server refuses to accept the request because the payload format is in an unsupported format. ...

SyntaxError: identifier starts immediately after numeric literal - JavaScript
they can't start with a digit! only subsequent characters can be digits (0-9). ...
...they can't start with a digit! only subsequent characters can be digits (0-9). ...
...tain rules, which your code must adhere to! a javascript identifier must start with a letter, underscore (_), or dollar sign ($). they can't start with a digit! only subsequent characters can be digits (0-9). examples variable names starting with numeric literals variable names can't start with numbers in javascript. the following fails: var 1life = 'foo'; // syntaxerror: identifier starts immediately after numeric literal var foo = 1life; // syntaxerror: identifier starts immediately after numeric literal alert(1.foo); // syntaxerror: identifier starts immediately after numeric literal you will need to rename your variable to avoid the leading number. var life1 = 'foo'; var foo = life1; ...

Image file type and format guide - Web media technologies
in which case pixels colored that value are entirely transparent. gif supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided. gif has been extremely popular for decades, due to its simplicity and compatibility. its animation support caused a resurgence in its popularity in the social media era, when animated gifs began to be widely used for short "videos", memes, and other simple animation sequences. another popular feature of gif is support for interlacing, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. this is particularly useful when network connections are slow. gif is a good choice for simple images and animat...
...tiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax). however, software reading tiff files is only required to support the first image. tiff supports a variety of color spaces, not just rgb. these include cmyk, ycbcr, and others, making tiff a good choice for storing images intended for print, film, or television media. long ago, some browsers supported tiff images in web content; today, however, you need to use special libraries or browser add-ons to do so. as such, tiff files are not useful within the context of web content, but it's common to provide downloadable tiff files when distributing photos and other artwork intended for precision editing or printing. mime type image/tiff file ...
...ext or other shapes to become fuzzy or unclear. best choice fallback svg png providing image fallbacks while the standard html <img> element doesn't support compatibility fallbacks for images, the <picture> element does. <picture> is used as a wrapper for a number of <source> elements, each specifying a version of the image in a different format or under different media conditions, as well as an <img> element which defines where to display the image and the fallback to the default or "most compatible" version. for example, if you're displaying a diagram best displayed with svg, but wish to offer a fallback to a png or gif of the diagram, you would do something like this: <picture> <source srcset="diagram.svg" type="image/svg+xml"> <source srcset="diagram.p...

Media - MDN Web Docs Glossary: Definitions of Web-related terms
the term media is an overloaded one when talking about the web; it takes on different meanings depending on the context. media (audio-visual presentation) the term media (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. media (css) in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine. ...
...a (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, tv shows, or any other form of content that is presented over a period of time. media (css) in the context of css (cascading style sheets), the term media refers to the destination to which the document is to be drawn by the rendering engine. ...

Multimedia and Embedding - Learn web development
looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
... something similar), work through it first, then come back! note: if you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles which will take you through all the fundamentals of embedding multimedia on webpages. images in html there are other types of multimedia to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage. in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css background images. video and audio content next, we'll look at how to...

CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
applications that need to carefully control the timing of rendering and frame capture can use requestframe() to directly specify when it's time to capture a frame. to prevent automatic capture of frames, so that frames are only captured when requestframe() is called, specify a value of 0 for the capturestream() method when creating the stream. syntax stream.requestframe(); return value undefined usage notes there is currently an issue flagged in the specification pointing out that at this time, no exceptions are being thrown if the canvas isn't origin-clean. ...
...e spec, this is a likely candidate). example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // send the current state of the canvas as a frame to the stream stream.getvideotracks()[0].requestframe(); specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastream.requestframe()' in that specification. working draft initial definition ...

HTMLMediaElement.audioTracks - Web APIs
the read-only audiotracks property on htmlmediaelement objects returns an audiotracklist object listing all of the audiotrack objects representing the media element's audio tracks. the media element may be either an <audio> element or a <video> element. the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. once you have a reference to the list, you can monitor it for changes to detect when new audio tracks are added or existing ones removed. see event handlers in audiotracklist to learn more about watching for changes to a media element's track list. syntax var audiotracks = mediaelement.audiotracks; value a audiotracklist object representing the list of audio tracks included in the media element. ...
... itself. <video id="video" src="somevideo.mp4"></video> javascript the javascript code handles muting the video element's audio tracks. var video = document.getelementbyid("video"); for (var i = 0; i < video.audiotracks.length; i += 1) { video.audiotracks[i].enabled = false; } specifications specification status comment html living standardthe definition of 'htmlmediaelement.audiotracks' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.audiotracks' in that specification. recommendation initial definition. ...

HTMLMediaElement.buffered - Web APIs
the htmlmediaelement.buffered read-only property returns a new timeranges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. note: this feature is not available in web workers. syntax var timerange = audioobject.buffered value a timeranges object. this object is normalized, which means that ranges are ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are folded into one bigger range). example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges { length: 0 } specifications specification status comment html living standardthe definition of 'htmlmediaelement.buffered' in that specification. living standard no change ...
...(adjacent ranges are folded into one bigger range). example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges { length: 0 } specifications specification status comment html living standardthe definition of 'htmlmediaelement.buffered' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.buffered' in that specification. recommendation initial definition. ...

HTMLMediaElement.captureStream() - Web APIs
the capturestream() property of the htmlmediaelement interface returns a mediastream object which is streaming a real-time capture of the content being rendered in the media element. this can be used, for example, as a source for a webrtc rtcpeerconnection. syntax var mediastream = mediaelement.capturestream() parameters none. return value a mediastream object which can be used as a source for audio and/or video data by other media processing code, or as a source for webrtc. example in this example, an event handler is established so that clicking a button starts capturing the contents of a media element with the id "playback" into a mediastream. the stream can then be used for other purposes—like a source for streaming over webrtc, to allow sharing prerecorded videos with another p...
...an then be used for other purposes—like a source for streaming over webrtc, to allow sharing prerecorded videos with another person during a video call. document.queryselector('.playandrecord').addeventlistener('click', function() { var playbackelement = document.getelementbyid("playback"); var capturestream = playbackelement.capturestream(); playbackelement.play(); }); see recording a media element for a longer and more intricate example and explanation. specifications specification status comment media capture from dom elementsthe definition of 'capturestream()' in that specification. working draft initial definition. ...

HTMLMediaElement.controlsList - Web APIs
specifications specification status comment controls list api: solution outline browser compatibility 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. ...
... specifications specification status comment controls list api: solution outline browser compatibility 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. ...

HTMLMediaElement.currentSrc - Web APIs
the htmlmediaelement.currentsrc property contains the absolute url of the chosen media resource. this could happen, for example, if the web server selects a media file based on the resolution of the user's display. the value is an empty string if the networkstate property is empty. syntax var mediaurl = audioobject.currentsrc; value a domstring object containing the absolute url of the chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided. example var obj = document.createelement('video'); console.log(obj.currentsrc); // "" specifications specification status comment html livin...
...ring if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsourceelement contained within the media element, or the value or src if no <source> element is provided. example var obj = document.createelement('video'); console.log(obj.currentsrc); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.currentsrc' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.currentsrc' in that specification. recommendation initial definition. ...

HTMLMediaElement.defaultMuted - Web APIs
the htmlmediaelement.defaultmuted property reflects the muted html attribute, which indicates whether the media element's audio output should be muted by default. this property has no dynamic effect. to mute and unmute the audio output, use the muted property. syntax var dmuted = video.defaultmuted; audio.defaultmuted = true; value a boolean. a value of true means that the audio output will be muted by default. example var videoele = document.createelement('video'); videoele.defaultmuted = true; console.log(videoele.outerhtml); // <video muted=""></video> specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultmuted' in that specification. living standard no change from html5 html5the definition...
...fault. example var videoele = document.createelement('video'); videoele.defaultmuted = true; console.log(videoele.outerhtml); // <video muted=""></video> specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultmuted' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.defaultmuted' in that specification. recommendation initial definition. ...

HTMLMediaElement: emptied event - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onemptied specification html5 media examples these examples add an event listener for the htmlmediaelement's emptied event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh. the media is empty. did you call load()?'); }); ...
...hen that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh. the media is empty. did you call load()?'); }); using the onemptied event handler property: const video = document.queryselector('video'); video.onemptied = (event) => { console.log('uh oh. the media is empty. did you call load()?'); }; specifications specification status html living standardthe definition of 'emptied media event' in that specification. living standard html5the definition of 'emptied media event' in that specification. recommendation ...

HTMLMediaElement.msInsertAudioEffect() - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the htmlmediaelement.msinsertaudioeffect() method inserts the specified audio effect into the media pipeline. this proprietary method is specific to internet explorer and microsoft edge. syntax htmlmediaelement.msinsertaudioeffect(activatableclassid: domstring, effectrequired: boolean, config); parameters activatableclassid a domstring defining the audio effects class. effectrequired a boolean which if set to true requires an audio effect to be defined. configoptional an optional object to...
...activatableclassid: domstring, effectrequired: boolean, config); parameters activatableclassid a domstring defining the audio effects class. effectrequired a boolean which if set to true requires an audio effect to be defined. configoptional an optional object to help with defining any additional configuration needed. return value this method does not return a value. see also htmlmediaelement microsoft api extensions ...

HTMLMediaElement.seekable - Web APIs
the seekable read-only property of the htmlmediaelement returns a timeranges object that contains the time ranges that the user is able to seek to, if any. syntax var seekable = audioorvideo.seekable; value a timeranges object. examples var video = document.queryselector("video"); var timerangesobject = video.seekable; var timeranges = []; //go through the object and output an array for (let count = 0; count < timerangesobject.length; count ++) { timeranges.push([timerangesobject.start(count), timerangesobject.end(count)]); } specifications specification status comment html living standardthe definition of 'htmlmediaelement' in that specification. ...
... output an array for (let count = 0; count < timerangesobject.length; count ++) { timeranges.push([timerangesobject.start(count), timerangesobject.end(count)]); } specifications specification status comment html living standardthe definition of 'htmlmediaelement' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement' in that specification. recommendation initial definition. media source extensionsthe definition of 'htmlmediaelement extensions, like for seekable' in that specification. recommendation specifies a new algorithm for returning the seekable time range of a media element whose source is a mediasource object. ...

HTMLMediaElement.src - Web APIs
the htmlmediaelement.src property reflects the value of the html media element's src attribute, which indicates the url of a media resource to use in the element. note: the best way to know the url of the media resource currently in active use in this element is to look at the value of the currentsrc attribute, which also takes into account selection of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element). syntax var mediaurl = htmlmediaelement.src; value a usvstring object containing the url of a media resource to use in the element; this property reflects the value of the html element's src attribute. example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification...
... syntax var mediaurl = htmlmediaelement.src; value a usvstring object containing the url of a media resource to use in the element; this property reflects the value of the html element's src attribute. example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.src' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.src' in that specification. recommendation initial definition. ...

HTMLMediaElement: timeupdate event - Web APIs
rage cost of processing the event each time, so that the ui updates are not any more frequent than the user agent can comfortably handle while decoding the video. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ontimeupdate specification html5 media examples these examples add an event listener for the htmlmediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing. remember, the event frequency is dependant on the system load. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('timeupdate', (event) => { console.log('the currenttime att...
...vent) => { console.log('the currenttime attribute has been updated. again.'); }); using the ontimeupdate event handler property: const video = document.queryselector('video'); video.ontimeupdate = (event) => { console.log('the currenttime attribute has been updated. again.'); }; specifications specification status html living standardthe definition of 'timeupdate media event' in that specification. living standard html5the definition of 'timeupdate media event' in that specification. recommendation ...

HTMLMediaElement.videoTracks - Web APIs
the read-only videotracks property on htmlmediaelement objects returns a videotracklist object listing all of the videotrack objects representing the media element's video tracks. the returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. once you have a reference to the list, you can monitor it for changes to detect when new video tracks are added or existing ones removed. see event handlers in videotracklist to learn more about watching for changes to a media element's track list. syntax var videotracks = mediaelement.videotracks; value a videotracklist object representing the list of video tracks included in the media element. the list of tracks can be accessed using array notation, or using the objec...
...videotracklist object representing the list of video tracks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a videotrack object which provides information about the track. specifications specification status comment html living standardthe definition of 'htmlmediaelement.videotracks' in that specification. living standard no change from html5 ...

MediaCapabilitiesInfo - Web APIs
...
... ...

MediaCapabilities - Web APIs
the mediacapabilities interface of the media capabilities api provides information about the decoding abilities of the device, system and browser. the api can be used to query the browser about the decoding abilities of the device based on codecs, profile, resolution, and bitrates. the information can be used to serve optimal media streams to the user and determine if playback should be smooth and power efficient. the information is accessed through the mediacapabilities property of the navigator interface. methods mediacapabilities.encodinginfo() when passed a valid media configuration, it returns a promise with information as to whether the media type is supported, and whether encoding such media would be smooth and power efficient. ...
...nd determine if playback should be smooth and power efficient. the information is accessed through the mediacapabilities property of the navigator interface. methods mediacapabilities.encodinginfo() when passed a valid media configuration, it returns a promise with information as to whether the media type is supported, and whether encoding such media would be smooth and power efficient. mediacapabilities.decodinginfo() when passed a valid media configuration, it returns a promise with information as to whether the media type is supported, and whether decoding such media would be smooth and power efficient. specifications specification status comment media capabilitiesthe definition of 'mediacapabilities' in that specification. draft initial def...

MediaDeviceInfo.kind - Web APIs
candidate recommendation initial definition. browser compatibility 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. ...
... candidate recommendation initial definition. browser compatibility 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. ...

MediaElementAudioSourceNode() - Web APIs
the mediaelementaudiosourcenode() constructor creates a new mediaelementaudiosourcenode object instance. syntax var myaudiosource = new mediaelementaudiosourcenode(context, options); parameters inherits parameters from the audionodeoptions dictionary. context an audiocontext representing the audio context you want the node to be associated with. options a mediaelementaudiosourceoptions dictionary object defining the properties you want the mediaelementaudiosourcenode to have: mediaelement: an htmlmediaelement that will be used as the source for the audio. return value a new mediaelementaudiosourcenode object instance. ...
...enting the audio context you want the node to be associated with. options a mediaelementaudiosourceoptions dictionary object defining the properties you want the mediaelementaudiosourcenode to have: mediaelement: an htmlmediaelement that will be used as the source for the audio. return value a new mediaelementaudiosourcenode object instance. example var ac = new audiocontext(); var mediaelement = document.createelement('audio'); var options = { mediaelement : mediaelement } var myaudiosource = new mediaelementaudiosourcenode(ac, options); specifications specification status comment web audio apithe definition of 'mediaelementaudiosourcenode' in that specification. working draft ...

MediaImage - Web APIs
the media session api's mediaimage dictionary describes the images associated with the media resource mediametadata. its contents can be displayed by the user agent in appropriate contexts, like player interface to show the current playing video or audio track. properties src the url from which user agent can fetch the image's data. sizes specifies the resource in multiple sizes so that user agent does not have to scale a single image. type the mime type hint for the user agant. note that it is just a hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type. ...
...the resource in multiple sizes so that user agent does not have to scale a single image. type the mime type hint for the user agant. note that it is just a hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type. specifications specification status comment media session standardthe definition of 'mediaimage' in that specification. draft initial definition. ...

MediaKeyMessageEvent() - Web APIs
options options are as follows: messagetype: a developer-defined message type that allows applications to differentiate messages without parsing them. message: an array containing the message generated by the content decryption module. browser compatibility the compatibility table on this page is generated from structured data. ...
...ion module. browser compatibility 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. ...

MediaKeyStatusMap.entries() - Web APIs
browser compatibility 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. ...
... browser compatibility 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. ...

MediaKeyStatusMap.get() - Web APIs
browser compatibility 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. ...
... browser compatibility 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. ...

MediaKeyStatusMap.has() - Web APIs
browser compatibility 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. ...
... browser compatibility 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. ...

MediaKeyStatusMap.keys() - Web APIs
browser compatibility 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. ...
... browser compatibility 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. ...

MediaKeyStatusMap.values() - Web APIs
browser compatibility 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. ...
... browser compatibility 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. ...

MediaKeySystemConfiguration - Web APIs
the mediakeysystemconfiguration dictionary holds configuration information about the media key system in use. properties mediakeysystemconfiguration.initdatatypes read only returns a list of supported initialization data type names. an initialization data type is a string indicating the format of the initialization data. mediakeysystemconfiguration.audiocapabilities read only returns a list of supported audio type and capability pairs. mediakeysystemconfiguration.videocapabilities read only returns a list of supported video type and capability pairs. mediakeysystemconfiguration.distinctiveidentifier read only indicates whether a persistent distinctive identifier is required. ...
... of the initialization data. mediakeysystemconfiguration.audiocapabilities read only returns a list of supported audio type and capability pairs. mediakeysystemconfiguration.videocapabilities read only returns a list of supported video type and capability pairs. mediakeysystemconfiguration.distinctiveidentifier read only indicates whether a persistent distinctive identifier is required. mediakeysystemconfiguration.persistentstate read only indicates whether the ability to persist state is required. specifications specification status comment encrypted media extensionsthe definition of 'mediakeysystemconfiguration' in that specification. recommendation initial definition ...

MediaMetadata.album - Web APIs
draft initial definition. browser compatibility 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. ...
... draft initial definition. browser compatibility 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. ...

MediaMetadata.artist - Web APIs
draft initial definition. browser compatibility 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. ...
... draft initial definition. browser compatibility 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. ...

MediaMetadata.artwork - Web APIs
draft initial definition. browser compatibility 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. ...
... draft initial definition. browser compatibility 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. ...

MediaMetadata.title - Web APIs
draft initial definition. browser compatibility 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. ...
... draft initial definition. browser compatibility 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. ...

MediaQueryList.onchange - Web APIs
the onchange property of the mediaquerylist interface is an event handler property representing a function that is invoked when the change event fires, i.e when the status of media query support changes. the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes. syntax mediaquerylist.onchange = function() { ... ...
...face is an event handler property representing a function that is invoked when the change event fires, i.e when the status of media query support changes. the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes. syntax mediaquerylist.onchange = function() { ... ...

MediaQueryList.removeListener() - Web APIs
the removelistener() method of the mediaquerylist interface removes a listener from the mediaquerylistener. this is basically an alias for eventtarget.removeeventlistener(), for backwards compatibility purposes — in older browsers you could use removeeventlistener() instead. syntax mediaquerylist.removelistener(func) parameters func a function or function reference representing the callback function you want to remove. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, and the callback is a standard function. return value void. ...
...mediaquerylist.removelistener(func) parameters func a function or function reference representing the callback function you want to remove. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, and the callback is a standard function. return value void. ...

MediaQueryListEvent.matches - Web APIs
the matches read-only property of the mediaquerylistevent interface is a boolean that returns true if the document currently matches the media query list, or false if not. syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the document currently matches the media query list, false if not. ...
... the matches read-only property of the mediaquerylistevent interface is a boolean that returns true if the document currently matches the media query list, or false if not. syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the document currently matches the media query list, false if not. ...

MediaQueryListListener - Web APIs
this feature is outdated. the mediaquerylist.addlistener() callback is now a plain function and called with the standard mediaquerylistevent object. a mediaquerylist object maintains a list of media queries on a document, and handles sending notifications to listeners when the media queries on the document change. this makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to detect changes to the values of media queries on a document. a mediaquerylistlistener is a callback function that gets invoked with a single argument, the mediaquerylist for which the evaluated result changed. syntax function( mediaquerylist ) { ... } parameters mediaquerylist the mediaquerylist instance. specifications ...
...ries on a document. a mediaquerylistlistener is a callback function that gets invoked with a single argument, the mediaquerylist for which the evaluated result changed. syntax function( mediaquerylist ) { ... } parameters mediaquerylist the mediaquerylist instance. specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistlistener' in that specification. working draft initial definition ...

MediaRecorder.audioBitsPerSecond - Web APIs
working draft initial definition. browser compatibility the compatibility table in 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. ...
... working draft initial definition. browser compatibility the compatibility table in 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. ...

MediaRecorder.onstart - Web APIs
the mediarecorder.onstartevent handler (part of the mediarecorder api) handles the start event, allowing you to run code in response to media recording being started by a mediarecorder. the start event is thrown as a result of the mediarecorder.start() method being invoked. at this point, the data starts being gathered into a blob. syntax mediarecorder.onstart = function(event) { ... } mediarecorder.addeventlistener('start', function(event) { ... }) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. ...
...(event) { ... } mediarecorder.addeventlistener('start', function(event) { ... }) example ... record.onclick = function() { mediarecorder.start(); console.log("recorder started"); } mediarecorder.onstart = function() { // do something in response to // recording being started } ... properties none. specifications specification status comment mediastream recordingthe definition of 'mediarecorder.onstart' in that specification. working draft initial definition ...

MediaRecorder.state - Web APIs
the mediarecorder.state read-only property returns the current state of the current mediarecorder object. syntax var state = mediarecorder.state values a animationplaystate object containing one of the following values: enumeration description inactive recording is not occuring — it has either not been started yet, or it has been started and then stopped. recording recording has been started and the ua is capturing data. paused recording has been started, then paused, but not yet stopped or resumed. example ... record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); // will return "recording" console.log("recorder started"); } ... specifications specification st...
...been started and the ua is capturing data. paused recording has been started, then paused, but not yet stopped or resumed. example ... record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); // will return "recording" console.log("recorder started"); } ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.state' in that specification. working draft initial definition ...

MediaRecorder.stream - Web APIs
the mediarecorder.stream read-only property returns the stream that was passed into the mediarecorder() constructor when the mediarecorder was created. syntax var stream = mediarecorder.stream values the mediastream passed into the mediarecorder() constructor when the mediarecorder was originally created. example if (navigator.getusermedia) { console.log('getusermedia supported.'); navigator.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { var mediarecorder = new mediarecorder(stream); var mystream = mediarecorder.stream; console.log(mystream); ... ...
...pported.'); navigator.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { var mediarecorder = new mediarecorder(stream); var mystream = mediarecorder.stream; console.log(mystream); ... specifications specification status comment mediastream recordingthe definition of 'mediarecorder.stream' in that specification. working draft initial definition ...

MediaSource.setLiveSeekableRange() - Web APIs
the setliveseekablerange() method of the mediasource interface sets the range that the user can seek to in the media element. syntax mediasource.setliveseekablerange(start, end) parameters start the start of the seekable range to set in seconds measured from the beginning of the source. if the duration of the media source is positive infinity, then the timeranges object returned by the htmlmediaelement.seekable property will have a start timestamp no greater than this value. end the end of the seekable range to set in seconds measured from the beginning of the source. if the duration of the media source is positive infinity, then the timeranges object returned by the htmlmediaelement.seekable property will have an end timestamp no less than this value. return value undefined exa...
.... end the end of the seekable range to set in seconds measured from the beginning of the source. if the duration of the media source is positive infinity, then the timeranges object returned by the htmlmediaelement.seekable property will have an end timestamp no less than this value. return value undefined example // tbd specifications specification status comment media source extensionsthe definition of 'setliveseekablerange()' in that specification. recommendation initial definition. ...

MediaStream() - Web APIs
the mediastream() constructor returns a newly-created mediastream, which serves as a collection of media tracks, each represented by a mediastreamtrack object. if any parameters are given, the specified tracks are added to the new stream. otherwise, the stream has no tracks. syntax newstream = new mediastream(); newstream = new mediastream(stream); newstream = new mediastream(tracks[]); parameters stream a different mediastream object whose tracks are added to the newly-created stream automatically. the tracks are not removed from the original stream, so they're shared by the two streams. tracks an array of mediastreamtrack objects, one for each track to add to the stream. return value a newly-created mediastream object, either empty, or containing the tracks provided, if any. sp...
...e newly-created stream automatically. the tracks are not removed from the original stream, so they're shared by the two streams. tracks an array of mediastreamtrack objects, one for each track to add to the stream. return value a newly-created mediastream object, either empty, or containing the tracks provided, if any. specifications specification status comment media capture and streamsthe definition of 'mediastream' in that specification. candidate recommendation ...

MediaStreamTrack: ended event - Web APIs
the ended event of the mediastreamtrack interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. bubbles no cancelable no interface event event handler property mediastreamtrack.onended usage notes ended events fire when the media stream track's source permanently stops sending data on the stream. there are various ways this can happen, including: there is no more data left to send. the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. examples this example sets up an ev...
...; pausing media does not generate an ended event. examples this example sets up an event handler for the ended event, which changes an on-screen icon to indicate that the track is no longer active. track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'ended' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.getCapabilities() - Web APIs
the getcapabilities() method of the mediastreamtrack interface returns a mediatrackcapabilities object which specifies the values or range of values which each constrainable property, based upon the platform and user agent. once you know what the browser's capabilities are, your script can use applyconstraints() to ask for the track to be configured to match ideal or acceptable settings. see capabilities, constraints, and settings for details on how to work with constrainable properties. syntax const capabilities = track.getcapabilities() return value a mediatrackcapabilities object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties. ...
... capabilities, constraints, and settings for details on how to work with constrainable properties. syntax const capabilities = track.getcapabilities() return value a mediatrackcapabilities object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties. specifications specification status comment media capture and streamsthe definition of 'getcapabilities()' in that specification. candidate recommendation initial definition. ...

MediaStreamTrack.kind - Web APIs
candidate recommendation initial specification. ...
... if the track is an audio track and to "video", if it is a video track. it doesn't change if the track is deassociated from its source. syntax const type = track.kind value the possible values are a domstring with on of the following values: "audio": the track is an audio track. "video": the track is a video track. specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.kind' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.label - Web APIs
candidate recommendation initial specification. ...
...ly property returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone". the string may be left empty and is empty as long as no source has been connected. when the track is deassociated from its source, the label is not changed. syntax const label = track.label specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.label' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.muted - Web APIs
the muted read-only property of the mediastreamtrack interface returns a boolean value indicating whether or not the track is currently unable to provide media output. to implement a way for users to mute and unmute a track, use the enabled property. when a track is disabled by setting enabled to false, it generates only empty frames (audio frames in which every sample is 0, or video frames in which every pixel is black). syntax const mutedflag = track.muted value a boolean which is true if the track is currently muted, or false if the track is currently unmuted. when possible, avoid polling muted to monitor the track's muting status. instead, add event listeners for the mute and unmute events. ...
...or video frames in which every pixel is black). syntax const mutedflag = track.muted value a boolean which is true if the track is currently muted, or false if the track is currently unmuted. when possible, avoid polling muted to monitor the track's muting status. instead, add event listeners for the mute and unmute events. example this example counts the number of tracks in an array of mediastreamtrack objects which are currently muted. let mutedcount = 0; tracklist.foreach((track) => { if (track.muted) { mutedcount += 1; } }); specifications specification status comment media capture and streamsthe definition of 'muted' in that specification. candidate recommendation initial definition. ...

MediaStreamTrack.onmute - Web APIs
candidate recommendation initial specification. ...
...vent. the event handler function receives a single parameter: the event object, which is a simple event object. example in this example, an onmute handler is established to set the content html of an element to display the "muted speaker" emoji. mytrack.onmute = function(evt) { playstateicon.innerhtml = "&#1f507;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onmute' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.onunmute - Web APIs
mediastreamtrack's onunmute event handler is called when the unmute event is received. such an event is sent when the track is again able to send data. when the onunmute event handler is called, the track's muted flag is false. syntax track.onunmute = unmutehandler; value unmutehandler is a function which is called when the mediastreamtrack receives the unmute event. the event handler receives as input a single parameter: an event whose kind is "unmute". example this example creates an unmute event handler which changes the state of a visual indicator to display the emoji character representing a "speaker" icon. ...
...nt handler receives as input a single parameter: an event whose kind is "unmute". example this example creates an unmute event handler which changes the state of a visual indicator to display the emoji character representing a "speaker" icon. mytrack.onunmute = function(evt) { playstateicon.innerhtml = "&#x1f508;"; }; specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onunmute' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack.stop() - Web APIs
the mediastreamtrack.stop() method stops the track. syntax track.stop() description calling stop() tells the user agent that the track's source—whatever that source may be, including files, network streams, or a local camera or microphone—is no longer needed by the mediastreamtrack. since multiple tracks may use the same source (for example, if two tabs are using the device's microphone), the source itself isn't necessarily immediately stopped. it is instead disassociated from the track and the track object is stopped. once no media tracks are using the source, the source may actually be completely stopped. immediately after calling stop(), the readystate property is set to ended. examples stopping a video stream in this example, we see a function which stops a streamed video by c...
... track.stop(); }); videoelem.srcobject = null; } this works by obtaining the video element's stream from its srcobject property. then the stream's track list is obtained by calling its gettracks() method. from there, all that remains to do is to iterate over the track list using foreach() and calling each track's stop() method. finally, srcobject is set to null to sever the link to the mediastream object so it can be released. specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.stop()' in that specification. candidate recommendation initial specification. ...

MediaStreamTrack: unmute event - Web APIs
the unmute event is sent to a mediastreamtrack when the track's source is once again able to provide media data after a period of not being able to do so. this ends the muted state that began with the mute event. bubbles no cancelable no interface event event handler property onunmute note: the condition that most people think of as "muted" (that is, a user-controllable way to silence a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events. examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastreamtrack stored in the variable musictrack. musictrack.addeventlistener("mute", e...
...ent handler is available for setting up a handler for the mute event. the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification. candidate recommendation initial specification. ...

MediaStreamTrackEvent() - Web APIs
the mediastreamtrackevent() constructor returns a newly created mediastreamtrackevent object, which represents an event announcing that a mediastreamtrack has been added to or removed from a mediastream. syntax var trackevent = new mediastreamtrackevent(type, {track: amediastreamtrack}); parameters the mediastreamtrackevent() constructor also inherits arguments from event(). type a domstring representing the name of the type of the mediastreamtrackevent. it is case-sensitive and can be "addtrack" or "removetrack". track a mediastreamtrack object representing the track which was added to or removed from the stream. return value a new mediastreamtrackevent, initialized based on the provided options. ...
... a domstring representing the name of the type of the mediastreamtrackevent. it is case-sensitive and can be "addtrack" or "removetrack". track a mediastreamtrack object representing the track which was added to or removed from the stream. return value a new mediastreamtrackevent, initialized based on the provided options. specifications specification status comment media capture and streamsthe definition of 'mediastreamtrackevent()' in that specification. candidate recommendation ...

MediaTrackControls.volume - Web APIs
however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the acceptable or required value(s) for an audio track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume. ...
...ly ignore any constraints they're unfamiliar with. syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the acceptable or required value(s) for an audio track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume. if this value is a number, the user agent will attempt to obtain media whose volume is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required volume (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. any constraint set which ...

MediaTrackConstraints.width - Web APIs
the mediatrackconstraints dictionary's width property is a constrainlong describing the requested or mandatory constraints placed upon the value of the width constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { width: constraint }; constraintsobject.width = constraint; value if this value is a number, the user agent will attempt to obtain media whose width is as close as possible to this number given the capabilities of the hardware and the other constraints specified. other...
... candidate recommendation initial specification. ...

MediaTrackSettings.displaySurface - Web APIs
the mediatracksettings dictionary's displaysurface property indicates the type of display surface being captured. syntax displaysurface = mediatracksettings.displaysurface; value the value of displaysurface is a string that comes from the displaycapturesurfacetype enumerated type, and is one of the following: application the stream's video track contains all of the windows belonging to the application chosen by the user. the windows are aggragated into a single video track, with any empty space filled with a backdrop; that backdrop is selected by the user agent. browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplaymedia() call. monitor the video track in the stream presents the complete contents of one or...
... is filled with a backdrop chosen by the user agent. window the stream's video track presents the contents of a single window selected by the user. the window may be from any application, not necessarily just from within the user agent. not all user agents support all of these surface types. specifications specification status comment screen capturethe definition of 'mediatracksettings.displaysurface' in that specification. working draft initial definition ...

MediaTrackSettings.height - Web APIs
the mediatracksettings dictionary's height property is an integer indicating the number of pixels tall mediastreamtrack is currently configured to be. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.height property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.height as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.height as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var height = mediatracksettings.height; value an integer value indicating the height, in pixels, of the video track as currently configured. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'height' in that specification. candidate recommend...

MediaTrackSettings.volume - Web APIs
the mediatracksettings dictionary's volume property is a double-precision floating-point number indicating the volume of the mediastreamtrack as currently configured, as a value from 0.0 (silence) to 1.0 (maximum supported volume for the device). this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.volume property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints th...
...either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var volume = mediatracksettings.volume; value a double-precision floating-point number indicating the volume, from 0.0 to 1.0, of the audio track as currently configured. example see example: constraint exerciser in capabilities, constraints, and settings for an example. ...

MediaTrackSettings.width - Web APIs
the mediatracksettings dictionary's width property is an integer indicating the number of pixels wide mediastreamtrack is currently configured to be. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.width property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...g either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var width = mediatracksettings.width; value an integer value indicating the width, in pixels, of the video track as currently configured. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'width' in that specification. candidate recommendati...

MediaTrackSupportedConstraints.autoGainControl - Web APIs
the mediatracksupportedconstraints dictionary's autogaincontrol property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the autogaincontrol constraint. if the constraint isn't supported, it's not included in the list, so this value will never be false. you can access the supported constraints dictionary by calling navigator.mediadevices.getsupportedconstraints(). the autogaincontrol constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media tracks; this obviously is contingent on whether or not the individual device supports automatic gain control as well; it's typically a feature provided by microphones. syntax ...
...sing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example this example simply displays whether or not your browser supports the autogaincontrol constraint. html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().autogaincontrol) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'autogaincontrol' in that specification. candidate recommendation initial specification. ...

MediaTrackSupportedConstraints.noiseSuppression - Web APIs
the mediatracksupportedconstraints dictionary's noisesuppression property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the noisesuppression constraint. if the constraint isn't supported, it's not included in the list, so this value will never be false. you can access the supported constraints dictionary by calling navigator.mediadevices.getsupportedconstraints(). the noisesuppression constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media tracks; this obviously is contingent on whether or not the individual device supports automatic gain control as well. syntax noisesuppressionsupported = supportedconstrain...
...ing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example this example simply displays whether or not your browser supports the noisesuppression constraint. html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().noisesuppression) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'noisesuppression' in that specification. candidate recommendation initial specification. ...

CSS Paged Media - CSS: Cascading Style Sheets
css paged media is a module of css that defines how page switches are handled. ...
... css paged media is a module of css that defines how page switches are handled. ...

Feature-Policy: unsized-media - HTTP
the http feature-policy header unsized-media directive controls whether the current document is allowed to change the size of media elements after the initial layout is complete. this restriction solves "layout instability" problem caused by providing default dimensions for images whose size is not specified in advance so that image doesn't change size after loading. syntax feature-policy: unsized-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an i...
...sing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. default value the default value for unsized-media is '*', that is unsized media elements are allowed for all origins by default. the page will re-flow every time an image with unknown dimensions is loaded. specifications specification status comment feature policy editor's draft initial definition. ...

Using audio and video in HTML - Web media technologies
note: this guide is a planned update to integrate content from various scattered places on mdn into one cohesive document or document set. the work is not yet scheduled but hopefully will come soon. ...
... note: this guide is a planned update to integrate content from various scattered places on mdn into one cohesive document or document set. the work is not yet scheduled but hopefully will come soon. ...

Guide to streaming audio and video - Web media technologies
<<<...xxxxxx...>>> protocols in addition to the configuration of the server and the streaming code, there are sometimes special protocols which can be used to optimize performance. https live streaming https live streaming (hls) is a protocol developed by apple and supported by safari on all of their platforms. hls may also be supported in other environments, although in some cases this support is conditional. ...
...e cases this support is conditional. for example, because many web sites' mobile-specific content assume that mobile browsers support hls, firefox for android does as well, in order to avoid strange compatibility errors from occurring due to this assumption being incorrect. the desktop version of android, however, does not support hls. hls uses playlists to allow the user to not only select the media to stream, but also to choose among versions or forms of the same media. for example, hls lets the server stream a video with multiple audio streams which the user can choose from, in order to hear their own language. additionally, forms of the stream can be provided which are optimized for different network conditions. in this way, live streams can be made flexible and highly performant. as of ...

@media - Archive of obsolete content
parent for archived media features. ...

Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms
continuous media is data where there is a timing relationship between source and destination. the most common examples of continuous media are audio and motion video. continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict. css can be used in a variety of contexts, including print media and some css, in particular, that used for layout behaves differently depending on the context it is in. continuous media, therefore, identifies a context where the content is not broken up, it flows continuously. web content displayed on a screen is continuous media, as is spoken content. ...

Test your skills: Media Queries and Responsive Design - Learn web development
note: due to the need to test your design in multiple screen sizes we do not have an interactive editor for this task. download the code and work locally, or use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...

nsIDOMHTMLMediaElement
dom/interfaces/html/nsidomhtmlmediaelement.idlscriptable the basis for the nsidomhtmlaudioelement and nsidomhtmlvideoelement interfaces, which in turn implement the <audio> and <video> html5 elements. 1.0 67 introduced gecko 1.9.1 inherits from: nsidomhtmlelement last changed in gecko 1.1 the nsidomhtmlmediaelement interface implements the dom htmlmediaelement interface. see that page for details. ...

CanvasCaptureMediaStreamTrack.canvas - Web APIs
the canvascapturemediastreamtrack canvas read-only property returns the htmlcanvaselement from which frames are being captured. syntax var elt = stream.canvas; value an htmlcanvaselement indicating the canvas which is the source of the frames being captured. example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // do things to the stream ... // obtain the canvas associated with the stream var canvas = stream.canvas; specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastreamtrack.canvas' in that specification. working draft initial definition ...

Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other listeners of the same event from being called. if several listeners are attached to the same element for the same event type, they are called in the order in which they were added. if stopimmediatepropagation() is invoked during one such call, no remaining listeners will be called. syntax event.stopimmediatepropagation(); specifications specification status comment domthe definition of 'event.stopimmediatepropagation()' in that specification. living standard ...

HTMLMediaElement.crossOrigin - Web APIs
the htmlmediaelement.crossorigin property is the cors setting for this image element. see cors settings attributes for details. specifications specification status comment html living standardthe definition of 'htmlmediaelement.crossorigin' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.crossorigin' in that specification. recommendation initial definition ...

HTMLMediaElement.defaultPlaybackRate - Web APIs
the htmlmediaelement.defaultplaybackrate property indicates the default playback rate for the media. syntax var dspeed = video.defaultplaybackrate; audio.defaultplaybackrate = 1.0; value a double. 1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster. the value 0.0 is invalid and throws a not_supported_err exception. example var obj = document.createelement('video'); console.log(obj.defaultplaybackrate); // 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultplaybackrate' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.defaultplaybackrate' in that specification. recommen...

HTMLMediaElement.disableRemotePlayback - Web APIs
(false means "not disabled", which means "enabled") example var obj = document.createelement('audio'); obj.disableremoteplayback = true; specifications specification status comment remote playback apithe definition of 'disableremoteplayback' in that specification. candidate recommendation initial definition. ...

HTMLMediaElement.duration - Web APIs
the read-only htmlmediaelement property duration indicates the length of the element's media in seconds. syntax myduration = htmlmediaelement.duration value a double-precision floating-point value indicating the duration of the media in seconds. if no media data is available, the value nan is returned. if the element's media doesn't have a known duration—such as for live media streams—the value of duration is +infinity. examples var obj = document.createelement('video'); console.log(obj.duration); // nan specifications specification status comment html living standardthe definition of 'htmlmediaelement.duration' in that specification. living standard html5the definition of 'htmlmediaelement.duration' in that specification. recommendation ...

HTMLMediaElement.ended - Web APIs
the htmlmediaelement.ended indicates whether the media element has ended playback. syntax var isended = htmlmediaelement.ended value a boolean which is true if the media contained in the element has finished playing. if the source of the media is a mediastream, this value is true if the value of the stream's active property is false. example var obj = document.createelement('video'); console.log(obj.ended); // false specifications specification status comment html living standardthe definition of 'htmlmediaelement.ended' in that specification. living standard html5the definition of 'htmlmediaelement.ended' in that specification. recommendation ...

HTMLMediaElement.fastSeek() - Web APIs
return value none. example this example quickly seeks to 20-second position of the video element. let myvideo = document.getelementbyid("myvideoelement"); myvideo.fastseek(20); specifications specification status comment html living standardthe definition of 'fastseek()' in that specification. ...

HTMLMediaElement.loop - Web APIs
the htmlmediaelement.loop property reflects the loop html attribute, which controls whether the media element should start over when it reaches the end. syntax var loop = video.loop; audio.loop = true; value a boolean. example var obj = document.createelement('video'); obj.loop = true; // true specifications specification status comment html living standardthe definition of 'htmlmediaelement.loop' in that specification. living standard html5the definition of 'htmlmediaelement.loop' in that specification. recommendation ...

HTMLMediaElement.muted - Web APIs
the htmlmediaelement.muted indicates whether the media element muted. syntax var ismuted = audioorvideo.muted audio.muted = true; value a boolean. true means muted and false means not muted. example var obj = document.createelement('video'); console.log(obj.muted); // false specifications specification status comment html living standardthe definition of 'htmlmediaelement.muted' in that specification. living standard html5the definition of 'htmlmediaelement.muted' in that specification. recommendation ...

HTMLMediaElement.onerror - Web APIs
when an error occurs, the specified function will be called. if null, no error handler is in effect. specifications specification status comment html living standardthe definition of 'onerror' in that specification. ...

HTMLMediaElement.pause() - Web APIs
return value none. exceptions none. specifications specification status comment html living standardthe definition of 'pause()' in that specification. living standard initial definition; living specification. html5the definition of 'pause()' in that specification. recommendation initial definition. ...

HTMLMediaElement.paused - Web APIs
the read-only htmlmediaelement.paused property tells whether the media element is paused. syntax var ispaused = audioorvideo.paused value a boolean. true is paused and false is not paused. example var obj = document.createelement('video'); console.log(obj.paused); // true specifications specification status comment html living standardthe definition of 'htmlmediaelement.paused' in that specification. living standard html5the definition of 'htmlmediaelement.paused' in that specification. recommendation ...

HTMLMediaElement.sinkId - Web APIs
the htmlmediaelement.sinkid read-only property returns a domstring that is the unique id of the audio device delivering output. if it is using the user agent default, it returns an empty string. this id should be one of the mediadeviceinfo.deviceid values returned from mediadevices.enumeratedevices(), id-multimedia, or id-communications. syntax var sinkid = htmlmediaelement.sinkid specifications specification status comment audio output devices apithe definition of 'sinkid' in that specification. candidate recommendation initial definition. older versions of this spec were called "media capture output". ...

HTMLMediaElement.volume - Web APIs
the htmlmediaelement.volume property sets the volume at which the media will be played. syntax var volume ​= video.volume; //1 value a double values must fall between 0 and 1, where 0 is effectively muted and 1 is the loudest possible value. example var obj = document.createelement('audio'); console.log(obj.volume); // 1 obj.volume = 0.75; specifications specification status comment html living standardthe definition of 'htmlmediaelement.volume' in that specification. living standard html5the definition of 'htmlmediaelement.volume' in that specification. recommendation ...

MediaDeviceInfo.label - Web APIs
the label readonlyinline property of the mediadeviceinfo interface returns a domstring, that is a label describing this device (for example "external usb webcam"). only available during active mediastream use, or when persistent permissions have been granted. syntax var label = mediadeviceinfo.label; value a domstring which describes the media device. for security reasons, the label is always an empty string ("") if the user has not obtained permission to use at least one media device, either by starting a stream from the microphone or camera, or by persistent permissions being granted. specifications specification status comment media capture and streamsthe definition of 'label' in that specification. candidate recommendation initial definition. ...

MediaDevices: devicechange event - Web APIs
a devicechange event is sent to a mediadevices instance whenever a media device such as a camera, microphone, or speaker is connected to or removed from the system. it's a generic event with no added properties. bubbles no cancelable no interface event event handler ondevicechange example you can use the devicechange event in an addeventlistener method: navigator.mediadevices.addeventlistener('devicechange', function(event) { updatedevicelist(); }); or use the ondevicechange event handler property: navigator.mediadevices.ondevicechange = function(event) { updatedevicelist(); } specifications specification status media capture and streamsthe definition of 'devicechange' in that specification. candidate...

MediaKeyMessageEvent.messageType - Web APIs
the mediakeymessageevent.messagetype read-only property indicates the type of message. it may be one of license-request, license-renewal, license-release, or individualization-request. syntax var messagetype = mediakeymessageevent.messagetype; specifications specification status comment encrypted media extensionsthe definition of 'messagetype' in that specification. recommendation initial definition ...

MediaKeySession.closed - Web APIs
the mediakeysession.closed read-only property returns a promise signaling when a mediakeysession closes. this promise can only be fulfilled and is never rejected. closing a session means that licenses and keys associated with it are no longer valid for decrypting media data. syntax var promise = mediakeysessionobj.closed; value a promise. specifications specification status comment encrypted media extensionsthe definition of 'closed' in that specification. recommendation initial definition ...

MediaKeyStatusMap.forEach() - Web APIs
the foreach property of the mediakeystatusmap interface calls callback once for each key-value pair in the status map, in insertion order. if an argument is present it will be passed to the callback. syntax mediakeystatusmap.foreach(callback[, thisarg]) parameters callback function to execute for each element, taking three arguments: currentvalue the current element being processed in the array. index the index of the current element being processed in the array. array which array foreach() is being applied to. thisarg optional value used as this when executing callback. returns undefined. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the co...

MediaKeyStatusMap.size - Web APIs
recommendation initial definition. browser compatibility 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. ...

createMediaKeys() - Web APIs
the mediakeysystemaccess.createmediakeys() method returns a promise that resolves to a new mediakeys object. syntax var mediakeys = await mediakeysystemaccess.createmediakeys(); specifications specification status comment encrypted media extensionsthe definition of 'createmediakeys()' in that specification. recommendation initial definition ...

MediaKeySystemAccess - Web APIs
the mediakeysystemaccess interface of the encryptedmediaextensions api provides access to a key system for decryption and/or a content protection provider. you can request an instance of this object using the navigator.requestmediakeysystemaccess() method. properties mediakeysystemaccess.keysystem read only returns a domstring identifying the key system being used. methods mediakeysystemaccess.createmediakeys() returns a promise that resolves to a new mediakeys object. mediakeysystemaccess.getconfiguration() returns a mediakeysystemconfiguration object with the supported combination of configuration options. specifications specification status comment encrypted media extensionsthe definition of 'mediakeysystemaccess' in that specification. recommen...

MediaKeys - Web APIs
the mediakeys interface of encryptedmediaextensions api represents a set of keys that an associated htmlmediaelement can use for decryption of media data during playback. properties none. methods mediakeys.createsession() returns a new mediakeysession object, which represents a context for message exchange with a content decryption module (cdm). mediakeys.setservercertificate() returns a promise to a server certificate to be used to encrypt messages to the license server. examples //tbd specifications specification status comment encrypted media extensionsthe definition of 'mediakeys' in that specification. recommendation initial definition. ...

MediaRecorder.onwarning - Web APIs
the mediarecorder.onwarning event handler (part of the mediarecorder api) handles the recordingwarning event, allowing you to run code in response to non-fatal errors being thrown during media recording via a mediarecorder, which don't halt recording. syntax mediarecorder.onwarning = function(event) { ... } mediarecorder.addeventlistener('warning', function(event) { ... }) example ... mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ... properties message contains information about the error that occurred. ...

MediaRecorder.videoBitsPerSecond - Web APIs
the videobitspersecond read-only property of the mediarecorder interface returns the video encoding bit rate in use. this may differ from the bit rate specified in the constructor, if it was provided. syntax var videobitspersecond = mediarecorder.videobitspersecond value a number (unsigned long). example // tbd specifications specification status comment mediastream recordingthe definition of 'videobitspersecond' in that specification. working draft initial definition. ...

MediaSettingsRange.max - Web APIs
the max read-only property of the mediasettingsrange interface returns the maximum value of the settings range. syntax var max = mediasettingsrange.max value a double integer. specifications specification status comment mediastream image capturethe definition of 'max' in that specification. working draft initial definition. ...

MediaSettingsRange.min - Web APIs
the min read-only property of the mediasettingsrange interface returns the minimum value of the settings range. syntax var min = mediasettingsrange.min value a double integer. specifications specification status comment mediastream image capturethe definition of 'min' in that specification. working draft initial definition. ...

MediaSettingsRange.step - Web APIs
the step read-only property of the mediasettingsrange interface returns the minimum difference between consecutive values of the settings range. syntax var step = mediasettingsrange.step value a double integer. specifications specification status comment mediastream image capturethe definition of 'step' in that specification. working draft initial definition. ...

MediaSource.clearLiveSeekableRange() - Web APIs
the clearliveseekablerange() method of the mediasource interface clears a seekable range previously set with a call to setliveseekablerange(). syntax mediasource.clearliveseekablerange() parameters none. return value undefined specifications specification status comment media source extensionsthe definition of 'clearliveseekablerange()' in that specification. recommendation initial definition. ...

MediaSource.removeSourceBuffer() - Web APIs
the removesourcebuffer() method of the mediasource interface removes the given sourcebuffer from the sourcebuffers list associated with this mediasource object. syntax mediasource.removesourcebuffer(sourcebuffer); parameters sourcebuffer the sourcebuffer object to be removed. return value undefined exceptions exception explanation notfounderror the supplied sourcebuffer doesn't exist in mediasource.sourcebuffers. examples for (i = 0; i < 10; i++) { var sourcebuffer = mediasource.addsourcebuffer(mimecodec); } mediasource.removesourcebuffer(mediasource.sourcebuffers[0]); specifications specification status comment media source extensionsthe definition of 'removesourcebuffer()' in that specification. recomm...

MediaStream: addtrack event - Web APIs
the addtrack event is fired when a new mediastreamtrack object has been added to a mediastream. bubbles no cancelable no interface mediastreamtrackevent event handler property onaddtrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('addtrack', (event) => { console.log(`new ${event.track.kind} track added`); }); using the onaddtrack event handler property: let stream = new mediastream(); stream.onaddtrack = (event) => { console.log(`new ${event.track.kind} track added`); }; specifications specification status media capture and streamsthe definition of 'addtrack' in that specification. candidate recommendation ...

MediaStream.clone() - Web APIs
the clone() method of the mediastream interface creates a duplicate of the mediastream. this new mediastream object has a new unique id and contains clones of every mediastreamtrack contained by the mediastream on which clone() was called. syntax var stream = mediastream.clone(); parameters none. return value a new mediastream instance which has a new unique id and contains clones of every mediastreamtrack contained by the mediastream on which clone() was called. specifications specification status comment media capture and streamsthe definition of 'mediastream.clone()' in that specification. candidate recommendation initial definition. ...

MediaStream.ended - Web APIs
the ended read-only property of the mediastream interface returns a boolean value which is true if the stream has been completely read, or false if the end of the stream has not been reached. this value once the ended event has been fired. this property has been removed from the specification; you should instead rely on the ended event or check the value of mediastreamtrack.readystate to see if its value is "ended" for the track or tracks you want to ensure have finished playing. syntax var hasended = mediastream.ended; value a boolean value that returns true if the end of the stream has been reached. specifications no longer part of any specification. this property was part of earlier drafts of the media capture and streams specification. ...

MediaStream.getTracks() - Web APIs
the gettracks() method of the mediastream interface returns a sequence that represents all the mediastreamtrack objects in this stream's track set, regardless of mediastreamtrack.kind. syntax var mediastreamtracks = mediastream.gettracks() parameters none. return value an array of mediastreamtrack objects. example navigator.mediadevices.getusermedia({audio: false, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the stream after 5 seconds settimeout(() => { const tracks = mediastream.gettracks() tracks[0].stop() }, 5000) }) specifications specification status comment media capture and streamsthe definition of 'gettracks()' in that specification. candidate recommendation initial d...

MediaStream: removetrack event - Web APIs
the removetrack event is fired when a new mediastreamtrack object has been removed from a mediastream. bubbles no cancelable no interface mediastreamtrackevent event handler property onremovetrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('removetrack', (event) => { console.log(`${event.track.kind} track removed`); }); using the onremovetrack event handler property: let stream = new mediastream(); stream.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); }; specifications specification status media capture and streamsthe definition of 'removetrack' in that specification. candidate recommendation ...

MediaStreamAudioDestinationNode.stream - Web APIs
the stream property of the audiocontext interface represents a mediastream containing a single audiomediastreamtrack with the same number of channels as the node itself. you can use this property to get a stream out of the audio graph and feed it into another construct, such as a media recorder. syntax var audioctx = new audiocontext(); var destination = audioctx.createmediastreamdestination(); var mystream = destination.stream; value a mediastream. example specifications specification status comment web audio apithe definition of 'stream' in that specification. working draft ...

MediaStreamAudioSourceOptions - Web APIs
the mediastreamaudiosourceoptions dictionary provides configuration options used when creating a mediastreamaudiosourcenode using its constructor. it is not needed when using the audiocontext.createmediastreamsource() method. properties mediastream a required property which specifies the mediastream from which to obtain audio for the node. specifications specification status comment web audio apithe definition of 'mediastreamaudiosourceoptions' in that specification. working draft ...

MediaStreamEvent.stream - Web APIs
the read-only property mediastreamevent.stream returns the mediastream associated with the event. syntax var stream = event.stream; example pc.onaddstream = function( ev ) { alert("a stream (id: '" + ev.stream.id + "') has been added to this connection."); }; ...

MediaStreamEvent - Web APIs
the mediastreamevent interface represents events that occurs in relation to a mediastream. two events of this type can be thrown: addstream and removestream. properties a mediastreamevent being an event, this event also implements these properties. mediastreamevent.stream read only contains the mediastream containing the stream associated with the event. constructors mediastreamevent() returns a new mediastreamevent. it takes two parameters, the first being a domstring representing the type of the event; the second a dictionary containing the mediastream it refers to. methods a mediastreamevent being an event, this event also implements these properties. there is no specific mediastreamevent method. examples pc.onaddstream = function( ev ) { alert("a stream (id: '" + ev.

MediaStreamTrack.clone() - Web APIs
the clone() method of the mediastreamtrack interface creates a duplicate of the mediastreamtrack. this new mediastreamtrack object is identical except for its unique id. syntax const newtrack = track.clone() return value a new mediastreamtrack instance which is identical to the one clone() was called, except for its new unique id. specifications specification status comment media capture and streamsthe definition of 'clone()' in that specification. candidate recommendation initial definition. ...

MediaStreamTrack.onoverconstrained - Web APIs
the mediastreamtrack.onoverconstrained event handler is a property called when the overconstrained event is received. such an event is sent when the track is again able to send data. syntax track.onoverconstrained = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}. an event handler always has one single parameter, containing the event, here of type mediastreamerrorevent. example dc.onoverconstrained = function() { alert("overconstrained event detected!"); }; ...

MediaStreamTrack.remote - Web APIs
it returns a boolean with a value of true if the track is sourced remotely (that is, sourced by an rtcpeerconnection), or false if it is sourced locally. ...

MediaStreamTrackAudioSourceOptions - Web APIs
the mediastreamtrackaudiosourceoptions dictionary is used when specifying options to the mediastreamtrackaudiosourcenode() constructor. it isn't needed when using the audiocontext.createmediastreamtracksource() method. properties mediastreamtrack the mediastreamtrack from which to take audio data for this node's output. specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions' in that specification. working draft ...

NDEFRecord.mediaType - Web APIs
the mediatype property ofthe ndefrecord interface is usvstring containing the mime type of the record payload. syntax ndefrecord.mediatype value a usvstring, corresponding to a mime type of the record payload. specifications specification status comment web nfc, ndefrecord.mediatype draft initial definition. ...

Navigator.mediaDevices - Web APIs
the navigator.mediadevices read-only property returns a mediadevices object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing. syntax var mediadevices = navigator.mediadevices; return value the mediadevices singleton object. usually, you just use this object's members directly, such as by calling navigator.mediadevices.getusermedia(). specifications specification status comment media capture and streamsthe definition of 'navigatorusermedia.mediadevices' in that specification. candidate recommendation initial definition. ...

Window.clearImmediate() - Web APIs
this method clears the action specified by window.setimmediate. this method is not expected to become standard, and is only implemented by recent builds of internet explorer and node.js 0.10+. it meets resistance both from gecko (firefox) and webkit (google/apple). syntax window.clearimmediate( immediateid ) where immediateid is a id returned by window.setimmediate. examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification. editor's draft initial definition. ...

Paged media - CSS: Cascading Style Sheets
it allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. ...

Using images in HTML - Web media technologies
e on selecting and configuring image types. image file type and format guide a guide to the various image file types commonly supported by web browsers including details about their individual use cases, capabilities, and compatibility factors. additionally, this article provides guidance for selecting the best image file type for a given situation. mapping the width and height attributes of media container elements to their aspect-ratio this changes how browsers load images so their aspect ratios are calculated by the browser early on and can later be used to correct the display size of an image before it's loaded. other topics related topics that may be of interest. learn html: responsive images in this article, we'll learn about the concept of responsive images — images tha...

Index - Web APIs
web audio api the analysernode interface represents a node able to provide real-time frequency and time-domain analysis information. it is an audionode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations. 52 analysernode.analysernode() api, analysernode, audio, constructor, media, reference, web audio api the analysernode constructor of the web audio api creates a new analysernode object instance. 53 analysernode.fftsize api, analysernode, property, reference, web audio api, fftsize the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when performing a fast fourier tr...
...api the audiobuffer interface represents a short audio asset residing in memory, created from an audio file using the audiocontext.decodeaudiodata() method, or from raw data using audiocontext.createbuffer(). once put into an audiobuffer, the audio can then be played by being passed into an audiobuffersourcenode. 104 audiobuffer() api, audio, audiobuffer, buffer, constructor, media, reference, web audio, web audio api, sound the audiobuffer constructor of the web audio api creates a new audiobuffer object. 105 audiobuffer.copyfromchannel() api, audio, audiobuffer, copying, frames, method, reference, samples, web audio, web audio api, copy, copyfromchannel, sound the copyfromchannel() method of the audiobuffer interface copies the audio sample data...
...nels api, audiobuffer, property, reference, web audio api, numberofchannels an integer. 111 audiobuffer.samplerate api, audiobuffer, property, reference, web audio api, samplerate a floating-point value indicating the current sample rate of the buffers data, in samples per second. 112 audiobuffersourcenode api, audio, audiobuffersourcenode, interface, media, reference, web audio api the audiobuffersourcenode interface is an audioscheduledsourcenode which represents an audio source consisting of in-memory audio data, stored in an audiobuffer. it's especially useful for playing back audio which has particularly stringent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being...
...And 861 more matches

Signaling and video calling - Web APIs
this process is called signaling and involves both devices connecting to a third, mutually agreed-upon server. through this third server, the two devices can locate one another, and exchange negotiation messages. ...
...this process is called signaling and involves both devices connecting to a third, mutually agreed-upon server. through this third server, the two devices can locate one another, and exchange negotiation messages. ...
...of our websocket documentation (this article link is forthcoming; it isn't actually online yet) to support opening a two-way video call between users. you can try out this example on glitch, and you can remix the example to experiment with it as well. you can also look at the full project on github. ...
...And 46 more matches

Audio and Video Delivery - Developer guides
we can deliver audio and video on the web in a number of ways, ranging from 'static' media files to adaptive live streams. this article is intended as a starting point for exploring the various delivery mechanisms of web based media and compatibility with popular browsers. the audio and video elements whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. currently, to support all browsers we need to specify two formats, although with the adoption of mp3 and mp4 formats in firefox and opera, this is changing fast. you can find compatibility information in the guide to media types and formats on the web. to deliver video and audio, the general workf...
... to deliver video and audio, the general workflow is usually something like this: check what format the browser supports via feature detection (usually a choice of two, as stated above). if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want to play/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">d...
... video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. we instruct the video to autoplay but to be muted by default. note: the autoplay attribute may be ignored by some mobile browsers. also, the autoplay feature can be controversial when misused. it's strongly recommended that you read the autoplay guide for media and web audio apis to learn how to use autoplay wisely.. for further info see <video> element and creating a cross-browser video player. audio and video fallback you can create a more comprehensive fallback using flash. using flashmediaelement.swf is one way. <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for ...
...And 42 more matches

Key Values - Web APIs
ories of key, with an explanation of what the key is typically used for. corresponding virtual keycodes for common platforms are included where available. learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character. keyboardevent.key value description virtual keycode windows mac linux a...
...ish key. vk_oem_finish (0xf1) "help" the help key. opens or toggles the display of help information. vk_help (0x2f) appcommand_help kvk_help (0x72) gdk_key_help (0xff6a) qt::key_help (0x01000058) keycode_help (259) "pause" the pause key. pauses the current application or state, if applicable. ...
... "help" the help key. opens or toggles the display of help information. vk_help (0x2f) appcommand_help kvk_help (0x72) gdk_key_help (0xff6a) qt::key_help (0x01000058) keycode_help (259) "pause" the pause key. pauses the current application or state, if applicable. ...
...And 39 more matches

Video and Audio APIs - Learn web development
this article shows you how to do common tasks such as creating custom playback controls. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. ...
...a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls. if you don't specify this, you get no playback controls: this is not as immediately useful for video playback, but it does have advantages. one big issue with the native browser controls is that they are different in each browser — not very good for cross-browser support! another big issue is that the native controls in most browsers aren't very keyboard-accessible. you can solve both these problems by hiding the native controls (by removing the controls attribute), and p...
...h browser — not very good for cross-browser support! another big issue is that the native controls in most browsers aren't very keyboard-accessible. you can solve both these problems by hiding the native controls (by removing the controls attribute), and programming your own with html, css, and javascript. in the next section we'll look at the basic tools we have available to do this. the htmlmediaelement api part of the html5 spec, the htmlmediaelement api provides features to allow you to control video and audio players programmatically — for example htmlmediaelement.play(), htmlmediaelement.pause(), etc. this interface is available to both <audio> and <video> elements, as the features you'll want to implement are nearly identical. let's go through an example, adding features as we go.
...And 36 more matches

Capabilities, constraints, and settings - Web APIs
igure this stuff out for you, then implement polyfills to patch the holes in the implementation on your behalf. the twin concepts of constraints and capabilities let the browser and web site or app exchange information about what constrainable properties the browser's implementation supports and what values it supports for each one. ...
...his article discusses capabilities and constraints, as well as media settings, and includes an example we call the constraint exerciser. the constraint exerciser lets you experiment with the results of different constraint sets being applied to the audio and video tracks coming from the computer's a/v input devices (such as its webcam and microphone). overview the process works like this (using mediastreamtrack as an example): if needed, call mediadevices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about. this isn't always necessary, since any that aren't known will simply be ignored when you specify them—but if you have any that you can't get by without, you can start by checking to be sure they're o...
.... the track's getconstraints() method returns the set of constraints passed into the most recent call to applyconstraints(). this may not represent the actual current state of the track, due to properties whose requested values had to be adjusted and because platform default values aren't represented. for a complete representation of the track's current configuration, use getsettings(). ...
...And 32 more matches

Index - Archive of obsolete content
the code snippets on this page will let your site work until these new features are more widely available. 190 isdefaultnamespace no summary! 191 js xpcom code snippets, javascript...
...ys the icon corresponding to the current tinderbox state: 398 tinderbox add-ons, extensions tinderbox is a web tool for tracking the status of the mozilla source code. it consists of a set of client machines that continuously build and test mozilla and report their results back to a server that makes those results available via a web page. the tool enables mozilla.org to be immediately notified of changes to the code that prevent mozilla from compiling and running (or compromise performance and footprint) so they can get someone to fix the problem or reverse the changes. 399 creating a release tag junk here are directions for creating a release from a linux system. note that there are a couple of extra files for win32 and macintosh that aren't pulled by...
...rom the getcontentdomwindow call. then simply call nsiwebbrowser->do_getinterface on the nsiwebbrowser to retrieve the nsieditingsession from it. from there you call editingsession->makewindoweditable(domwindow, editortype, pr_true). the first parameter is the nsidomwindow you just retrieved, the second is the editor type you want to create, and the third is whether you want the window editable immediately or when the document is done loading. in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!! nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(editingsession)); if (editingsession) editingsession->makewindoweditable(domwindow, "html", pr_tru?e); ...
...And 30 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
t — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery. you can then view previously-captured images and delete them. other articles will discuss the functionality in more detail, but here we're interested in the layout. note: you can find the snapshot app on github; check out the code and help improve it. you can also see snapshot running...
...apture stills from that video stream (using html5 <canvas>), and save them to a gallery. you can then view previously-captured images and delete them. other articles will discuss the functionality in more detail, but here we're interested in the layout. note: you can find the snapshot app on github; check out the code and help improve it. you can also see snapshot running live. note that getusermedia() is an experimental technology, which currently only works in google chrome and firefox desktop. more functionality and a clean up of the styling of snapshot are planned for a future date. our desktop layout for snapshot is three columns, containing the camera viewer, image capture view, and gallery, respectively. the markup is very simple: <x-deck selected-index="0"> <x-card> … ...
...t * { box-sizing: border-box } ftw, by paul irish. flexible replaced elements things are working fairly well now, but there are still some issues just waiting to present themselves. for a start, let's have a look at what happens when we include the <video> and <img> elements inside our first two columns, naked and unstyled. because the size of replaced elements is dictated by the size of the media inserted into them, and the media is a fixed size, they explode out of their containing elements and make a mess of the layout. this is pretty horrible, but generally this kind of problem is easily fixed with some simple css: img, video { max-width: 100%; } this tells the replaced elements to remain constrained inside their container's widths, no matter what. however, if they aren't as wide a...
...And 29 more matches

@import - CSS: Cascading Style Sheets
the @import css at-rule is used to import style rules from other style sheets. syntax @import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; where: url is a <string> or a <url> representing the location of the resource to import. the url may be absolute or relative. note that the url for a mozilla package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). see here for more information. list-of-media-queries is a comma-separated list of media queries conditioning the application of the css rules defined in the linked url. if the browser does not support any these queries, it doe...
...wser does not support any these queries, it does not load the linked resource. supports-query is either a <supports-condition> or a <declaration>. description imported rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules. ...
...ueries, it does not load the linked resource. supports-query is either a <supports-condition> or a <declaration>. description imported rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules. so that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. ...
...And 25 more matches

Cross-browser audio basics - Developer guides
mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also support ...
...o> tag. in this case, we've provided a simple paragraph including a link to download the audio directly. the controls attribute on the <audio> element is specified when we require the browser to provide us with default playback controls. if you don't specify this attribute, no controls will appear — and you will instead have to create your own controls and program their functionality using the media api (see below). however, that can be a good approach, because the default controls look different among various browsers. so creating your own controls ensures a consistent look for the controls across all browsers. html5 audio in detail now we've looked at a basic example, let's now explore the different aspects of html5 audio in more detail. audio html attributes we can specify a number o...
...n as possible and without any user interaction — in short, the audio will autoplay. <audio autoplay> ... </audio> note: this value is often ignored on mobile platforms, and its use is not recommended unless really necessary. auto-playing audio (and video) is usually really annoying. plus browsers have policies that will block autoplay entirely in many situations. see the autoplay guide for media and web audio apis for details. loop the loop attribute will ensure that upon getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again. <audio loop> ... </audio> muted if you want the audio to start muted (no volume), add the muted attribute. <audio muted> ... </audio> note: this value is often ignored on mobile platforms. preload...
...And 22 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object model (aom), contains accessibility-related information for most html elements. 13 adobe flash adobe, codingscripting, flash, glossary, infrastructure flash is an obsolescent technology developed by adobe for viewing expressive web applications, multimedia content, and streaming media. adobe flash can run from supporting web browsers via a browser plug-in. 14 ajax ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest. 15 algorithm codi...
...odingscripting, glossary a constructor belongs to a particular class object that is instantiated. the constructor initializes this object and can provide access to its private information. the concept of a constructor can be applied to most object-oriented programming languages. essentially, a constructor in javascript is usually declared at the instance of a class. 89 continuous media glossary, media continuous media is data where there is a timing relationship between source and destination. the most common examples of continuous media are audio and motion video. continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict. 90 control f...
... type of the connection. 127 element codingscripting, glossary, html an element is a part of a webpage. in xml and html, an element may contain a data item or a chunk of text or an image, or perhaps nothing. a typical element includes an opening tag with some attributes, enclosed text content, and a closing tag. 128 empty element codingscripting, glossary, intermediate an empty element is an element from html, svg, or mathml that cannot have any child nodes (i.e., nested elements or text nodes). 129 encapsulation codingscripting, glossary encapsulation is the packing of data and functions into one component (for example, a class) and then controlling access to that component to make a "blackbox" out of the object. because of this, a...
...And 21 more matches

Using the Screen Capture API - Web APIs
in this article, we will examine how to use the screen capture api and its getdisplaymedia() method to capture part or all of a screen for streaming, recording, or sharing during a webrtc conference session. note: it may be useful to note that recent versions of the webrtc adapter.js shim include implementations of getdisplaymedia() to enable screen sharing on browsers that support it but do not implement the current standard api. this works with at least chrome, edge, and firefox. capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.mediadevices.getdisplaymedia(), which returns a promise that resolves to a stream containing the live screen contents. starting screen capture: async/await style async function startcapture(displaymedi...
... capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.mediadevices.getdisplaymedia(), which returns a promise that resolves to a stream containing the live screen contents. starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below. ...
... try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below. starting screen capture: promise style function startcapture(displaymediaoptions) { let capturestream = null; return navigator.mediadevices.getdisplaymedia(displaymediaoptions) .catch(err => { console.error("error:" + err); return null; }); } either way, the user agent responds by presenting a user interface that prompts the user to choose the screen area to share. ...
...And 21 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
the html video element (<video>) embeds a media player which supports video playback into the document. you can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows simple usage of the <video> element. ...
...provide a more appropriate user experience. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the above example shows simple usage of the <video> element. in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc. the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element. attributes like all other...
... begins to play back as soon as it can do so without stopping to finish loading the data. note: sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so 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. see our autoplay guide for additional information about how to properly use autoplay. to disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the <video> tag at all. to remove autoplay, the attribute needs to be removed altogether. in some browsers (e.g. chrome 70.0) ...
...And 21 more matches

Experimental features in Firefox
and not when they are focused using a mouse or other pointing device. see bug 1617600 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.focus-visible.enabled single numbers as aspect ratio in media queries support for using a single <number> as a <ratio> when specifying the aspect ratio for a media query. see bug 1565562 for more details. release channel version added enabled by default? nightly 70 no developer edition 70 no beta 70 no release 70 no preference name layout.css.aspect-ratio-number.ena...
...l grid layout on the other. this allows to create gallery style layouts like on pinterest. see bug 1607954 for more details. release channel version added enabled by default? nightly 77 no developer edition 77 no beta 77 no release 77 no preference name layout.css.grid-template-masonry-value.enabled media feature: prefers-contrast the prefers-contrast media feature is used to detect whether the user has specified a preference for higher (or lower) contrast in the presentation of web content. refer to bug 1506364 for more details. release channel version added enabled by default? nightly 80 no developer edition 80 no beta 80 no ...
...elease channel version added enabled by default? ...
...And 20 more matches

Index - Learn web development
how to use these technologies responsibly so that all readers might use your creations on the web. to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross browser testing, and some tips on enforcing accessibility from the start. we'll cover accessibility in special detail. 3 accessible multimedia accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multimedia, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions. 4 assessment: accessibility troubleshooting accessibility, assessment, beginner, css, codingscripting, html,...
...these features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. they make async code look more like old-school synchronous code, so they're well worth learning. this article gives you what you need to know. 56 client-side web apis api, articles, beginner, codingscripting, dom, graphics, javascript, landing, learn, media, module, webapi, data when writing client-side javascript for web sites or applications, you will quickly encounter application programming interfaces (apis). apis are programming features for manipulating different aspects of the browser and operating system the site is running on, or manipulating data from other web sites or services. in this module, we will explore what apis are, and how...
... 3rd party, api, beginner, codingscripting, google maps, learn, nytimes, third party, youtube this article has given you a useful introduction to using third-party apis to add functionality to your websites. 63 video and audio apis api, article, audio, beginner, codingscripting, guide, javascript, learn, video i think we've taught you enough in this article. the htmlmediaelement api makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. see the "see also" section below for links to more complex and interesting functionality. 64 introducing javascript objects article, assessment, beginner, codingscripting, guide, javascript, learn, objects, tutorial in javascript, most thin...
...And 18 more matches

RTCPeerConnection.addTrack() - Web APIs
the specified track doesn't necessarily have to already be part of any of the specified streams. ...
... the specified track doesn't necessarily have to already be part of any of the specified streams. ...
... the specified track doesn't necessarily have to already be part of any of the specified streams. instead, the streams are simply a way to group tracks together on the receiving end of the connection, making sure they are synchronized. ...
...And 18 more matches

RTCPeerConnection - Web APIs
on.currentremotedescription or rtcpeerconnection.remotedescription to get the current session description for the remote endpoint. for details on the difference, see pending and current descriptions in webrtc connectivity.remotedescription read only the read-only property rtcpeerconnection.remotedescription returns a rtcsessiondescription describing the session (which includes configuration and media information) for the remote end of the connection. if this hasn't been set yet, this is null.sctp the read-only sctp property on the rtcpeerconnection interface returns an rtcsctptransport describing the sctp transport over which sctp data is being sent and received. if sctp hasn't been negotiated, this value is null.signalingstate read only the read-only signalingstate property on the rtcpeerco...
...f the signaling process on the local end of the connection while connecting or reconnecting to another peer. ...
...cting to another peer. see signaling in lifetime of a webrtc session for more details about the signaling process.event handlersalso inherits event handlers from: eventtargetonaddstream the rtcpeerconnection.onaddstream event handler is a property containing the code to execute when the addstream event, of type mediastreamevent, is received by this rtcpeerconnection. such an event is sent when a mediastream is added to this connection by the remote peer. the event is sent immediately after the call setremotedescription() and doesn't wait for the result of the sdp negotiation.onconnectionstatechangethe rtcpeerconnection.onconnectionstatechange property specifies an eventhandler which is called to handle the connectionstatechange event when it occurs on an instance of rtcpeerconnection. this hap...
...And 18 more matches

WebRTC API - Web APIs
webrtc (web real-time communication) is a technology which enables web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. the set of standards that comprise webrtc makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user installs plug-ins or any other third-party software. webrtc consists of several interrelated apis and protocols which work together to achieve this. the documentation you'll find here will help you understand the fundamentals of webrtc, how to set up and use both data and media connections, and more. interoperability because implementations of webrtc are still evolving, and because each browser has differe...
...the environments supporting it. adapter.js also handles prefixes and other naming differences to make the entire webrtc development process easier, with more broadly compatible results. the library is also available as an npm package. to learn more about adapter.js, see improving compatibility using webrtc adapter.js. webrtc concepts and usage webrtc serves multiple purposes; together with the media capture and streams api, they provide powerful multimedia capabilities to the web, including support for audio and video conferencing, file exchange, screen sharing, identity management, and interfacing with legacy telephone systems including support for sending dtmf (touch-tone dialing) signals. connections between peers can be made without requiring any special drivers or plug-ins, and can ofte...
...hey provide powerful multimedia capabilities to the web, including support for audio and video conferencing, file exchange, screen sharing, identity management, and interfacing with legacy telephone systems including support for sending dtmf (touch-tone dialing) signals. connections between peers can be made without requiring any special drivers or plug-ins, and can often be made without any intermediary servers. connections between two peers are represented by the rtcpeerconnection interface. once a connection has been established and opened using rtcpeerconnection, media streams (mediastreams) and/or data channels (rtcdatachannels) can be added to the connection. ...
...And 17 more matches

Web accessibility for seizures and physical reactions - Accessibility
re sometimes used interchangably, they are not the same. according to the w3c, blinking is a distraction problem, whereas flashing refers to content that occurs more than 3 times per second, is large enough, and bright enough. section 508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than 55 hz. ...
... not the same. according to the w3c, blinking is a distraction problem, whereas flashing refers to content that occurs more than 3 times per second, is large enough, and bright enough. section 508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than 55 hz. ...
...dvantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os. see the mdn document, "accessibility: what users can to to browse more safely" to see more details of how a user accesses the controls. prefers-reduced-motion support for prefers-reduced-motion in modern browsers is growing. @media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motion) { } to see a great example of how to use the code prefers-reduced-motion, visit the mdn document, prefers-reduced-motion, or see the example below from the section on new in chrome 74. ...
...And 17 more matches

Video and audio content - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. ...
...o you want to embed. it works in exactly the same way. controls users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) you must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate javascript api. at a minimum, the interface must include a way to start and stop the media, and to adjust the volume. the paragraph inside the <video> tags this is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. this can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless ...
...y there's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like internet explorer or even an older version of safari. the video won't play, because different browsers support different video (and audio) formats. fortunately, there are things you can do to help prevent this from being a problem. contents of a media file first, let's go through the terminology quickly. formats like mp3, mp4 and webm are called container formats. they define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth. a webm file containing a movie which has a main video track and one alternate angle...
...And 16 more matches