Search completed in 1.55 seconds.
Media container formats (file types) - Web media technologies
the format of audio and video
media files is defined in two parts (three if a file has both audio and video in it, of course): the audio and/or video codecs used and the
media container format (or file type) used.
...instead, it streams the encoded audio and video tracks directly from one peer to another using
mediastreamtrack objects to represent each track.
... common container formats while there are a vast number of
media container formats, the ones listed below are the ones you are most likely to encounter.
...And 46 more matches
MediaDevices.getUserMedia() - Web APIs
the
mediadevices.getuser
media() method prompts the user for permission to use a
media input which produces a
mediastream with tracks containing the requested types of
media.
... it returns a promise that resolves to a
mediastream object.
... if the user denies permission, or matching
media is not available, then the promise is rejected with notallowederror or notfounderror respectively.
...And 42 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
automatically starting the playback of audio (or videos with audio tracks) im
mediately upon page load can be an unwelcome surprise to users.
... while autoplay of
media serves a useful purpose, it should be used carefully and only when needed.
...in this guide, we'll cover autoplay functionality in the various
media and web audio apis, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.
...And 38 more matches
The "codecs" parameter in common media types - Web media technologies
at a fundamental level, you can specify the type of a
media file using a simple mime type, such as video/mp4 or audio/mpeg.
... however, many
media types—especially those that support video tracks—can benefit from the ability to more precisely describe the format of the data within them.
... for instance, just describing a video in an mpeg-4 file with the mime type video/mp4 doesn't say anything about what format the actual
media within takes.
...And 21 more matches
MediaDevices.getDisplayMedia() - Web APIs
the
mediadevices interface's getdisplay
media() method prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a
mediastream.
... the resulting stream can then be recorded using the
mediastream recording api or transmitted as part of a webrtc session.
... syntax var promise = navigator.
mediadevices.getdisplay
media(constraints); parameters constraints optional an optional
mediastreamconstraints object specifying requirements for the returned
mediastream.
...And 14 more matches
Media Capture and Streams API (Media Stream) - Web APIs
the
media capture and streams api, often called the
media streams api or simply
mediastream api, is an api related to webrtc which provides support for streaming audio and video data.
... concepts and usage the api is based on the manipulation of a
mediastream object representing a flux of audio- or video-related data.
... a
mediastream consists of zero or more
mediastreamtrack objects, representing various audio or video tracks.
...And 11 more matches
Media type and format guide: image, audio, and video content - Web media technologies
since nearly its beginning, the web has included support for some form of visual
media presentation.
...the modern web has powerful features to support the presentation and manipulation of
media, with several
media-related apis supporting various types of content.
... generally, the
media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.
...And 9 more matches
MediaList.mediaText - Web APIs
the
mediatext property of the
medialist interface is a stringifier that returns a domstring representing the
medialist as text, and also allows you to set a new
medialist.
... syntax
medialistinstance.
mediatext;
medialistinstance.
mediatext = string; value a domstring representing the
media queries of a stylesheet.
... if you wish to set new
media queries on the document, the string value must have the different queries separated by commas, e.g.
...And 4 more matches
MediaMetadata.MediaMetadata() - Web APIs
the
mediametadata() constructor creates a new
mediametadata object.
... syntax var
mediametadata = new
mediametadata([metadata]) parameters metadata optional the metadata parameters are as follows: title: the title of the
media to be played.
...of the
media to be played.
...And 4 more matches
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.
...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.
...And 3 more matches
HTMLMediaElement.setMediaKeys() - Web APIs
the set
mediakeys() property of the html
mediaelement interface returns a promise that resolves to the passed
mediakeys, which are those used to decrypt
media during playback.
... syntax var promise = html
mediaelement.set
mediakeys(
mediakeys); parameters
mediakeys a reference to a
mediakeys object that the html
mediaelement can use for decryption of
media data during playback.
... returns a promise that resolves to the passed instance of
mediakeys.
...And 2 more matches
MediaQueryList.media - Web APIs
the
media read-only property of the
mediaquerylist interface is a domstring representing a serialized
media query.
... syntax var
media =
mediaquerylist.
media; value a domstring representing a serialized
media query.
... examples this example runs the
media query (max-width: 600px) and displays the value of the resulting
mediaquerylist's
media property in a <span>.
...And 2 more matches
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.
...And 2 more matches
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.
... options optional an audionodeoptions dictionary object defining the properties you want the
mediastreamaudiodestinationnode to have.
...And 2 more matches
MediaStreamAudioSourceNode.mediaStream - Web APIs
the
mediastreamaudiosourcenode interface's read-only
mediastream property indicates the
mediastream 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
mediastreamaudiosourcenode() constructor or the audiocontext.create
mediastreamsource() method.
... syntax audiosourcestream =
mediastreamaudiosourcenode.
mediastream; value a
mediastream representing the stream which contains the
mediastreamtrack serving as the source of audio for the node.
...And 2 more matches
MediaElementAudioSourceNode.mediaElement - Web APIs
the
mediaelementaudiosourcenode interface's read-only
mediaelement property indicates the html
mediaelement 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.create
mediaelementsource() method.
... syntax audiosourceelement =
mediaelementaudiosourcenode.
mediaelement; value an html
mediaelement 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.
MediaRecorder.ignoreMutedMedia - Web APIs
the ignoremuted
media 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.
... syntax var boolean =
mediarecorder.ignoremuted
media mediarecorder.ignoremuted
media = boolean value a boolean.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremuted
media deprecatednon-standardchrome no support 49 — 57edge no support nofirefox ?
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
the
mediastreamtrackaudiosourceoptions dictionary's
mediastreamtrack property must contain a reference to the
mediastreamtrack from which the
mediastreamtrackaudiosourcenode being created using the
mediastreamtrackaudiosourcenode() constructor.
... syntax
mediastreamtrackaudiosourceoptions = {
mediastreamtrack: audiosourcetrack; }
mediastreamtrackaudiosourceoptions.
mediastreamtrack = audiosourcetrack; value a
mediastreamtrack from which the audio output of the new
mediastreamtrackaudiosourcenode will be taken.
... example this example uses getuser
media() to obtain access to the user's camera, then creates a new
mediastreamaudiosourcenode from the first audio track provided by the device.
... let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.
mediadevices.getuser
media) { navigator.
mediadevices.getuser
media ( { audio: true, video: false }).then(function(stream) { let options = {
mediastreamtrack: stream.getaudiotracks()[0]; } let source = new
mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getuser
media not supported on your browser!'); } specifications specification status comment web audio apithe definition of '
mediastreamtrackaudiosourceoptions.
mediastream' in that specification.
HTMLMediaElement.mediaGroup - Web APIs
the html
mediaelement.
mediagroup property reflects the
mediagroup html attribute, which indicates the name of the group of elements it belongs to.
... a group of
media elements shares a common controller.
... specifications specification status comment html5the definition of 'html
mediaelement.
mediagroup' in that specification.
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.
... examples var mql = window.match
media('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.
media); } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of '
media' in that specification.
MediaSource.MediaSource() - Web APIs
the
mediasource() constructor of the
mediasource interface constructs and returns a new
mediasource object with no associated source buffers.
... syntax var
mediasource = new
mediasource(); parameters none.
...e the following snippet is taken from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('
mediasource' in window &&
mediasource.istypesupported(mimecodec)) { var
mediasource = new
mediasource; //console.log(
mediasource.readystate); // closed video.src = url.createobjecturl(
mediasource);
mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...
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.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
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">).
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.
...
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.
...And 92 more matches
HTMLMediaElement - Web APIs
the html
mediaelement interface adds to htmlelement the properties and methods needed to support basic
media-related capabilities that are common to audio and video.
...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/html
mediaelement" 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">html
mediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inter...
... html
mediaelement.audiotracks a audiotracklist that lists the audiotrack objects contained in the element.
...And 77 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 multi
media 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.
...And 52 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.
...And 51 more matches
@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 css
mediarule css object model interface.
...And 46 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.
...And 26 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 html
mediaelement object for analysis, processing, or saving to disk.
... 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.
...And 24 more matches
Setting up adaptive streaming media sources - Developer guides
let's say you want to set up an adaptive streaming
media source on a server, to be consumed inside an html5
media element.
... mpeg-dash hls (http live streaming) in order to adaptively stream
media we need to split the
media up into chunks.
... the good news is that once we have encoded our
media in the appropriate format we are pretty good to go.
...And 24 more matches
MediaStream - Web APIs
the
mediastream interface represents a stream of
media content.
...each track is specified as an instance of
mediastreamtrack.you can obtain a
mediastream object either by using the constructor or by calling
mediadevices.getuser
media().
... some user agents subclass this interface to provide more precise information or functionality, like in canvascapture
mediastream.
...And 22 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.
...
media session concepts and usage the
mediametadata interface lets a web site provide rich metadata to the platform ui for
media that is playing.
...And 22 more matches
Configuring servers for Ogg media - HTTP
html <audio> and <video> elements allow
media presentation without the need for the user to install any plug-ins or other software to do so.
... this guide covers a few server configuration changes that may be necessary for your web server to correctly serve ogg
media files.
... this information may also be useful if you encounter other
media types your server isn't already configured to recognize.
...And 21 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.
... 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.
...And 20 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.
...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.
...And 20 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().
...
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.
...And 19 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.
... if ('
mediacapabilities' in navigator) { const audiofileconfiguration = { type : 'file', audio : { contenttype: "audio/mp3", channels: 2, bitrate: 132700, samplerate: 5200 } }; navigator.
mediacapabilities.decodinginfo(audiofileconfiguration).then(result => { console.log('this configuration is ' + (result.supported ?
...And 19 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.
... references html these articles cover html features for
media developers.
...And 19 more matches
Using the MediaStream Recording API - Web APIs
the
mediastream recording api makes it easy to record audio and/or video streams.
... when used with navigator.
mediadevices.getuser
media(), it provides an easy way to record from the user's input devices and instantly use the result in web apps.
...this article aims to provide a basic guide on how to use the
mediarecorder interface, which provides this api.
...And 18 more matches
Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multi
media — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
... objective: to understand the accessibility issues behind multi
media, and how to overcome them.
... multi
media 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).
...And 17 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.
...And 17 more matches
Recording a media element - Web APIs
while the article using the
mediastream recording api demonstrates using the
mediarecorder interface to capture a
mediastream generated by a hardware device, as returned by navigator.
mediadevices.getuser
media(), you can also use an html
media element (namely <audio> or <video>) as the source of the
mediastream to be recorded.
...note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it im
mediately 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.
...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.
...And 17 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.
...And 16 more matches
MediaStreamAudioSourceNode - Web APIs
the
mediastreamaudiosourcenode interface is a type of audionode which operates as an audio source whose
media is received from a
mediastream obtained using the webrtc or
media capture and streams apis.
... this
media could be from a microphone (through getuser
media()) or from a remote peer on a webrtc call (using the rtcpeerconnection's audio tracks).
... a
mediastreamaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.create
mediastreamsource() method.
...And 16 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.
...And 16 more matches
Web video codec guide - Web media technologies
codec name (short) full codec name container support av1 ao
media video 1 mp4, webm avc (h.264) advanced video coding 3gp, mp4, webm h.263 h.263 video 3gp hevc (h.265) high efficiency video coding mp4 mp4v-es mpeg-4 video elemental stream 3gp, mp4 mpeg-1 mpeg-1 part 2 visual mpeg, quicktime mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora og...
...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.
...And 16 more matches
MediaSource - Web APIs
the
mediasource interface of the
media source extensions api represents a source of
media data for an html
mediaelement object.
... a
mediasource object can be attached to a html
mediaelement to be played in the user agent.
...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() ...
...And 15 more matches
MediaSession.setActionHandler() - Web APIs
the setactionhandler() property of the
mediasession interface sets an event handler for a
media session action.
... these actions let a web app receive notifications when the user engages a device's built-in physical or onscreen
media controls, such as play, stop, or seek buttons.
... syntax navigator.
mediasession.setactionhandler(type, callback) parameters type a domstring representing an action type to listen for.
...And 14 more matches
Media buffering, seeking, and time ranges - Developer guides
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.
...And 14 more matches
Media - Progressive web apps (PWAs)
information:
media the purpose of css is to specify how content is presented to the user.
...these different
media have different characteristics.
... css has the capacity to present content according to the
media type.
...And 14 more matches
MediaQueryList - Web APIs
a
mediaquerylist object stores information on a
media query applied to a document, with support for both im
mediate and event-driven matching against the state of the document.
... you can create a
mediaquerylist by calling match
media() on the window object.
... the resulting object handles sending notifications to listeners when the
media query state changes (i.e.
...And 13 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.
...And 13 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.
...
mediastream image capture concepts and usage the process of retrieving an image or video stream happens as described below.
... first, get a reference to a device by calling
mediadevices.getuser
media().
...And 13 more matches
Codecs used by WebRTC - Web media technologies
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.
... 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.
... 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.
...And 12 more matches
HTMLMediaElement.srcObject - Web APIs
the srcobject property of the html
mediaelement interface sets or returns the object which serves as the source of the
media associated with the html
mediaelement.
... 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.
...And 11 more matches
LocalMediaStream - Web APIs
the local
mediastream interface was part of the
media capture and streams api, representing a stream of data being generated locally (such as by getuser
media().
... however, getuser
media() now returns a
mediastream instead, and this interface has been removed from the specification.
...do not use local
mediastream; you need to update any code that does use it as soon as possible or your content or application will stop working.
...And 11 more matches
MediaKeySession - Web APIs
the
mediakeysession interface of the encrypted
mediaextensions 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.
...closing a session means that licenses and keys associated with it are no longer valid for decrypting
media data.
...And 11 more matches
HTMLMediaElement.load() - Web APIs
the html
mediaelement method load() resets the
media element to its initial state and begins the process of selecting a
media source and loading the
media in preparation for playback to begin at the beginning.
... the amount of
media data that is prefetched is determined by the value of the element's preload attribute.
... this method is generally only useful when you've made dynamic changes to the set of sources available for the
media element, either by changing the element's src attribute or by adding or removing <source> elements nested within the
media element itself.
...And 10 more matches
MediaDevices.ondevicechange - Web APIs
the
mediadevices.ondevicechange property is an eventhandler which specifies a function to be called when the devicechange event occurs on a
mediadevices instance.
... this happens whenever the set of
media devices available to the user agent and, by extension, to the web site or app has changed.
... syntax
mediadevices.ondevicechange = eventhandler; value a function you provide which accepts as input a event object describing the devicechange event that occurred.
...And 10 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.
...And 10 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.
...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.
...And 10 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.
...And 10 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.
...And 10 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.
...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.
...And 10 more matches
nsIWindowMediator
xpfe/appshell/public/nsiwindow
mediator.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 nsiwindow
mediator are, enumerating all windows of a given type and getting the most recent / any window of a given type.
... implemented by: @mozilla.org/appshell/window-
mediator;1 as a service: var window
mediator = components.classes["@mozilla.org/appshell/window-
mediator;1"] .getservice(components.interfaces.nsiwindow
mediator); method overview void addlistener(in nsiwindow
mediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
...And 9 more matches
AudioContext.createMediaStreamDestination() - Web APIs
the create
mediastreamdestination() 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.getuser
media — it can, for example, be sent to a remote peer using the rtcpeerconnection addstream() method.
...And 9 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.
... 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.
...And 9 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.
... a
mediastreamtrackaudiosourcenode has no inputs and exactly one output, and is created using the audiocontext.create
mediastreamtracksource() 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.
...And 9 more matches
Navigator.getUserMedia() - Web APIs
the deprecated navigator.getuser
media() 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.
...And 9 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
the html <source> element specifies multiple
media resources for the <picture>, the <audio> element, or the <video> element.
...it is commonly used to offer the same
media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and
media file formats.
... permitted parents a
media element—<audio> or <video>—and it must be placed before any flow content or <track> element.
...And 9 more matches
HTMLMediaElement.play() - Web APIs
the html
mediaelement play() method attempts to begin playback of the
media.
... syntax var promise = html
mediaelement.play(); parameters none.
...possible errors include: notallowederror the user agent (browser) or operating system doesn't allow playback of
media in the current context or situation.
...And 8 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.
...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.
...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.
... events devicechange fired when a
media input or output device is attached to or removed from the user's computer.
...And 8 more matches
MediaElementAudioSourceNode - Web APIs
the
mediaelementaudiosourcenode interface represents an audio source consisting of an html5 <audio> or <video> element.
... a
mediaelementsourcenode has no inputs and exactly one output, and is created using the audiocontext.create
mediaelementsource() method.
... the amount of channels in the output equals the number of channels of the audio referenced by the html
mediaelement used in the creation of the node, or is 1 if the html
mediaelement has no audio.
...And 8 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.
...most dash clients expect a corresponding
media presentation description (mpd) manifest file, which is typically generated while generating the multiple resolution asset files.
... sample
media if you're looking to follow the steps listed here, but don't have any
media to experiment with, you can grab the trailer to big buck bunny [0] here.
...And 8 more matches
AudioContext.createMediaStreamSource() - Web APIs
the create
mediastreamsource() method of the audiocontext interface is used to create a new
mediastreamaudiosourcenode object, given a
media stream (say, from a
mediadevices.getuser
media 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.create
mediastreamsource(stream); parameters stream a
mediastream to serve as an audio source to be fed into an audio processing graph for use and manipulation.
...And 7 more matches
HTMLMediaElement.currentTime - Web APIs
the html
mediaelement 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 = html
mediaelement.currenttime; html
mediaelement.currenttime = 35; value a double-precision floating-point value indicating the current playback time in seconds.
...And 7 more matches
MediaDeviceInfo - Web APIs
the
mediadeviceinfo interface contains information that describes a single
media input or output device.
... the list of devices obtained by calling navigator.
mediadevices.enumeratedevices() is an array of
mediadeviceinfo objects, one per
media device.
... properties
mediadeviceinfo.deviceidread only returns a domstring that is an identifier for the represented device that is persisted across sessions.
...And 7 more matches
MediaKeyStatusMap - Web APIs
the
mediakeystatusmap interface of the encrypted
mediaextensions 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.
...And 7 more matches
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 im
mediately update the behavior of the document.
...And 7 more matches
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.
...And 7 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.
...And 7 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
mediarecordererrorevent occurs, you can determine to some extent what went wrong by examining the error property within the
mediarecordererrorevent received by the
mediarecorder's error event handler, onerror.
... syntax error =
mediarecordererrorevent.error; value a domexception describing the error represented by the event.
...And 7 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.
...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.
...And 7 more matches
Window.matchMedia() - Web APIs
the window interface's match
media() 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.match
media(
mediaquerystring) parameters
mediaquerystring a string specifying the
media query to parse into a
mediaquerylist.
... return value a new
mediaquerylist object for the
media query.
...And 7 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 is a high-level introduction to optimizing multi
media delivery on the web, covering general principles and techniques.
...And 6 more matches
AudioContext.createMediaElementSource() - Web APIs
the create
mediaelementsource() 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.create
mediaelementsource(my
mediaelement); parameters my
mediaelement an html
mediaelement object that you want to feed into an audio processing graph to manipulate.
...And 6 more matches
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.
...And 6 more matches
MediaSession.setPositionState() - Web APIs
the
mediasession method setpositionstate() is used to update the current document's
media playback position and speed for presentation by user's device in any kind of interface that provides details about ongoing
media.
... this can be particularly useful if your code implements a player for type of
media not directly supported by the browser.
... call this method on the navigator object's
mediasession object.
...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.
...And 6 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.
...this can be used create a custom error handler related to
media streams.
...And 6 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.create
mediastreamsource() 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.
...And 6 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 getuser
media().
... 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 getuser
media() will fail.
...
mediatrackconstraints a constraints dictionary detailing the preferable and/or required values or ranges of values for the track's constrainable properties.
...And 6 more matches
Navigator.requestMediaKeySystemAccess() - Web APIs
the navigator.request
mediakeysystemaccess() 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.
...consider that when deciding when to call request
mediakeysystemaccess(); you don't want those requests to happen at inconvenient times.
...And 6 more matches
Recipe: Media objects - CSS: Cascading Style Sheets
the
media object is a pattern we see all over the web.
... requirements
media object pattern needs some or all of the following characteristics: stacked on mobile, two columns on desktop.
...
media objects can be nested.
...And 6 more matches
MIME types (IANA media types) - HTTP
a
media type (also known as a multipurpose internet mail extensions or mime type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.
... the internet assigned numbers authority (iana) is responsible for all official mime types, and you can find the most up-to-date and complete list at their
media types page.
... for historical reasons, the mime sniffing standard (the definition of how browsers should interpret
media types and figure out what to do with content that doesn't have a valid one) allows javascript to be served using any mime type that essentially matches any of the following: application/javascript application/ecmascript application/x-ecmascript application/x-javascript text/javascript text/ecmascript text/javascript1.0 text/javascript1.1 text/javascript1.2 text/javascript1.3...
...And 6 more matches
Test your skills: Multimedia and embedding - Learn web development
multi
media and embedding 1 in this task we want you to embed a simple audio file onto the page.
...the audio is called audio.mp3, and it is in a folder inside the current folder called
media.
... multi
media and embedding 2 in this task we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides.
...And 5 more matches
AudioContext.createMediaStreamTrackSource() - Web APIs
the create
mediastreamtracksource() 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 create
mediastreamsource(), 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.create
mediastreamtracksource(track); parameters track the
mediastreamtrack to use as the source of all audio data for the new node.
...And 5 more matches
CSSMediaRule - Web APIs
the css
mediarule 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).
... interface css
mediarule : cssconditionrule { readonly attribute
medialist
media; } properties as a cssconditionrule, and therefore both a cssgroupingrule and a cssrule, css
mediarule also implements the properties of these interfaces.
...And 5 more matches
DisplayMediaStreamConstraints.video - Web APIs
the display
mediastreamconstraints dictionary's video property is used to configure the video track in the stream returned by getdisplay
media().
... 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 display
mediastreamconstraints.video = allowvideoflag; display
mediastreamconstraints.video =
mediatrackconstraints; display
mediastreamconstraints = { video: allowvideoflag |
mediatrackconstraints; } value the value may be either a boolean or a
mediatrackconstraints object.
...And 5 more matches
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 html
mediaelement can use for decryption of
media data during playback.
...And 5 more matches
HTMLMediaElement.seekToNextFrame() - Web APIs
the html
mediaelement.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.
... this method lets you access frames of video
media without the
media being performed in real time.
...And 5 more matches
HTMLMediaElement.textTracks - Web APIs
the read-only texttracks property on html
mediaelement 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.
...however, these events aren't sent directly to the
media element itself.
... instead, they're sent to the track list object of the html
mediaelement 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.
...And 5 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?
... smooth: given the properties defined in the
mediaconfiguration, will the playback of the specified piece of
media be high quality?
...And 5 more matches
MediaDeviceInfo.groupId - Web APIs
the groupid readonly property of the
mediadeviceinfo interface returns a domstring that is a group identifier.
... syntax var groupid =
mediadeviceinfo.groupid; value a domstring which uniquely identifies the group of related devices to which this device belongs.
... specifications specification status comment
media capture and streamsthe definition of 'groupid' in that specification.
...And 5 more matches
MediaError - Web APIs
the
mediaerror interface represents an error which occurred while handling
media in an html
media element based on html
mediaelement, 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.
...
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.
...And 5 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.
...And 5 more matches
MediaPositionState - Web APIs
the
media session api's
mediapositionstate dictionary is used to represent the current playback position of a
media session.
... its contents can be used by the user agent to provide a user interface displaying information about the playback position and duration of the
media currently being performed.
... properties duration a floating-point value giving the total duration of the current
media in seconds.
...And 5 more matches
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.
...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 getuser
media().
... 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 getuser
media() will fail.
...
mediatrackconstraints a constraints dictionary detailing the preferable and/or required values or ranges of values for the track's constrainable properties.
...And 5 more matches
MediaStreamTrack.applyConstraints() - Web APIs
the applyconstraints() method of the
mediastreamtrack interface applies a set of constraints to the track; these constraints let the web site or app establish ideal values and acceptable ranges of values for the constrainable properties of the track, such as frame rate, dimensions, echo cancelation, and so forth.
... constraints can be used to ensure that the
media meets certain guidelines you prefer.
... 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.
...And 5 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.create
mediastreamtracksource() 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.
...And 5 more matches
MediaTrackConstraints.cursor - Web APIs
the
mediatrackconstraints dictionary's cursor 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().
... syntax var constraintsobject = { cursor: constraint }; constraintsobject.cursor = constraint; value a constraindomstring which specifies whether or not the mouse cursor should be rendered into the video track in the
mediastream returned by the call to getdisplay
media().
...And 5 more matches
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.
...And 5 more matches
Web audio codec guide - Web media technologies
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.
...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.
...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.
...And 5 more matches
CanvasCaptureMediaStreamTrack - Web APIs
the canvascapture
mediastreamtrack interface represents the video track contained in a
mediastream being generated from a <canvas> following a call to htmlcanvaselement.capturestream().
... part of the
media capture and streams api.
... properties this interface inherits the properties of its parent,
mediastreamtrack.
...And 4 more matches
DisplayMediaStreamConstraints.audio - Web APIs
the display
mediastreamconstraints dictionary's audio property is used to specify whether or not to request that the
mediastream containing screen display contents also include an audio track.
... more precise control over the audio data may be exercised by instead providing a
mediatrackconstraints object, which is used to process the audio prior to adding it to the stream.
... syntax display
mediastreamconstraints.audio = allowaudioflag; display
mediastreamconstraints.audio =
mediatrackconstraints; display
mediastreamconstraints = { audio: allowaudioflag|
mediatrackconstraints; } value the value may be either a boolean or a
mediatrackconstraints object.
...And 4 more matches
DisplayMediaStreamConstraints - Web APIs
the display
mediastreamconstraints dictionary is used to specify whether or not to include video and/or audio tracks in the
mediastream to be returned by getdisplay
media(), 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 getdisplay
media().
...And 4 more matches
HTMLMediaElement.audioTracks - Web APIs
the read-only audiotracks property on html
mediaelement 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.
...And 4 more matches
HTMLMediaElement.autoplay - Web APIs
the html
mediaelement.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).
...however, autoplay can be useful when creating
media elements whose source will be set at a later time, under user control.
...And 4 more matches
HTMLMediaElement.canPlayType() - Web APIs
the html
mediaelement method canplaytype() reports how likely it is that the current browser will be able to play
media of a given mime type.
... 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.
...And 4 more matches
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.
...
media-source: represents a configuration that is meant to be used for playback of a
mediasource.
...And 4 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.
...And 4 more matches
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.
...And 4 more matches
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.
...
mediakeysystemconfiguration.audiocapabilities read only returns a list of supported audio type and capability pairs.
...And 4 more matches
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.
...And 4 more matches
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.
...And 4 more matches
MediaQueryListListener - Web APIs
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.
...And 4 more matches
MediaRecorder.pause() - Web APIs
the
media.pause() method (part of the
mediarecorder api) is used to pause recording of
media streams.
... when a
mediarecorder object’s pause()method is called, the browser queues a task that runs the below steps: if
mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... set
mediarecorder.state to "paused".
...And 4 more matches
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.
...And 4 more matches
MediaRecorder.stop() - Web APIs
the
mediarecorder.stop() method (part of the
mediarecorder api) is used to stop
media capture.
... when the stop() method is invoked, the ua queues a task that runs the following steps: if
mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
... if the
mediarecorder.state is not "inactive", continue on to the next step.
...And 4 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.
... 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.
...And 4 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.
...And 4 more matches
MediaStreamEvent - Web APIs
the
mediastreamevent interface represents events that occurs in relation to a
mediastream.
... 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.
...And 4 more matches
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 im
mediately stopped.
...And 4 more matches
MediaTrackSettings.deviceId - Web APIs
the
mediatracksettings dictionary's deviceid property is a domstring which uniquely identifies the source for the corresponding
mediastreamtrack for the origin corresponding to the browsing session.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the
mediatrackconstraints.deviceid property you provided when calling either getuser
media().
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.deviceid as returned by a call to
mediadevices.getsupportedconstraints().
...And 4 more matches
MediaTrackSettings - Web APIs
the
mediatracksettings dictionary is used to return the current values configured for each of a
mediastreamtrack's settings.
... these values will adhere as closely as possible to any constraints previously described using a
mediatrackconstraints object and set using applyconstraints(), and will adhere to the default constraints for any properties whose constraints haven't been changed, or whose customized constraints couldn't be matched.
... properties of all
media tracks deviceid a domstring indicating the current value of the deviceid property.
...And 4 more matches
Window.setImmediate() - Web APIs
this method is used to break up long running operations and run a callback function im
mediately after the browser has completed other operations such as events and display updates.
... syntax var im
mediateid = setim
mediate(func, [param1, param2, ...]); var im
mediateid = setim
mediate(func); where im
mediateid is the id of the im
mediate which can be used later with window.clearim
mediate.
... notes the clearim
mediate method can be used to clear the im
mediate actions, just like cleartimeout for settimeout.
...And 4 more matches
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.
...And 3 more matches
HTMLMediaElement.captureStream() - Web APIs
the capturestream() property of the html
mediaelement interface returns a
mediastream object which is streaming a real-time capture of the content being rendered in the
media element.
... 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.
...And 3 more matches
HTMLMediaElement.duration - Web APIs
the read-only html
mediaelement property duration indicates the length of the element's
media in seconds.
... syntax myduration = html
mediaelement.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.
...And 3 more matches
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 html
mediaelement's emptied event, then post a message when that event handler has reacted to the event firing.
...the
media is empty.
...And 3 more matches
HTMLMediaElement: loadedmetadata event - Web APIs
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.
... examples these examples add an event listener for the html
mediaelement'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.
...And 3 more matches
HTMLMediaElement.networkState - Web APIs
the html
mediaelement.networkstate property indicates the current state of the fetching of
media over the network.
... network_idle 1 html
mediaelement is active and has selected a resource, but is not using the network.
... network_loading 2 the browser is downloading html
mediaelement data.
...And 3 more matches
HTMLMediaElement.playbackRate - Web APIs
the html
mediaelement.playbackrate property sets the rate at which the
media is being played back.
... if playbackrate is negative, the
media is not played backwards.
...some browsers implement the non-standard html
mediaelement.preservespitch property to control this.
...And 3 more matches
HTMLMediaElement.readyState - Web APIs
the html
mediaelement.readystate property indicates the readiness state of the
media.
...possible values are: constant value description have_nothing 0 no information is available about the
media resource.
... have_metadata 1 enough of the
media resource has been retrieved that the metadata attributes are initialized.
...And 3 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.
... 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.
...And 3 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.
... 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 3 more matches
MediaCapabilities - Web APIs
the
mediacapabilities interface of the
media capabilities api provides information about the decoding abilities of the device, system and browser.
...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.
...And 3 more matches
MediaError.message - Web APIs
the read-only property
mediaerror.message returns a domstring which contains a human-readable string offering specific diagnostic details related to the error described by the
mediaerror object, or an empty string ("") if no diagnostic information can be determined or provided.
... syntax var errormessage =
mediaerror.message; value a domstring providing a detailed, specific explanation of what went wrong and possibly how it might be fixed.
... this is not simply a generic description of the
mediaerror.code property's value, but instead goes deeper into the specifics of this particular error and its circumstances.
...And 3 more matches
MediaKeyMessageEvent - Web APIs
the
mediakeymessageevent interface of the encrypted
mediaextensions api contains the content and related data when the content decryption module generates a message for the session.
...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...
...
mediakeymessageevent() creates a new instance of
mediakeymessageevent.
...And 3 more matches
MediaKeySystemAccess - Web APIs
the
mediakeysystemaccess interface of the encrypted
mediaextensions 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.request
mediakeysystemaccess() method.
... properties
mediakeysystemaccess.keysystem read only returns a domstring identifying the key system being used.
...And 3 more matches
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.
...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.
...And 3 more matches
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) { ...
...And 3 more matches
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) { ...
...And 3 more matches
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.
... syntax
mediarecorder.onstart = function(event) { ...
...And 3 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.
... syntax
mediarecorder.onstop = function(event) { ...
...And 3 more matches
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.
... 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.
...And 3 more matches
MediaSettingsRange - Web APIs
the
mediasettingsrange interface of the the
mediastream image capture api provides the possible range and value size of photocapabilities.imageheight and photocapabilities.imagewidth.
... properties
mediasettingsrange.max returns the maximum value of this settings.
...
mediasettingsrange.min returns the minimum value of this setting.
...And 3 more matches
MediaStream.getAudioTracks() - Web APIs
the getaudiotracks() method of the
mediastream interface returns a sequence that represents all the
mediastreamtrack objects in this stream's track set where
mediastreamtrack.kind is audio.
... syntax var
mediastreamtracks =
mediastream.getaudiotracks() parameters none.
... return value an array of
mediastreamtrack objects, one for each audio track contained in the stream.
...And 3 more matches
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 html
mediaelement.capturestream() gets a new set of tracks because the
media element being captured loaded a new source.
...And 3 more matches
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 html
mediaelement.capturestream() gets a new set of tracks because the
media element being captured loaded a new source.
...And 3 more matches
MediaStreamAudioDestinationNode - Web APIs
the
mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc
mediastream with a single audio
mediastreamtrack, which can be used in a similar way to a
mediastream obtained from navigator.getuser
media.
... it is an audionode that acts as an audio destination, created using the audiocontext.create
mediastreamdestination 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.
...And 3 more matches
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: a
mediastreamtrack}); parameters the
mediastreamtrackevent() constructor also inherits arguments from event().
... type a domstring representing the name of the type of the
mediastreamtrackevent.
...And 3 more matches
MediaTrackConstraints.displaySurface - Web APIs
the
mediatrackconstraints dictionary's displaysurface 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 getdisplay
media() 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().
...And 3 more matches
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().
... 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.
...And 3 more matches
MediaTrackConstraints - Web APIs
the
mediatrackconstraints dictionary is used to describe a set of capabilities and the value or values each can take on.
... 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.
... properties of shared screen tracks these constraints apply to
mediatrackconstraints objects specified as part of the display
mediastreamconstraints object's video property when using getdisplay
media() to obtain a stream for screen sharing.
...And 3 more matches
MediaTrackSettings.autoGainControl - Web APIs
the
mediatracksettings dictionary's autogaincontrol property is a boolean value whose value indicates whether or not automatic gain control (agc) is enabled on an audio track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the
mediatrackconstraints.autogaincontrol property you provided when calling either getuser
media() or
mediastreamtrack.applyconstraints().
... automatic gain control is a feature in which a sound source automatically manages changes in the volume of its source
media to maintain a steady overall volume level.
...And 3 more matches
MediaTrackSettings.groupId - Web APIs
the
mediatracksettings dictionary's groupid property is a browsing-session unique domstring which identifies the group of devices which includes the source for the
mediastreamtrack.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the
mediatrackconstraints.groupid property you provided when calling either getuser
media().
... 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().
...And 3 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.
... 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.
...
mediastream: allows
mediastream: uris to be used as a content source.
...And 3 more matches
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.
... 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.
...And 2 more matches
HTMLMediaElement.currentSrc - Web APIs
the html
mediaelement.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.
... 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.
...And 2 more matches
HTMLMediaElement.ended - Web APIs
the html
mediaelement.ended indicates whether the
media element has ended playback.
... syntax var isended = html
mediaelement.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.
...And 2 more matches
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 html
mediaelement (<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 html
mediaelement's ended event, then post a message when that event handler has reacted to the event firing.
...And 2 more matches
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 html
mediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing.
...And 2 more matches
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 html
mediaelement's pause event, then post a message when that event handler has reacted to the event firing.
...And 2 more matches
HTMLMediaElement.seekable - Web APIs
the seekable read-only property of the html
mediaelement returns a timeranges object that contains the time ranges that the user is able to seek to, if any.
...ument.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 'html
mediaelement' in that specification.
... living standard no change from html5 html5the definition of 'html
mediaelement' in that specification.
...And 2 more matches
HTMLMediaElement.setSinkId() - Web APIs
the html
mediaelement.setsinkid() method sets the id of the audio device to use for output and returns a promise.
... syntax html
mediaelement.setsinkid(sinkid).then(function() { ...
... parameters sinkid the
mediadeviceinfo.deviceid of the audio output device.
...And 2 more matches
HTMLMediaElement.src - Web APIs
the html
mediaelement.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 = html
mediaelement.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.
...And 2 more matches
HTMLMediaElement.videoTracks - Web APIs
the read-only videotracks property on html
mediaelement 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.
...see event handlers in videotracklist to learn more about watching for changes to a
media element's track list.
...And 2 more matches
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.
...And 2 more matches
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.
...And 2 more matches
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.
... options a
mediaelementaudiosourceoptions dictionary object defining the properties you want the
mediaelementaudiosourcenode to have:
mediaelement: an html
mediaelement that will be used as the source for the audio.
...And 2 more matches
MediaRecorder.isTypeSupported - Web APIs
the
mediarecorder.istypesupported() static method returns a boolean which is true if the mime type specified is one the user agent should be able to successfully record.
... syntax var canrecord =
mediarecorder.istypesupported(mimetype) parameters mimetype the mime
media type to check.
... return value true if the
mediarecorder implementation is capable of recording blob objects for the specified mime type.
...And 2 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.
...And 2 more matches
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.
... paused the browser's
media session is currently paused.
...And 2 more matches
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.
... invalidstateerror
mediasource.readystate is not equal to open, or one or more of the sourcebuffer objects in
mediasource.sourcebuffers are being updated (i.e.
...And 2 more matches
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 html
mediaelement.seekable property will have a start timestamp no greater than this value.
...And 2 more matches
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.
... 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.
... tracks an array of
mediastreamtrack objects, one for each track to add to the stream.
...And 2 more matches
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.
...And 2 more matches
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.
...And 2 more matches
MediaStreamConstraints - Web APIs
the
mediastreamconstraints dictionary is used when calling getuser
media() to specify what kinds of tracks should be included in the returned
mediastream, and, optionally, to establish constraints for those tracks' settings.
... 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.
... video either a boolean (which indicates whether or not a video track is requested) or a
mediatrackconstraints object providing the constraints which must be met by the video track included in the returned
mediastream.
...And 2 more matches
MediaStreamTrack.getConstraints() - Web APIs
the getconstraints() method of the
mediastreamtrack interface returns a
mediatrackconstraints object containing the set of constraints most recently established for the track using a prior call to applyconstraints().
... constraints can be used to ensure that the
media meets certain guidelines you prefer.
... 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().
...And 2 more matches
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.
... 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.
...And 2 more matches
MediaStreamTrackEvent - Web APIs
the
mediastreamtrackevent interface represents events which indicate that a
mediastream has had tracks added to or removed from the stream through calls to
media stream api methods.
...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/
mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the event...
... track read only a
mediastreamtrack object representing the track which was added to the stream.
...And 2 more matches
MediaTrackConstraints.deviceId - Web APIs
the
mediatrackconstraints dictionary's deviceid property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the deviceid constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.deviceid as returned by a call to
mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { deviceid: constraint }; constraintsobject.deviceid = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) device ids which are acceptable as the source of
media content.
...And 2 more matches
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 getdisplay
media() 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().
...And 2 more matches
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 getuser
media() 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().
...And 2 more matches
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 getuser
media() 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().
...And 2 more matches
MediaTrackSettings.echoCancellation - Web APIs
the
mediatracksettings dictionary's echocancellation property is a boolean value whose value indicates whether or not echo cancellation is enabled on an audio track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the
mediatrackconstraints.echocancellation property you provided when calling either getuser
media() or
mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.echocancellation as returned by a call to
mediadevices.getsupportedconstraints().
...And 2 more matches
MediaTrackSettings.facingMode - Web APIs
the
mediatracksettings dictionary's facingmode property is a domstring indicating the direction in which the camera producing the video track represented by the
mediastreamtrack is currently facing.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the
mediatrackconstraints.facingmode property you provided when calling either getuser
media() or
mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.facingmode as returned by a call to
mediadevices.getsupportedconstraints().
...And 2 more matches
MediaTrackSettings.frameRate - Web APIs
the
mediatracksettings dictionary's framerate property is a double-precision floating-point number indicating the frame rate, in frames per second, 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.framerate property you provided when calling either getuser
media() or
mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.framerate as returned by a call to
mediadevices.getsupportedconstraints().
...And 2 more matches
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 getuser
media() 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().
...And 2 more matches
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 getuser
media() or
mediastreamtrack.applyconstraints().
... 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().
...And 2 more matches
MediaTrackSettings.noiseSuppression - Web APIs
the
mediatracksettings dictionary's noisesuppression property is a boolean value whose value indicates whether or not noise suppression technology is enabled on an audio track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the
mediatrackconstraints.noisesuppression property you provided when calling either getuser
media() or
mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.noisesuppression as returned by a call to
mediadevices.getsupportedconstraints().
...And 2 more matches
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 getuser
media() 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().
...And 2 more matches
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 getuser
media() 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().
...And 2 more matches
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 getuser
media() 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().
...And 2 more matches
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().
... example this method sets up the constraints object specifying the options for the call to getdisplay
media().
...And 2 more matches
MediaTrackSupportedConstraints.displaySurface - Web APIs
the
mediatracksupportedconstraints dictionary's displaysurface property indicates whether or not the displaysurface 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().
... example this method sets up the constraints object specifying the options for the call to getdisplay
media().
...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().
... example this method sets up the constraints object specifying the options for the call to getdisplay
media().
...And 2 more matches
media - SVG: Scalable Vector Graphics
the
media attribute specifies a
media query that must be matched for a style sheet to apply.
... only one element is using this 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.
... specifications specification status comment scalable vector graphics (svg) 2the definition of '
media' in that specification.
...And 2 more matches
Media (Audio-visual presentation) - MDN Web Docs Glossary: Definitions of Web-related terms
the term
media (more accurately, multi
media) 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.
... learn more general knowledge multi
media on wikipedia technical reference web
media technologies: a guide to all the ways
media can be used in web content multi
media and embedding in the mdn learning area <audio> and <video> elements, used to present
media in html documents ...
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, multi
media) 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.
... learn more
media on wikipedia ...
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.
... why optimize your multi
media?
... see caniuse.com for current browser support of video and other
media types.
... measuring performance multi
media: images multi
media: video javascript performance best practices.
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 html
mediaelement's canplay event, then post a message when that event handler has reacted to the event firing.
...anplay', (event) => { console.log('video can start, but not sure it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specifications specification status html living standardthe definition of 'canplay
media event' in that specification.
... living standard html5the definition of 'canplay
media event' in that specification.
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 html
mediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing.
...r having to stop to buffer.'); }); using the oncanplaythrough event handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specifications specification status html living standardthe definition of 'canplaythrough
media event' in that specification.
... living standard html5the definition of 'canplaythrough
media event' in that specification.
HTMLMediaElement.defaultPlaybackRate - Web APIs
the html
mediaelement.defaultplaybackrate property indicates the default playback rate for the
media.
...1.0 is "normal speed," values lower than 1.0 make the
media play slower than normal, higher values make it play faster.
... example var obj = document.createelement('video'); console.log(obj.defaultplaybackrate); // 1 specifications specification status comment html living standardthe definition of 'html
mediaelement.defaultplaybackrate' in that specification.
... living standard no change from html5 html5the definition of 'html
mediaelement.defaultplaybackrate' in that specification.
HTMLMediaElement.error - Web APIs
the html
mediaelement.error is the
mediaerror object for the most recent error, or null if there has not been an error.
... syntax var myerror = html
mediaelement.error; value a
mediaerror object describing the most recent error to occur on the
media element or null if no errors have occurred.
... var videoelement = document.createelement('video'); videoelement.onerror = function() { console.log("error " + videoelement.error.code + "; details: " + videoelement.error.message); } videoelement.src = "https://example.com/bogusvideo.mp4"; specifications specification status comment html living standardthe definition of 'html
mediaelement.error' in that specification.
... living standard html5the definition of 'html
mediaelement.error' in that specification.
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 html
mediaelement's seeking event, then post a message when that event handler has reacted to the event firing.
...r('video'); video.addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video = document.queryselector('video'); video.onseeking = (event) => { console.log('video is seeking a new position.'); }; specifications specification status html living standardthe definition of 'seeking
media event' in that specification.
... living standard html5the definition of 'seeking
media event' in that specification.
HTMLMediaElement.sinkId - Web APIs
the html
mediaelement.sinkid read-only property returns a domstring that is the unique id of the audio device delivering output.
...this id should be one of the
mediadeviceinfo.deviceid values returned from
mediadevices.enumeratedevices(), id-multi
media, or id-communications.
... syntax var sinkid = html
mediaelement.sinkid specifications specification status comment audio output devices apithe definition of 'sinkid' in that specification.
...older versions of this spec were called "
media capture output".
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 html
mediaelement's stalled event, then post a message when that event handler has reacted to the event firing.
...'video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specifications specification status html living standardthe definition of 'stalled
media event' in that specification.
... living standard html5the definition of 'stalled
media event' in that specification.
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 html
mediaelement's suspend event, then post a message when that event handler has reacted to the event firing.
...r('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('data loading has been suspended.'); }; specifications specification status html living standardthe definition of 'suspend
media event' in that specification.
... living standard html5the definition of 'suspend
media event' in that specification.
MediaKeySession.closed - Web APIs
the
mediakeysession.closed read-only property returns a promise signaling when a
mediakeysession closes.
...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.
MediaKeySession.onmessage - Web APIs
the onmessage property of the
mediakeysession is an event handler, fired whenever a
mediakeymessageevent occurs, denoting a message is generated by the content decryption module.
...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...
...on.onmessage = function(
mediakeymessageevent) { ...
... } specifications specification status comment encrypted
media extensionsthe definition of 'onmessage' in that specification.
MediaKeys - Web APIs
the
mediakeys interface of encrypted
mediaextensions api represents a set of keys that an associated html
mediaelement can use for decryption of
media data during playback.
... 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.
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.
... 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.match
media("(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.
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() { ...
... }; example var mql = window.match
media('(max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of 'onchange' in that specification.
MediaQueryList.removeListener() - Web APIs
the removelistener() method of the
mediaquerylist interface removes a listener from the
mediaquerylistener.
... 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.
... examples var mql = window.match
media('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); // later on, when it is no longer needed mql.removelistener(screentest); specifications specification status comment css object model (csso...
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.
... 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)...
... var chunks = [];
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 specification status
mediastream recording working draft ...
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) { ...
...
mediarecorder.onwarning = function(e) { console.log("a warning has been raised: " + e.message); } ...
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.
... 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.
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.getuser
media) { console.log('getuser
media supported.'); navigator.getuser
media ( // 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.
MediaRecorderErrorEvent() - Web APIs
the
mediarecordererrorevent() constructor creates a new
mediarecordererrorevent object that represents an error that occurred during the recording of
media by the
mediastream recording api.
... in general, you won't create these yourself; they are delivered to your implementation of
mediarecorder.onerror when errors occur while recording
media.
... syntax var errorevent = new
mediarecordererrorevent(errorinfo) parameters errorinfo an object describing the error object to be created.
... specifications specification status comment
mediastream recordingthe definition of '
mediarecordererrorevent()' in that specification.
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.
... 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.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(
mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
... specifications specification status comment
media source extensionsthe definition of 'activesourcebuffers' in that specification.
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.
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.
... 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); }); }; ...
... specifications specification status comment
media source extensionsthe definition of 'sourcebuffers' in that specification.
MediaStream.addTrack() - Web APIs
the
mediastream.addtrack() method adds a new track to the stream.
... the track is specified as a parameter of type
mediastreamtrack.
... 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.
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 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.
...this property was part of earlier drafts of the
media capture and streams specification.
MediaStream.getTrackById() - Web APIs
the
mediastream.gettrackbyid() method returns a
mediastreamtrack object representing the track with the specified id string.
... syntax var track =
mediastream.gettrackbyid(id); parameters id a domstring which identifies the track to be returned.
... return value if a track is found for which
mediastreamtrack.id matches the specified id string, that
mediastreamtrack object is returned.
... stream.gettrackbyid("primary-audio-track").applyconstraints({ volume: 0.5 }); stream.gettrackbyid("commentary-track").enabled = true; specifications specification status comment
media capture and streamsthe definition of 'gettrackbyid()' in that 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.getuser
media({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.
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.create
mediastreamsource() 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.
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.
... example // s is a
mediastream var event = new
mediastreamevent("addstream", {"stream": s}); ...
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.
MediaStreamTrack.enabled - Web APIs
the enabled property on the
mediastreamtrack interface is a boolean value which is true if the track is allowed to render the source stream or false if it is not.
... syntax const enabledflag = track.enabled track.enabled = [true | false] value when true, enabled indicates that the track is permitted to render its actual
media to the output.
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'enabled' in that specification.
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.
... a remote peer has permanently stopped sending data; pausing
media does not generate an ended event.
... 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.
MediaStreamTrack.onended - Web APIs
the
mediastreamtrack.onended 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.
... 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.
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.
... 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.
...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.
MediaStreamTrackAudioSourceOptions - Web APIs
the
mediastreamtrackaudiosourceoptions dictionary is used when specifying options to the
mediastreamtrackaudiosourcenode() constructor.
... it isn't needed when using the audiocontext.create
mediastreamtracksource() 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.
MediaTrackConstraints.aspectRatio - Web APIs
the
mediatrackconstraints dictionary's aspectratio property is a constraindouble describing the requested or mandatory constraints placed upon the value of the aspectratio constrainable property.
... 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().
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'aspectratio' in that specification.
MediaTrackConstraints.autoGainControl - Web APIs
the
mediatrackconstraints dictionary's autogaincontrol property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the autogaincontrol constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.autogaincontrol as returned by a call to
mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { autogaincontrol: constraint }; constraintsobject.autogaincontrol = constraint; value if this value is a simple true or false, the user agent will attempt to obtain
media with automatic gain control enabled or disabled as specified, if possible, but will not fail if this can't be done.
... specifications specification status comment
media capture and streamsthe definition of 'autogaincontrol' in that 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().
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'channelcount' in that specification.
MediaTrackConstraints.echoCancellation - Web APIs
the
mediatrackconstraints dictionary's echocancellation property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the echocancellation constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.echocancellation as returned by a call to
mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { echocancellation: constraint }; constraintsobject.echocancellation = constraint; value if this value is a simple true or false, the user agent will attempt to obtain
media with echo cancellation enabled or disabled as specified, if possible, but will not fail if this can't be done.
... specifications specification status comment
media capture and streamsthe definition of 'echocancellation' in that specification.
MediaTrackConstraints.facingMode - Web APIs
the
mediatrackconstraints dictionary's facingmode property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the facingmode constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.facingmode as returned by a call to
mediadevices.getsupportedconstraints().
... an exact value in this case indicates that the specified facing mode is specifically required; for example: var constraints = { facingmode: { exact: "user" } }; this indicates that only a user-facing camera is acceptable; if there is no user-facing camera, or the user declines permission to use that camera, the
media request will fail.
... specifications specification status comment
media capture and streamsthe definition of 'facingmode' in that specification.
MediaTrackConstraints.frameRate - Web APIs
the
mediatrackconstraints dictionary's framerate property is a constraindouble describing the requested or mandatory constraints placed upon the value of the framerate constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.framerate as returned by a call to
mediadevices.getsupportedconstraints().
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'framerate' in that 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().
... syntax var constraintsobject = { height: constraint }; constraintsobject.height = constraint; value if this value is a number, the user agent will attempt to obtain
media whose height is as close as possible to this number given the capabilities of the hardware and the other constraints specified.
... specifications specification status comment
media capture and streamsthe definition of 'height' in that specification.
MediaTrackConstraints.latency - Web APIs
the
mediatrackconstraints dictionary's latency property is a constraindouble describing the requested or mandatory constraints placed upon the value of the latency constrainable property.
... 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().
... if this property's value is a number, the user agent will attempt to obtain
media whose latency tends to be as close as possible to this number given the capabilities of the hardware and the other constraints specified.
... specifications specification status comment
media capture and streamsthe definition of 'latency' in that specification.
MediaTrackConstraints.noiseSuppression - Web APIs
the
mediatrackconstraints dictionary's noisesuppression property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the noisesuppression constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of
mediatracksupportedconstraints.noisesuppression as returned by a call to
mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { noisesuppression: constraint }; constraintsobject.noisesuppression = constraint; value if this value is a simple true or false, the user agent will attempt to obtain
media with noise suppression enabled or disabled as specified, if possible, but will not fail if this can't be done.
... specifications specification status comment
media capture and streamsthe definition of 'noisesuppression' in that 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().
... syntax var constraintsobject = { samplerate: constraint }; constraintsobject.samplerate = constraint; value if this value is a number, the user agent will attempt to obtain
media whose sample rate is as close as possible to this number given the capabilities of the hardware and the other constraints specified.
... specifications specification status comment
media capture and streamsthe definition of 'samplerate' in that 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().
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'samplesize' in that specification.
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().
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'width' in that 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.
... browser the stream's video track presents the entire contents of a single browser tab which the user selected during the getdisplay
media() call.
... specifications specification status comment screen capturethe definition of '
mediatracksettings.displaysurface' in that specification.
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 getuser
media() 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().
... 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.
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.
... 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.
... 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.
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.
... 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.
... 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.
msSetMediaProtectionManager - Web APIs
the msset
mediaprotectionmanager method specifies the
media protection manager for a given
media pipeline.
... syntax html
mediaelement.msset
mediaprotectionmanager(
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 msset
mediaprotectionmanager property is
mediaprotectionmanager and can be any type.
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.
... examples navigator.
mediacapabilities.decodinginfo({ type : 'file', audio : { contenttype : "audio/mp3", channels : 2, bitrate : 132700, samplerate : 5200 } }).then(function(result) { console.log('this configuration is ' + (result.supported ?
...'' : 'not ') + 'power efficient.') }); specifications specification status comment
media capabilities 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.getuser
media().
... specifications specification status comment
media capture and streamsthe definition of 'navigatoruser
media.
mediadevices' in that specification.
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().
... example <!doctype html> <html> <head> <link rel="stylesheet" href="document.css" type="text/css"
media="screen" /> <style rel="stylesheet" type="text/css"
media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].
media: ' + json.stringify(document.stylesheets[isheetindex].
media)); if (isheetindex === 0) document.stylesheets[isheetindex].
media.appendmedium('handheld'); if (isheetindex === 1) document.stylesheets[isheetindex].
media.deletemedium('print'); console.log('document.stylesheets[' + string(isheetindex) + '].
media: ' + json.stringify(document.stylesheets[isheetindex].
media)); } /* wi...
...ll log: document.stylesheets[0].
media: {"0":"screen"} document.stylesheets[0].
media: {"0":"screen","1":"handheld"} document.stylesheets[1].
media: {"0":"screen","1":"print"} document.stylesheets[1].
media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object model (cssom)the definition of 'stylesheet:
media' in that specification.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
media queries can also be used to help users with disabilities understand your website better.
... 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.
... syntax the -ms-high-contrast
media feature is specified as one of the following values.
... @
media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @
media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @
media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } ...
Feature-Policy: encrypted-media - HTTP
the http feature-policy header encrypted-
media directive controls whether the current document is allowed to use the encrypted
media extensions api (eme).
... when this policy is enabled, the promise returned by navigator.request
mediakeysystemaccess() will reject with a domexception.
... syntax feature-policy: encrypted-
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.
... encrypted
media extensionsthe definition of 'feature policy integration' in that specification.
Images, media, and form elements - Learn web development
images, other
media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
... summary this lesson has highlighted some of the differences you will encounter when working with images,
media, and other unusual elements in css.
... 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Multimedia and Embedding - Learn web development
this module explores how to use html to include multi
media in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
... guides this module contains the following articles which will take you through all the fundamentals of embedding multi
media on webpages.
... images in html there are other types of multi
media to consider, but it is logical to start with the humble <img> element used to embed a simple image in a webpage.
Event.stopImmediatePropagation() - Web APIs
the stopim
mediatepropagation() method of the event interface prevents other listeners of the same event from being called.
...if stopim
mediatepropagation() is invoked during one such call, no remaining listeners will be called.
... syntax event.stopim
mediatepropagation(); specifications specification status comment domthe definition of 'event.stopim
mediatepropagation()' in that specification.
HTMLMediaElement.buffered - Web APIs
the html
mediaelement.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.
... example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges { length: 0 } specifications specification status comment html living standardthe definition of 'html
mediaelement.buffered' in that specification.
... living standard no change from html5 html5the definition of 'html
mediaelement.buffered' in that specification.
HTMLMediaElement.controller - Web APIs
the html
mediaelement.controller property represents the
media controller assigned to the element.
... value a
mediacontroller object or null if no
media controller is assigned to the element.
... specifications specification status comment html5the definition of 'html
mediaelement.controller' in that specification.
HTMLMediaElement.controls - Web APIs
the html
mediaelement.controls property reflects the controls html attribute, which controls whether user interface controls for playing the
media item will be displayed.
... example var obj = document.createelement('video'); obj.controls = true; specifications specification status comment html living standardthe definition of 'html
mediaelement.controls' in that specification.
... living standard no change from html5 html5the definition of 'html
mediaelement.controls' in that specification.
HTMLMediaElement.crossOrigin - Web APIs
the html
mediaelement.crossorigin property is the cors setting for this image element.
... specifications specification status comment html living standardthe definition of 'html
mediaelement.crossorigin' in that specification.
... living standard no change from html5 html5the definition of 'html
mediaelement.crossorigin' in that specification.
HTMLMediaElement.defaultMuted - Web APIs
the html
mediaelement.defaultmuted property reflects the muted html attribute, which indicates whether the
media element's audio output should 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 'html
mediaelement.defaultmuted' in that specification.
... living standard no change from html5 html5the definition of 'html
mediaelement.defaultmuted' in that specification.
HTMLMediaElement: durationchange event - Web APIs
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 html
mediaelement's durationchange event, then post a message when that event handler has reacted to the event firing.
....log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselector('video'); video.ondurationchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status html living standardthe definition of 'durationchange
media event' in that specification.
... living standard html5the definition of 'durationchange
media event' in that specification.
HTMLMediaElement.fastSeek() - Web APIs
the html
mediaelement.fastseek() method quickly seeks the
media to the new time with precision tradeoff.
... note: if you need to seek with precision, you should set html
mediaelement.currenttime instead.
... syntax html
mediaelement.fastseek(time); parameters time a double.
HTMLMediaElement.loop - Web APIs
the html
mediaelement.loop property reflects the loop html attribute, which controls whether the
media element should start over when it reaches the end.
... example var obj = document.createelement('video'); obj.loop = true; // true specifications specification status comment html living standardthe definition of 'html
mediaelement.loop' in that specification.
... living standard html5the definition of 'html
mediaelement.loop' in that specification.
HTMLMediaElement.msInsertAudioEffect() - Web APIs
the html
mediaelement.msinsertaudioeffect() method inserts the specified audio effect into the
media pipeline.
... syntax html
mediaelement.msinsertaudioeffect(activatableclassid: domstring, effectrequired: boolean, config); parameters activatableclassid a domstring defining the audio effects class.
... see also html
mediaelement microsoft api extensions ...
HTMLMediaElement.muted - Web APIs
the html
mediaelement.muted indicates whether the
media element muted.
... example var obj = document.createelement('video'); console.log(obj.muted); // false specifications specification status comment html living standardthe definition of 'html
mediaelement.muted' in that specification.
... living standard html5the definition of 'html
mediaelement.muted' in that specification.
HTMLMediaElement.onencrypted - Web APIs
the onencrypted property of the html
mediaelement is an event handler, fired whenever an encrypted event occurs, denoting the
media is encrypted.
...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/html
mediaelement" 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">html
mediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax html
mediaeleme...
...} specifications specification status comment encrypted
media extensionsthe definition of 'onencrypted' in that specification.
HTMLMediaElement.onerror - Web APIs
the onerror property of the html
mediaelement interface is the eventhandler for processing error events.
... the error event fires when some form of error occurs while attempting to load or perform the
media.
... syntax html
mediaelement.onerror = eventlistener; value a function which serves as the event handler for the error event.
HTMLMediaElement.onwaitingforkey - Web APIs
the onwaitingforkey property of the html
mediaelement is an event handler, fired when a waitingforkey event occurs, when playback is blocked while waiting for an encryption key.
...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/html
mediaelement" 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">html
mediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax html
mediaeleme...
...} specifications specification status comment encrypted
media extensionsthe definition of 'onwaitingforkey' in that specification.
HTMLMediaElement.paused - Web APIs
the read-only html
mediaelement.paused property tells whether the
media element is paused.
... example var obj = document.createelement('video'); console.log(obj.paused); // true specifications specification status comment html living standardthe definition of 'html
mediaelement.paused' in that specification.
... living standard html5the definition of 'html
mediaelement.paused' in that specification.
HTMLMediaElement: play event - Web APIs
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 html
mediaelement's play event, then post a message when that event handler has reacted to the event firing.
...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.
HTMLMediaElement: playing event - Web APIs
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 html
mediaelement's playing event, then post a message when that event handler has reacted to the event firing.
...ryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specifications specification status html living standardthe definition of 'playing
media event' in that specification.
... living standard html5the definition of 'playing
media event' in that specification.
HTMLMediaElement: ratechange event - Web APIs
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 html
mediaelement's ratechange event, then post a message when that event handler has reacted to the event firing.
...r('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('the playback rate changed.'); }; specifications specification status html living standardthe definition of 'ratechange
media event' in that specification.
... living standard html5the definition of 'ratechange
media event' in that specification.
HTMLMediaElement: seeked event - Web APIs
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 html
mediaelement's seeked event, then post a message when that event handler has reacted to the event firing.
...eeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the playback position it was looking for.'); }; specifications specification status html living standardthe definition of 'seeked
media event' in that specification.
... living standard html5the definition of 'seeked
media event' in that specification.
HTMLMediaElement: timeupdate event - Web APIs
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 html
mediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing.
...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.
HTMLMediaElement.volume - Web APIs
the html
mediaelement.volume property sets the volume at which the
media will be played.
... example var obj = document.createelement('audio'); console.log(obj.volume); // 1 obj.volume = 0.75; specifications specification status comment html living standardthe definition of 'html
mediaelement.volume' in that specification.
... living standard html5the definition of 'html
mediaelement.volume' in that specification.
HTMLMediaElement: volumechange event - Web APIs
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 html
mediaelement's volumechange event, then post a message when that event handler has reacted to the event firing.
...tor('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('the volume changed.'); }; specifications specification status html living standardthe definition of 'volumechange
media event' in that specification.
... living standard html5the definition of 'volumechange
media event' in that specification.
HTMLMediaElement: waiting event - Web APIs
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 html
mediaelement's waiting event, then post a message when that event handler has reacted to the event firing.
...'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) => { console.log('video is waiting for more data.'); }; specifications specification status html living standardthe definition of 'waiting
media event' in that specification.
... living standard html5the definition of 'waiting
media event' in that specification.
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.
... 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.
MediaDeviceInfo.deviceId - Web APIs
the deviceid readonly property of the
mediadeviceinfo interface returns a domstring that is an identifier for the represented device and is 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.
MediaDeviceInfo.kind - Web APIs
the kind readonly property of the
mediadeviceinfo interface returns an enumerated value, that is either "videoinput", "audioinput" or "audiooutput".
... syntax var kind =
mediadeviceinfo.kind value a domstring.
... specifications specification status comment
media capture and streamsthe definition of 'kind' in that specification.
MediaKeyMessageEvent() - Web APIs
the
mediakeymessageevent constructor creates a new
mediakeymessageevent object which creates a new instance of
mediakeymessageevent.
... syntax var
mediakeymessageevent = new
mediakeymessageevent(typearg, options) parameters typearg a domstring containing one of may be one of license-request, license-renewal, license-renewal, or individualization-request.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
mediakeymessageevent() constructor experimentalchrome full support 42edge full support ≤18firefox ?
MediaKeySession.onkeystatuseschange - Web APIs
the onkeystatuseschange property of the
mediakeysession is an event handler, fired whenever a keystatuschange event ocurrs, denoting there has been a change in the keys or their statuses within a session.
...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...
...} specifications specification status comment encrypted
media extensionsthe definition of 'onkeystatuseschange' in that specification.
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.
... 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.
... specifications specification status comment encrypted
media extensions recommendation initial definition.
MediaKeyStatusMap.get() - Web APIs
the get property of the
mediakeystatusmap interface returns the value associated with the given key, or undefined if there is none.
... syntax var value =
mediakeystatusmap.get(key); parameters key the key whose value you want returned.
... specifications specification status comment encrypted
media extensions recommendation initial definition.
MediaKeyStatusMap.has() - Web APIs
the has property of the
mediakeystatusmap interface returns a boolean, asserting whether a value has been associated with the given key.
... syntax var boolean =
mediakeystatusmap(key) parameters key the key whose value you want returned returns a boolean.
... specifications specification status comment encrypted
media extensions recommendation initial definition.
MediaKeyStatusMap.keys() - Web APIs
the keys property of the
mediakeystatusmap interface returns a new iterator object, containing keys for each element in the status map, in insertion order.
... syntax var iterator =
mediakeystatusmap.keys() parameters none.
... specifications specification status comment encrypted
media extensions recommendation initial definition.
MediaKeyStatusMap.size - Web APIs
the size read-only property of the
mediakeystatusmap interface returns the number of key/value pairs in the status map.
... syntax var size =
mediakeystatusmap.size; value a long integer.
... specifications specification status comment encrypted
media extensionsthe definition of 'size' in that specification.
MediaKeyStatusMap.values() - Web APIs
the values property of the
mediakeystatusmap interface returns a new iterator object, containing values for each element in the status map, in insertion order.
... syntax var iterator =
mediakeystatusmap.values() parameters none.
... specifications specification status comment encrypted
media extensions recommendation initial definition.
MediaMetadata.album - Web APIs
the album property of the
mediametadata interface returns or sets the name of the album or collection containing the
media to be played.
... syntax var album =
mediametadata.album
mediametadata.album = album value a string containing the name of the album.
... specifications specification status comment
media session standardthe definition of 'album' in that specification.
MediaMetadata.artist - Web APIs
the artist property of the
mediametadata interface returns or sets the name of the artist, group, creator, etc., of the
media to be played.
... syntax var artist =
mediametadata.artist
mediametadata.artist = artist value a string containing the name of the artist.
... specifications specification status comment
media session standardthe definition of 'artist' in that specification.
MediaMetadata.artwork - Web APIs
the artwork property of the
mediametadata interface returns or sets an array of
mediaimage objects representing images associated with playing
media.
... syntax var artwork[] =
mediametadata.artwork
mediametadata.artwork = artwork[] value an array of
mediaimage objects.
... specifications specification status comment
media session standardthe definition of 'artwork' in that specification.
MediaMetadata.title - Web APIs
the title property of the
mediametadata interface returns or sets the title of the
media to be played.
... syntax var title =
mediametadata.title
mediametadata.title = title value a string containing the title of the
media.
... specifications specification status comment
media session standardthe definition of 'title' in that specification.
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.
... examples var mql = window.match
media('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaRecorder.audioBitsPerSecond - Web APIs
the audiobitspersecond read-only property of the
mediarecorder interface returns the audio encoding bit rate in use.
... syntax var audiobitspersecond =
mediarecorder.audiobitspersecond value a number (unsigned long).
... specifications specification status comment
mediastream recordingthe definition of 'audiobitspersecond' in that specification.
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.
... examples using addeventlistener to listen for error events: async function record() { const stream = await navigator.
mediadevices.getuser
media({audio: true}); const recorder = new
mediarecorder(stream); recorder.addeventlistener('error', (event) => { console.error(`error recording stream: ${event.error.name}`) }); recorder.start(); } record(); the same, but using the onerror event handler property: async function record() { const stream = await navigator.
mediadevices.getuser
media({audio: true}); const recorder = new
mediarecorder(stream); recorder.onerror = (event) => { console.error(`error recording stream: ${event.error.name}`) }; recorder.start(); } record(); specifications specification status
mediastream...
MediaRecorder.videoBitsPerSecond - Web APIs
the videobitspersecond read-only property of the
mediarecorder interface returns the video encoding bit rate in use.
... syntax var videobitspersecond =
mediarecorder.videobitspersecond value a number (unsigned long).
... example // tbd specifications specification status comment
mediastream recordingthe definition of 'videobitspersecond' in that specification.
MediaRecorderErrorEvent - Web APIs
the
mediarecordererrorevent interface represents errors returned by the
mediastream recording api.
... constructor
mediastreamrecorderevent() creates and returns a new
mediarecordererrorevent event object with the given parameters.
... specifications specification status comment
mediastream recordingthe definition of '
mediarecordererrorevent' in that specification.
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.
... 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.
... specifications specification status comment
media session standardthe definition of '
mediasessionactiondetails.fastseek' in that specification.
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.
... specifications specification status comment
media session standardthe definition of '
mediasessionactiondetails.seekoffset' in that specification.
MediaSessionActionDetails.seekTime - Web APIs
the
mediasessionactiondetails dictionary's seektime property is always included when a seekto action is sent to the action handler callback.
... 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.
... specifications specification status comment
media session standardthe definition of '
mediasessionactiondetails.seektime' in that specification.
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.
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.
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.
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.
MediaStream.id - Web APIs
the
mediastream.id() read-only property is a domstring containing 36 characters denoting a unique identifier (guid) for the object.
... syntax var id =
mediastream.id; example var p = navigator.
mediadevices.getuser
media({ audio: true, video: true }); p.then(function(stream) { console.log(stream.id); }) specifications specification status comment
media capture and streamsthe definition of '
mediastream.id' in that specification.
...— 6.0legend full support full support no support no support see also
mediastream, the interface this property belongs to.
MediaStreamAudioDestinationNode.stream - Web APIs
the stream property of the audiocontext interface represents a
mediastream containing a single audio
mediastreamtrack 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.create
mediastreamdestination(); var mystream = destination.stream; value a
mediastream.
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.
... 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.
MediaStreamTrack.getSettings() - Web APIs
the getsettings() method of the
mediastreamtrack interface returns a
mediatracksettings object containing the current values of each of the constrainable properties for the current
mediastreamtrack.
... syntax const settings = track.getsettings() returns a
mediatracksettings object describing the current configuration of the track's constrainable properties.
... specifications specification status comment
media capture and streamsthe definition of 'getsettings()' in that 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.
... 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.
MediaStreamTrack.onunmute - Web APIs
mediastreamtrack's onunmute event handler is called when the unmute event is received.
... syntax track.onunmute = unmutehandler; value unmutehandler is a function which is called when the
mediastreamtrack receives the unmute event.
... mytrack.onunmute = function(evt) { playstateicon.innerhtml = "🔈"; }; specifications specification status comment
media capture and streamsthe definition of '
mediastreamtrack.onunmute' in that specification.
MediaStreamTrack.readyState - Web APIs
the
mediastreamtrack.readystate read-only property returns an enumerated value giving the status of the track.
...in that case, the output of data can be switched on or off using the
mediastreamtrack.enabled property.
... specifications specification status comment
media capture and streamsthe definition of '
mediastreamtrack.readystate' in that specification.
MediaTrackControls.volume - Web APIs
the
mediatrackconstraints dictionary's volume property is a constraindouble describing the requested or mandatory constraints placed upon the value of the volume constrainable property.
... 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().
... 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.
MediaTrackSettings.cursor - Web APIs
the
mediatracksettings dictionary's cursor property indicates whether or not the cursor should be captured as part of the video track included in the
mediastream returned by getdisplay
media().
... 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.
... specifications specification status comment screen capturethe definition of '
mediatracksettings.cursor' in that specification.
MediaTrackSettings.logicalSurface - Web APIs
the
mediatracksettings dictionary's logicalsurface property indicates whether or not the display area being captured is a logical surface.
... 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.
... specifications specification status comment screen capturethe definition of '
mediatracksettings.logicalsurface' in that specification.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
the
mediatracksupportedconstraints dictionary's aspectratio 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 aspectratio constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.channelCount - Web APIs
the
mediatracksupportedconstraints dictionary's channelcount 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 channelcount constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.deviceId - Web APIs
the
mediatracksupportedconstraints dictionary's deviceid 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 deviceid constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
the
mediatracksupportedconstraints dictionary's echocancellation 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 echocancellation constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.facingMode - Web APIs
the
mediatracksupportedconstraints dictionary's facingmode 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 facingmode constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.frameRate - Web APIs
the
mediatracksupportedconstraints dictionary's framerate 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 framerate constraint.
... 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.
... specifications specification status comment
media capture and streamsthe definition of 'framerate' in that specification.
MediaTrackSupportedConstraints.groupId - Web APIs
the
mediatracksupportedconstraints dictionary's groupid 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 groupid constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.height - Web APIs
the
mediatracksupportedconstraints dictionary's height 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 height constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.latency - Web APIs
the
mediatracksupportedconstraints dictionary's latency 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 latency constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.sampleRate - Web APIs
the
mediatracksupportedconstraints dictionary's samplerate 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 samplerate constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.sampleSize - Web APIs
the
mediatracksupportedconstraints dictionary's samplesize 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 samplesize constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints.volume - Web APIs
the
mediatracksupportedconstraints dictionary's volume 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 volume constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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().volume) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result ...
MediaTrackSupportedConstraints.width - Web APIs
the
mediatracksupportedconstraints dictionary's width 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 width constraint.
... you can access the supported constraints dictionary by calling navigator.
mediadevices.getsupportedconstraints().
... 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.
MediaTrackSupportedConstraints - Web APIs
the
mediatracksupportedconstraints dictionary establishes the list of constrainable properties recognized by the user agent or browser in its implementation of the
mediastreamtrack object.
... an object conforming to
mediatracksupportedconstraints is returned by
mediadevices.getsupportedconstraints().
... an actual constraint set is described using an object based on the
mediatrackconstraints dictionary.
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.
Window.clearImmediate() - Web APIs
this method clears the action specified by window.setim
mediate.
... syntax window.clearim
mediate( im
mediateid ) where im
mediateid is a id returned by window.setim
mediate.
... examples let im
mediateid = setim
mediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearim
mediate(im
mediateid); }); specifications specification status comment efficient script yielding the definition of 'setim
mediate' in that specification.
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.
... 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.
... default value the default value for unsized-
media is '*', that is unsized
media elements are allowed for all origins by default.
SyntaxError: identifier starts immediately after numeric literal - JavaScript
the javascript exception "identifier starts im
mediately after numeric literal" occurs when an identifier started with a digit.
... message syntaxerror: unexpected identifier after numeric literal (edge) syntaxerror: identifier starts im
mediately after numeric literal (firefox) syntaxerror: unexpected number (chrome) error type syntaxerror what went wrong?
...the following fails: var 1life = 'foo'; // syntaxerror: identifier starts im
mediately after numeric literal var foo = 1life; // syntaxerror: identifier starts im
mediately after numeric literal alert(1.foo); // syntaxerror: identifier starts im
mediately after numeric literal you will need to rename your variable to avoid the leading number.
Image file type and format guide - Web media technologies
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.
...these include cmyk, ycbcr, and others, making tiff a good choice for storing images intended for print, film, or television
media.
...<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.
nsIDOMHTMLMediaElement
dom/interfaces/html/nsidomhtml
mediaelement.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 nsidomhtml
mediaelement interface implements the dom html
mediaelement interface.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
the canvascapture
mediastreamtrack canvas read-only property returns the htmlcanvaselement from which frames are being captured.
... // obtain the canvas associated with the stream var canvas = stream.canvas; specifications specification status comment
media capture from dom elementsthe definition of 'canvascapture
mediastreamtrack.canvas' in that specification.
CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
the canvascapture
mediastreamtrack method requestframe() requests that a frame be captured from the canvas and sent to the stream.
... 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 'canvascapture
mediastream.requestframe()' in that specification.
HTMLMediaElement.controlsList - Web APIs
the controlslist property of the html
mediaelement interface returns a domtokenlist that helps the user agent select what controls to show on the
media element whenever the user agent shows its own set of controls.
... syntax var domtokenlist = html
mediaelement.controlslist; value a domtokenlist.
HTMLMediaElement.disableRemotePlayback - Web APIs
the html
mediaelement.disableremoteplayback property determines whether the
media element is allowed to have a remote playback ui.
... syntax var remoteplaybackdisabled = element.disableremoteplayback; value a boolean indicating whether the
media element may have a remote playback ui.
HTMLMediaElement.initialTime - Web APIs
the html
mediaelement.initialtime is the initial playback position in seconds.
... this property is obsolete, you can use a
media fragments uri in the html
mediaelement.src attribute instead.
HTMLMediaElement: loadstart event - Web APIs
); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('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.
HTMLMediaElement.pause() - Web APIs
the html
mediaelement.pause() method will pause playback of the
media, if the
media is already in a paused state this method will have no effect.
... syntax html
mediaelement.pause() parameters none.
HTMLMediaElement: progress event - Web APIs
); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('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.
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.
... 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.
MediaImage - Web APIs
the
media session api's
mediaimage dictionary describes the images associated with the
media resource
mediametadata.
... specifications specification status comment
media session standardthe definition of '
mediaimage' in that specification.
MediaKeyMessageEvent.messageType - Web APIs
the
mediakeymessageevent.messagetype read-only property indicates the type of message.
... syntax var messagetype =
mediakeymessageevent.messagetype; specifications specification status comment encrypted
media extensionsthe definition of 'messagetype' in that specification.
MediaKeyStatusMap.entries() - Web APIs
the entries() read-only property of the
mediakeystatusmap interface returns a new iterator object, containing an array of [key, value] pairs for each element in the status map, in insertion order.
... returns exceptions specifications specification status comment encrypted
media extensions recommendation initial definition.
createMediaKeys() - Web APIs
the
mediakeysystemaccess.create
mediakeys() method returns a promise that resolves to a new
mediakeys object.
... syntax var
mediakeys = await
mediakeysystemaccess.create
mediakeys(); specifications specification status comment encrypted
media extensionsthe definition of 'create
mediakeys()' in that specification.
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.
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.
MediaStreamTrack.id - Web APIs
the
mediastreamtrack.id read-only property returns a domstring containing a unique identifier (guid) for the track, which is generated by the user agent.
... syntax const id = track.id specifications specification status comment
media capture and streamsthe definition of '
mediastreamtrack.id' in that specification.
MediaStreamTrack.kind - Web APIs
the
mediastreamtrack.kind read-only property returns a domstring set to "audio" if the track is an audio track and to "video", if it is a video track.
... specifications specification status comment
media capture and streamsthe definition of '
mediastreamtrack.kind' in that specification.
MediaStreamTrack.label - Web APIs
the
mediastreamtrack.label read-only property returns a domstring containing a user agent-assigned label that identifies the track source, as in "internal microphone".
... syntax const label = track.label specifications specification status comment
media capture and streamsthe definition of '
mediastreamtrack.label' in that specification.
MediaStreamTrack.onmute - Web APIs
mediastreamtrack's onmute event handler is called when the mute event is received.
... mytrack.onmute = function(evt) { playstateicon.innerhtml = "f507;"; }; specifications specification status comment
media capture and streamsthe definition of '
mediastreamtrack.onmute' in that specification.
MediaStreamTrack.onoverconstrained - Web APIs
the
mediastreamtrack.onoverconstrained event handler is a property called when the overconstrained event is received.
...an event handler always has one single parameter, containing the event, here of type
mediastreamerrorevent.
CSS Paged Media - CSS: Cascading Style Sheets
css paged
media is a module of css that defines how page switches are handled.
... reference css properties page-break-after page-break-before page-break-inside at-rules @page pseudo-classes :blank :first :left :right specifications specification status comment css paged
media module level 3 working draft css fragmentation module level 3 candidate recommendation css level 2 (revision 1) recommendation ...
Index - Web APIs
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.
... 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.
... 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.
...And 778 more matches
Key Values - Web APIs
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 | multi
media 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.
... note: this shouldn't be confused with the "
mediapause" key value, which is used for
media controllers, rather than to control applications and processes.
... note: this shouldn't be confused with the "
mediaplay" key value, which is used for
media controllers, rather than to control applications and processes.
...And 57 more matches
Signaling and video calling - Web APIs
webrtc allows real-time, peer-to-peer,
media exchange between two devices.
...a form of discovery and
media format negotiation must take place, as discussed elsewhere, in order for two devices on different networks to locate one another.
... note: if you try out the example on glitch, please note that any changes made to the code will im
mediately reset any connections.
...And 42 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.
...you can find compatibility information in the guide to
media types and formats on the web.
...And 41 more matches
Capabilities, constraints, and settings - Web APIs
this article discusses capabilities and constraints, as well as
media settings, and includes an example we call the constraint exerciser.
... 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.
... in the
media stream api, both
mediastream and
mediastreamtrack have constrainable properties.
...And 32 more matches
Index - Archive of obsolete content
189 html to dom code snippets, dom, guide, html, inter
mediate, needsupdate although you can now natively parse html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
...the tool enables mozilla.org to be im
mediately 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.
...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 im
mediately or when the document is done loading.
...And 31 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.
...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.
...however, this can be useful when creating
media elements whose source will be set at a later time, under user control.
...And 30 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the
media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
...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).
...see the autoplay guide for
media and web audio apis for details.
...And 28 more matches
Video and Audio APIs - Learn web development
previous overview: client-side web apis next html5 comes with elements for embedding rich
media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
...if you don't specify this, you get no playback controls: this is not as im
mediately useful for video playback, but it does have advantages.
... the html
mediaelement api part of the html5 spec, the html
mediaelement api provides features to allow you to control video and audio players programmatically — for example html
mediaelement.play(), html
mediaelement.pause(), etc.
...And 26 more matches
Event reference
media events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed.
... canplay the browser can play the
media, but estimates that not enough data has been loaded to play the
media up to its end without having to stop for further buffering of content.
... canplaythrough the browser estimates it can play the
media up to its end without stopping for content buffering.
...And 26 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
it can also be the destination for streamed
media, using a
mediastream.
...in a similar manner to the <img> element, we include a path to the
media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.
...however, this can be useful when creating
media elements whose source will be set at a later time, under user control.
...And 25 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getuser
media()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery.
...note that getuser
media() is an experimental technology, which currently only works in google chrome and firefox desktop.
... 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.
...And 24 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
13 adobe flash adobe, codingscripting, flash, glossary, infrastructure flash is an obsolescent technology developed by adobe for viewing expressive web applications, multi
media content, and streaming
media.
... 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.
...And 22 more matches
RTCPeerConnection - Web APIs
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.
...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.
...And 22 more matches
Using the Screen Capture API - Web APIs
in this article, we will examine how to use the screen capture api and its getdisplay
media() 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 getdisplay
media() to enable screen sharing on browsers that support it but do not implement the current standard api.
... capturing screen contents capturing screen contents as a live
mediastream is initiated by calling navigator.
mediadevices.getdisplay
media(), which returns a promise that resolves to a stream containing the live screen contents.
...And 22 more matches
Video and audio content - Learn web development
previous overview: multi
media and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your html documents!
...at a minimum, the interface must include a way to start and stop the
media, and to adjust the volume.
... contents of a
media file first, let's go through the terminology quickly.
...And 21 more matches
Index - Learn web development
3 accessible multi
media accessibility, article, audio, beginner, codingscripting, html, images, javascript, learn, multi
media, video, captions, subtitles, text tracks this chapter has provided a summary of accessibility concerns for multi
media content, along with some practical solutions.
... 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).
...the html
mediaelement api makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg.
...And 20 more matches
Web accessibility for seizures and physical reactions - Accessibility
the epilepsy foundation's article "take advantage 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.
... @
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.
... button { animation: vibrate 0.3s linear infinite both; } @
media (prefers-reduced-motion: reduce) { button { animation: none; } } prefers-color-scheme this can be useful if the ambient light api is not available.
...And 18 more matches
Responsive design - Learn web development
the third key component was the
media query.
...
media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css.
...in marcotte's original exploration this meant flexible grids (using floats) and
media queries, however in the almost 10 years since that article was written, working responsively has become the default.
...And 17 more matches
HTTP Index - HTTP
found 277 pages: # page tags and summary 1 http http, hypertext, reference, tcp/ip, web, web development, l10n:priority hypertext transfer protocol (http) is an application-layer protocol for transmitting hyper
media documents, such as html.
... 6 data urls base64, guide, http, inter
mediate, url data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in documents.
... 9 mime types (iana
media types) content-type, guide, http, mime types, meta, request header, response header, application/javascript, application/json, application/xml a
media type (also known as a multipurpose internet mail extensions or mime type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.
...And 17 more matches
Live streaming web audio and video - Developer guides
often shortened to just streaming, live streaming is the process of transmitting
media 'live' to computers and devices.
... the key consideration when streaming
media to a browser is the fact that rather than playing a finite file we are relaying a file that is being created on the fly and has no pre-determined start or end.
... key differences between streamed and static
media in this case, we are using static
media to describe
media that is represented by a file, whether it be an mp3 or webm file.
...And 16 more matches
Experimental features in Firefox
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.
... 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.
... nightly 73 no developer edition 73 no beta 73 no release 73 no preference name dom.webgpu.enabled html dom api global event: beforeinput the global beforeinput event is sent to an <input> element—or any element whose contenteditable attribute is enabled—im
mediately before the element's value changes.
...And 14 more matches
Responsive images - Learn web development
previous overview: multi
media and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
... sizes defines a set of
media conditions (e.g.
... screen widths) and indicates what image size would be best to choose, when certain
media conditions are true — these are the hints we talked about earlier.
...And 13 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 inter
mediary.
...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.
... webrtc concepts and usage webrtc serves multiple purposes; together with the
media capture and streams api, they provide powerful multi
media 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.
...And 13 more matches
Screen Capture API - Web APIs
the screen capture api introduces additions to the existing
media capture and streams api to let the user select a screen or portion of a screen (such as a window) to capture as a
media stream.
...its sole method is
mediadevices.getdisplay
media(), whose job is to ask the user to select a screen or portion of a screen to capture in the form of a
mediastream.
... to start capturing video from the screen, you call getdisplay
media() on the instance of
media navigator.
mediadevices: capturestream = await navigator.
mediadevices.getdisplay
media(display
mediaoptions); the promise returned by getdisplay
media() resolves to a
mediastream which streams the captured
media.
...And 12 more matches
Index - Developer guides
6 audio and video delivery audio, guide, html, html5,
media, video 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.
...you can find compatibility information in the guide to
media types and formats on the web.
... 7 adding captions and subtitles to html5 video html5,
media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the html
mediaelement and window.fullscreen apis, and also at how to style the player.
...And 12 more matches
SVG documentation index - SVG: Scalable Vector Graphics
14 svg conditional processing attributes inter
mediate, needsexample, property, reference, svg the svg conditional processing attributes are all the attributes that can be specified on some svg elements to control whether or not the element on which it appears should be rendered.
... 15 svg core attributes attribute, inter
mediate, reference, svg the svg core attributes are all the common attributes that can be specified on any svg element.
... 75 filterres needsexample, svg, svg attribute, svg filter the filterres attribute indicates the width and height of the inter
mediate images in pixels of a filter primitive.
...And 12 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macro
media.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a "clsid:" urn followed by the unique identifie...
...this is, in fact, the unique identifier of macro
media's flash plugin, and developers are expected to know such unique identifiers in order to invoke the component of their choice.
... with the release of netscape 7.1, this kind of activex use of the object element is supported for use with the microsoft® windows
media player.
...And 11 more matches
Graceful asynchronous programming with Promises - Learn web development
essentially, a promise is an object that represents an inter
mediate state of an operation — in effect, a promise that a result of some kind will be returned at some point in the future.
... that button's handler calls getuser
media() in order to get access to the user's camera and microphone.
... since getuser
media() has to ensure that the user has permission to use those devices and ask the user which microphone to use and which camera to use (or whether to be a voice-only call, among other possible options), it can block until not only all of those decisions are made, but also the camera and microphone have been engaged.
...And 11 more matches
RTCPeerConnection.addTrack() - Web APIs
the rtcpeerconnection method addtrack() adds a new
media track to the set of tracks which will be transmitted to the other peer.
... syntax rtpsender = rtcpeerconnection.addtrack(track, stream...); parameters track a
mediastreamtrack object representing the
media track to add to the peer connection.
...optional one or more local
mediastream objects to which the track should be added.
...And 11 more matches
SourceBuffer - Web APIs
the sourcebuffer interface represents a chunk of
media to be passed into an html
mediaelement and played, via a
mediasource object.
... this can be made up of one or several
media segments.
...this is a timestamp range that can be used to filter what
media data is appended to the sourcebuffer.
...And 10 more matches
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
this page explains a problem that can cause svg to stop working in mozilla due to the way mozilla maps filename extensions to
media types.
... symptoms previously you were able to open and display svg content with mozilla, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local svg files, and displays the "additional plugins are required to display all the
media on this page" bar when you try to view html with embedded svg.
... background mozilla decides if and how it can open files by using their
media (mime) type.
...And 10 more matches
widget - Archive of obsolete content
for example, suppose we want to implement a
media player as an add-on.
...but because content scripts can't use the sdk's apis, we'll want the content script to send messages to the main add-on code, which can then implement the
media player functions using the sdk.
...the widget is im
mediately added to the add-on bar.
...And 9 more matches
CSS3 - Archive of obsolete content
media queries recommendation since june 19th, 2012 extends the former
media type ( print, screen, … ) to a full language allowing queries on the device
media capabilities like only screen and (color) .
...
media queries are not only used in css document but also in some attributes of html elements, like the
media attribute of the <link> element.
... the next iteration of this specification is in the work, allowing to tailor a web site regarding the input methods available on the user agent, with new
media features like hover or pointer.
...And 9 more matches
Encrypt Decrypt_MAC_Using Token
(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as inter
mediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id.
...*/ iv = encbuf; ivlen = encbuflen; /* write the cipher text to inter
mediate file.
... */ secstatus getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open inter
mediate file, read in header, get iv and cka_ids of two keys * from it.
...And 9 more matches
Bytecode Descriptions
int32 operands: (int32_t val) stack: ⇒ val push the int32_t im
mediate operand as an int32value.
... int8 operands: (int8_t val) stack: ⇒ val push the int8_t im
mediate operand as an int32value.
... uint16 operands: (uint16_t val) stack: ⇒ val push the uint16_t im
mediate operand as an int32value.
...And 9 more matches
WebRTC Statistics API - Web APIs
this way, we look only at the video-related statistics for the local rtcrtpreceiver responsible for receiving the streamed
media.
... rtcicecandidatestats rtcstats
media-source statistics about the
media produced by the
mediastreamtrack attached to an rtp sender.
... rtcaudiosourcestats or rtcvideosourcestats rtc
mediasourcestats rtcstats rtcaudiosourcestats or rtcvideosourcestats outbound-rtp statistics describing the state of one of the outbound data streams on this connection.
...And 9 more matches
Grid template areas - CSS: Cascading Style Sheets
redefining the grid using
media queries as our layout is now contained in one part of the css, this makes it very easy to make changes at different breakpoints.
... when doing this, define the names for your areas outside of any
media queries.
...#ffd8a8; padding: 1em; color: #d9480f; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper { display: grid; grid-auto-rows: minmax(100px, auto); grid-template-columns: 1fr; grid-template-areas: "hd" "main" "sd" "ft"; } we can then redefine that layout inside
media queries to go to our two columns layout, and perhaps take it to a three column layout if the available space is even wider.
...And 9 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
you can also provide a
media type or query inside a
media attribute; this resource will then only be loaded if the
media condition is true.
... for example: <link href="print.css" rel="stylesheet"
media="print"> <link href="mobile.css" rel="stylesheet"
media="screen and (max-width: 600px)"> some interesting new performance and security features have been added to the <link> element too.
...
media this attribute specifies the
media that the linked resource applies to.
...And 9 more matches
Encrypt Decrypt MAC Keys As Session Objects
(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as inter
mediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id,...
... } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to inter
mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac lengt...
...troycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* * gets iv and ckaids from header file */ secstatus getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open inter
mediate file, read in header, get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve iv from cipher file\n"); goto cleanup; } rv = readfromheaderfile(cipherfilename, symkey, enckeyitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr...
...And 8 more matches
Encrypt and decrypt MAC using token
(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as inter
mediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id,...
... } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to inter
mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac lengt...
...troycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* * gets iv and ckaids from header file */ secstatus getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open inter
mediate file, read in header, get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve iv from cipher file\n"); goto cleanup; } rv = readfromheaderfile(cipherfilename, symkey, enckeyitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr...
...And 8 more matches
Enc Dec MAC Output Public Key as CSR
stderr, "%-21s specify certficate request file name\n\n", "-r "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as inter
mediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* map option letter enumerated commad type */ static commandtype option2command(const char* c) { switch (*c) { case 'g': return gen_csr; c...
... } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to inter
mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) goto cleanup; } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (mac...
...tderr, "extracted : "); printasascii(pr_stderr, macitem->data, macitem->len); pr_fprintf(pr_stderr, "computed : "); printasascii(pr_stderr, newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } return rv; } /* * open inter
mediate file, read in iv, wrapped encryption key, * wrapped mac key, mac, pad and public key from header file */ secstatus getdatafromheader(const char *headerfilename, secitem *ivitem, secitem *wrappedenckeyitem, secitem *wrappedmackeyitem, secitem *macitem, secitem *paditem, seckeypublickey *...
...And 8 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
<noisefilename>"); fprintf(stderr, "%-21s specify an input file name\n\n", "-i <ipfilename>"); fprintf(stderr, "%-21s specify an output file name\n\n", "-o <opfilename>"); fprintf(stderr, "%-7s for encrypt, it takes <ipfilename> as an input file and produces\n", "note :"); fprintf(stderr, "%-7s <ipfilename>.enc and <ipfilename>.header as inter
mediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes <ipfilename>.enc and <ipfilename>.header\n", ""); fprintf(stderr, "%-7s as input files and produces <opfilename> as a final output file.\n\n", ""); exit(-1); } /* this source code form is subject to the terms of the mozilla public * license, v.
... } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to inter
mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac lengt...
...troycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* * gets iv and ckaids from header file */ secstatus getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open inter
mediate file, read in header, get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve iv from cipher file\n"); goto cleanup; } rv = readfromheaderfile(cipherfilename, symkey, enckeyitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr...
...And 8 more matches
EncDecMAC using token object - sample 3
derr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an input file name\n\n", "-i "); fprintf(stderr, "%-21s specify an output file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an input file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as inter
mediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_...
...extlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to inter
mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen,...
...newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* * gets iv and ckaids from header file */ secstatus getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open inter
mediate file, read in header, get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve iv from cipher file\n"); goto cleanup; } rv = readfromheaderfile(cipherfilename, symkey, enckeyitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve aes cka_id from cipher fil...
...And 8 more matches
Plug-in Basics - Plugins
plug-ins like these are now available: multi
media viewers such as adobe flash and adobe acrobat utilities that provide object embedding and compression/decompression services applications that range from personal information managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins.
... when the user opens a page that contains embedded data of a
media type that invokes a plug-in, the browser responds with the following sequence of actions: check for a plug-in with a matching mime type load the plug-in code into memory initialize the plug-in create a new instance of the plug-in gecko can load multiple instances of the same plug-in on a single page, or in several open windows at the same time.
... you can use the plug-in api to write plug-ins that are
media type driven and provide high performance by taking advantage of native code.
...And 8 more matches
PerformanceResourceTiming - Web APIs
performanceresourcetiming.workerstartread only returns a domhighrestimestamp im
mediately before dispatching the fetchevent if a service worker thread is already running, or im
mediately before starting the service worker thread if it is not already running.
... performanceresourcetiming.redirectendread only a domhighrestimestamp im
mediately after receiving the last byte of the response of the last redirect.
... performanceresourcetiming.fetchstartread only a domhighrestimestamp im
mediately before the browser starts to fetch the resource.
...And 8 more matches
Using DTMF with WebRTC - Web APIs
sending dtmf on an rtcpeerconnection a given rtcpeerconnection can have multiple
media tracks sent or received on it.
... let dialstring = "12024561111"; let callerpc = null; let receiverpc = null; let dtmfsender = null; let hasaddtrack = false; let
mediaconstraints = { audio: true, video: false }; let offeroptions = { offertoreceiveaudio: 1, offertoreceivevideo: 0 }; let dialbutton = null; let logelement = null; these are, in order: dialstring the dtmf string the caller will send when the "dial" button is clicked.
...
mediaconstraints an object conforming to the
mediaconstraints dictionary specifying the constraints to use when starting the connection.
...And 8 more matches
Creating a cross-browser video player - Developer guides
this article describes a simple html5 video player that uses the
media and fullscreen apis and works across most major desktop and mobile browsers.
...for further information on video formats and browser compatibility, see supported
media formats.
... using the
media api html5 comes with a javascript
media api that allows developers access to and control of html5
media.
...And 8 more matches
HTML documentation index - HTML: Hypertext Markup Language
38 html attribute: capture api, attribute, attributes, capture, constraint validation, html the capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new
media of a type defined by the accept attribute.
... 60 <area> content, element, html, html:flow content, html:phrasing content, multi
media, reference, web the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
... 63 <audio>: the embed audio element audio, element, html, html embedded content, html5, html:embedded content, html:flow content, html:phrasing content,
media, multi
media, reference, web, sound the html <audio> element is used to embed sound content in documents.
...And 8 more matches
Index - HTTP
23 content-encoding http, headers, reference the content-encoding entity header is used to compress the
media-type.
...it lets the client know how to decode in order to obtain the
media-type referenced by the content-type header.
... 40 csp:
media-src csp, directive, http, reference, security the http content-security-policy (csp)
media-src directive specifies valid sources for loading
media using the <audio> and <video> elements.
...And 8 more matches
The Implementation of the Application Object Model - Archive of obsolete content
"couldn't you just perform a tree transformation on whatever representation you have in memory?" the answer is "yes, provided there is one single common inter
mediate representation of the collected and aggregated data to use as the basis for the translation." "why?" you ask.
...if there is a common inter
mediate representation of the data in question, then we need only implement n translators, one for each content model representation that can hold our aggregate data.
... statement #3 the fact that the same hunk of aggregate data can be represented as any number of different content models (e.g., sorted, or as a toolbar, a tree view, or a menu) implies a need for a common inter
mediate representation for aggregated pluggable content that exists on top of the pluggable data sources and that exists underneath the content tree nodes that implement the interfaces through which the data is actually exposed.
...And 7 more matches
From object to iframe — other embedding technologies - Learn web development
previous overview: multi
media and embedding next by now you should really be getting the hang of embedding things into your web pages, including images, video and audio.
... active learning: classic embedding uses in this article we are going to jump straight into an active learning section, to im
mediately give you a real idea of just what embedding technologies are useful for.
...most content is copyrighted, offline and online, even content you might not expect (for example, most images on wiki
media commons).
...And 7 more matches
HTMLVideoElement - Web APIs
it also inherits properties and methods of html
mediaelement and htmlelement.
... the list of supported
media formats varies from one browser to the other.
...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/html
mediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" 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">html
mediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="8...
...And 7 more matches
ImageCapture - Web APIs
the imagecapture interface of the
mediastream image capture api provides methods to enable the capture of images or photos from a camera or other photographic device.
... it provides an interface for capturing images from a photographic device referenced through a valid
mediastreamtrack.
... constructor imagecapture() creates a new imagecapture object which can be used to capture still frames (photos) from a given
mediastreamtrack which represents a video stream.
...And 7 more matches
WebRTC connectivity - Web APIs
this article describes how the various webrtc-related protocols interact with one another in order to create a connection and transfer data and/or
media among peers.
...the description includes information about the kind of
media being sent, its format, the transfer protocol being used, the endpoint's ip address and port, and other information needed to describe a
media transfer endpoint.
...in this way, both devices share with one another the information needed in order to exchange
media data.
...And 7 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
media objects the
media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right.
... ideally a
media object should be able to be flipped — moving the image from left to right.
...with flexbox we can allow the part of the
media object containing the image to take its sizing information from the image, and then the body of the
media object flexes to take up the remaining space.
...And 7 more matches
Mobile first - Progressive web apps (PWAs)
for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any
media queries are encountered, rather than having desktop/wider screen styling first.
... if you are using mechanisms like feature detection and match
media to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain.
... selectively include javascript libraries according to
media query and feature tests (require.js is built in, which is helpful and very easy to use.) html structure for this example app, the html structure is going to be very simple: i am just including a heading, navigation menu and filler text to highlight the fact that articles can get very long on narrow screen devices.
...And 7 more matches
XPCOM Examples - Archive of obsolete content
the datasource for this is rdf:window-
mediator.
... we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-
mediator" ref="nc:window
mediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
...window
mediator component this is fine for displaying a list of open windows, but we would like to enhance this so that clicking on the menu item will switch to that window.
...And 6 more matches
Adobe Flash - Archive of obsolete content
in particular, the macro
media® flash™ plugin exposes certain plugin functionality for access via javascript.
...until macro
media changes this from within the flash plugin, scriptability can not be used on mac os x browsers based on gecko.
...example 1 also creates a constant flashversionosxscriptable that declares (arbitrarily) that macro
media will fix flash to be scriptable in mach-o browsers (on os x) by version 12.
...And 6 more matches
The HTML DOM API - Web APIs
management of
media connected to the html
media elements (<audio> and <video>).
... event handlers for document events defined by the html standard to allow access to mouse and keyboard events, drag and drop,
media control, and more.
... there are elements that share commonalities and thus have an additional inter
mediary type.
...And 6 more matches
PerformanceNavigationTiming - Web APIs
the interface also supports the following properties: performancenavigationtiming.domcomplete read only a domhighrestimestamp representing a time value equal to the time im
mediately before the browser sets the current document readiness of the current document to complete.
... performancenavigationtiming.domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time im
mediately after the current document's domcontentloaded event completes.
... performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time im
mediately before the user agent fires the domcontentloaded event at the current document.
...And 6 more matches
RTCRtpStreamStats - Web APIs
standard fields included for all
media types codecid a domstring which uniquely identifies the object which was inspected to produce the rtccodecstats object associated with this rtp stream.
... kind a domstring whose value is "audio" if the associated
mediastreamtrack is audio-only or "video" if the track contains video.
... this value will match that of the
media type indicated by rtccodecstats.codec, as well as the track's kind property.
...And 6 more matches
Web Audio API - Web APIs
these could be either computed mathematically (such as oscillatornode), or they can be recordings from sound/video files (like audiobuffersourcenode and
mediaelementaudiosourcenode) and audio streams (
mediastreamaudiosourcenode).
...an html <audio> or <video> element), audio destination, inter
mediate processing module (e.g.
... the ended event the ended event is fired when playback has stopped because the end of the
media was reached.
...And 6 more matches
Perceivable - Accessibility
non-text content refers to multi
media such as images, audio, and video.
... multi
media content (i.e., audio or video) should at least have a descriptive identification available, such as a caption or similar.
... see text alternatives for static caption options, and audio transcripts, video text tracks, and other multi
media content for other alternatives.
...And 6 more matches
@import - CSS: Cascading 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.
... list-of-
media-queries is a comma-separated list of
media queries conditioning the application of the css rules defined in the linked url.
... so that user agents can avoid retrieving resources for unsupported
media types, authors may specify
media-dependent @import rules.
...And 6 more matches
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
the -webkit-device-pixel-ratio is a non-standard boolean css
media feature which is an alternative to the standard resolution
media feature.
... note: this
media feature is a webkit feature.
... if possible, use the resolution
media feature query instead.
...And 6 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
outside of any
media queries i need to name the areas.
...staying outside of any
media queries i am now going to set up the layout for the mobile width.
... .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen sizes, we can now add a
media query and redefine our layout for the circumstance of having enough screen real estate to show two columns.
...And 6 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
ce: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance:
media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <div>lorem</div> firefox chrome safari edge no special styling is applied.
...iv>lorem</div> safari list-button div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>lorem</div> safari datalist listitem div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; } <div>lorem</div> firefox chrome safari edge
media-enter-fullscreen-button div{ color: black; -webkit-appearance:
media-enter-fullscreen-button; } <div>lorem</div> chrome safari
media-exit-fullscreen-button div{ color: black; -webkit-appearance:
media-exit-fullscreen-button; } <div>lorem</div> chrome safari
media-fullscreen-volume-slider div{...
... color: black; -moz-appearance:
media-fullscreen-volume-slider; -webkit-appearance:
media-fullscreen-volume-slider; } <div>lorem</div> safari
media-fullscreen-volume-slider-thumb div{ color: black; -moz-appearance:
media-fullscreen-volume-slider-thumb; -webkit-appearance:
media-fullscreen-volume-slider-thumb; } <div>lorem</div> safari
media-mute-button div{ color: black; -webkit-appearance:
media-mute-button; } <div>lorem</div> chrome safari edge
media-play-button div{ color: black; -webkit-appearance:
media-play-button; } <div>lorem</div> chrome safari edge
media-overlay-play-button div{ color: black; -webkit-app...
...And 6 more matches
Web Performance
web performance basics in addition to the front end components of html, css, javascript, and
media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster.
...by minimizing the number of dom nodes, making sure the best order and attributes are used for including content such as styles, scripts,
media, and third-party scripts, you can drastically improve the user experience.
... multi
media: images and video the lowest hanging fruit of web performance is often
media optimization.
...And 6 more matches
How CSS is structured - Learn web development
for example, @import imports a stylesheet into another css stylesheet: @import 'styles2.css'; one common @rule that you are likely to encounter is @
media, which is used to create
media queries.
...
media queries use conditional logic for applying css styling.
...however, a
media query follows that defines a blue background if the browser viewport is wider than 30em.
...And 5 more matches
Storage access policy: Block cookies from trackers
when storage access is granted to tracker.example on example.com, all resources loaded from tracker.example on any top-level document loaded from example.com are im
mediately given storage access.
...consider the following examples: you run an ad on a social
media website that is seen several times by a user, but never clicked.
... that user later visits your website, which includes a conversion tracking tag from the same social
media website.
...And 5 more matches
Observer Notifications
topic subject data description chrome-document-global-created nsidomwindow null sent im
mediately after a chrome document window has been set up, but before any script code has been executed.
... content-document-global-created nsidomwindow origin sent im
mediately after a web content document window has been set up, but before any script code has been executed.
... document-element-inserted document null sent im
mediately after the root element of a document has been created, but before executing any script on it.
...And 5 more matches
AudioTrackList - Web APIs
the audiotracklist interface is used to represent a list of the audio tracks contained within a given html
media element, with each track represented by a separate audiotrack object in the list.
... retrieve an instance of this object with html
mediaelement.audiotracks.
... event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new audio track has been added to the
media element.
...And 5 more matches
msAudioCategory - Web APIs
msaudiocategory specifies the purpose of the audio or video
media, such as background audio or alerts.
... syntax <audio controls="controls" msaudiocategory="backgroundcapable
media"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app.
... alert looping or longer running alert sounds: alarms ring tones ringing notification sounds that need to attenuate existing audio no backgroundcapable
media for audio that needs to continue playing in the background.
...And 5 more matches
Browser detection using the user agent - HTTP
var hastouchscreen = false; if ("maxtouchpoints" in navigator) { hastouchscreen = navigator.maxtouchpoints > 0; } else if ("msmaxtouchpoints" in navigator) { hastouchscreen = navigator.msmaxtouchpoints > 0; } else { var mq = window.match
media && match
media("(pointer:coarse)"); if (mq && mq.
media === "(pointer:coarse)") { hastouchscreen = !!mq.matches; } else if ('orientation' in window) { hastouchscreen = true; // deprecated, but good fallback } else { // only as a last resort, fall back to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberr...
...there a single instance of a dog box im
mediately above a cat box, of course.
...also note that there is a huge difference between the
media queries (max-width: 25em), not all and (min-width: 25em), and (max-width: 24.99em): (max-width: 25em) excludes (max-width: 25em), whereas not all and (min-width: 25em) includes (max-width: 25em).
...And 5 more matches
Feature-Policy - HTTP
autoplay controls whether the current document is allowed to autoplay
media requested through the html
mediaelement interface.
... when this policy is disabled and there were no user gestures, the promise returned by html
mediaelement.play() will reject with a domexception.
...when this policy is disabled, the promise returned by getuser
media() will reject with a notallowederror domexception.
...And 5 more matches
List of Mozilla-Based Applications - Archive of obsolete content
name description additional information 389 directory server ldap server uses nss a380 seatback entertainment system
media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it.
... celtx
media tool cenzic hailstorm vulnerability assessment and management tool uses gecko chatzilla irc client standalone version (xulrunner) chromium and google chrome web browser uses mozilla nss and npapi libraries chromeless browser with html-based interface classilla mozilla browser for mac os 9 clines a clone ...
...e spidermonkey through gjs google adwords editor editor google gadgets for linux google’s desktop widget engine uses xulrunner according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim gwt-mosaic-xul xul builder for google web tools hachette's multi
media encyclopedia electronic encyclopedia this product was using mozilla in 2004 but i’m not sure if new version still does hacketyhack little coders helma web application framework uses mozilla rhino holt mcdougal cd-roms educational cd-roms activity generator and lab generator are both based on custom firefox distributions houdini 3d ...
...And 4 more matches
MMgc - Archive of obsolete content
mmgc is the tamarin (née macro
media) garbage collector, a memory management library that has been built as part of the avm2/tamarin effort.
...rcobject is used instead of gcobject when more im
mediate reclamation of memory is desired.
...drc is a scheme for getting more im
mediate reclamation of objects, while still achieving high performance and getting the other benefits of garbage collection.
...And 4 more matches
Hacking wiki - Archive of obsolete content
to be able to hack the mdc wiki software, you'll need a local webserver install, which can run
mediawiki.
...the contents of the <tt>trunk</tt> directory you just checked out is a slightly modified
mediawiki install, so you can follow the
mediawiki install instructions.
... the <tt>css</tt> folder contains files that are supposed to be in the <tt>/css</tt> directory of the site.) to get a working install, you need to configure
mediawiki.
...And 4 more matches
splitter - Archive of obsolete content
before when the grippy is clicked, the element im
mediately before the splitter in the same parent is collapsed so that its width or height is 0.
... after when the grippy is clicked, the element im
mediately after the splitter in the same parent is collapsed so that its width or height is 0.
... both either the element im
mediately before the splitter, or the element im
mediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter.
...And 4 more matches
Audio for Web games - Game development
also note that playing and im
mediately pausing your audio does not guarantee that a small piece of audio won't be played.
...buffering is the process of the browser downloading the
media in advance, which we often need to do to ensure smooth playback.
... the html
mediaelement interface comes with lots of properties to help determine whether a track is in a state to be playable.
...And 4 more matches
CSS performance optimization - Learn web development
optimizing for render blocking css can scope styles to particular conditions with
media queries.
...
media queries are important for a responsive web design and help us optimize a critical rendering path.
...by splitting the css into multiple files based on
media queries, you can prevent render blocking during download of unused css.
...And 4 more matches
Properly configuring server MIME types - Learn web development
mime types describe the
media type of content either in email or served by web servers or web applications and are intended to help guide a web browser in how the content is to be processed and displayed.
... examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical background registered values for mime types are available in iana | mime
media types.
... the http specification defines a superset of mime which is used to describe the
media types used on the web.
...And 4 more matches
Mozilla’s UAAG evaluation report
(p1) na this relates to multi
media players 2.6 respect synchronization cues.
... (p1) na this relates to multi
media players 2.7 repair missing content.
...(p1) vg can be changed through preferences or by editing the prefs.js file the prefs are at preferences, appearances, colors to use any color offered in windows, the prefs.js file must be edited by hand 4.4 slow multi
media.
...And 4 more matches
A Web PKI x509 certificate primer
one issue that is not commonly known is that the x509 trust graph is not a forest (a bunch of trees where each root is a trusted root) but a cyclic graph, where the same key/issuer can be a root or an inter
mediate for another root in the browsers key store (when roots create inter
mediates for each other it is called cross-signing).
... running your own ca if you are going to have your own ca, we recommend building 3 certificates: a long term root cert, a medium term inter
mediate cert, and a short term end-entity cert.
... this type of hierarchy allows for a relatively simple long term root to be distributed to clients, and some flexibility on the inter
mediate cert so that you can change parameters based on best practices and security research.
...And 4 more matches
AudioTrack - Web APIs
the audiotrack interface represents a single audio track from one of the html
media elements, <audio> or <video>.
... id read only a domstring which uniquely identifies the track within the
media.
...the id can also be used as the fragment part of the url if the
media supports seeking by
media fragment per the
media fragments uri specification.
...And 4 more matches
HTMLImageElement.sizes - Web APIs
the htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of
media conditions.
... this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different
media conditions.
... each condition is specified using the same conditional format used by
media queries.
...And 4 more matches
Navigator - Web APIs
properties doesn't inherit any properties, but implements those defined in navigatorid, navigatorlanguage, navigatoronline, navigatorcontentutils, navigatorstorage, navigatorstorageutils, navigatorconcurrenthardware, navigatorplugins, and navigatoruser
media.
... navigator.locks read only returns a lockmanager object which provides methods for requesting a new lock object and querying for an existing lock object navigator.
mediacapabilities read only returns a
mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and output capabilities.
... navigator.
mediadevices returns a reference to a
mediadevices object which can then be used to get information about available
media devices (
mediadevices.enumeratedevices()), find out what constrainable properties are supported for
media on the user's computer and user agent (
mediadevices.getsupportedconstraints()), and to request access to
media using
mediadevices.getuser
media().
...And 4 more matches
RTCRtpReceiver.getCapabilities() static function - Web APIs
syntax let rtpcapabilities = rtcrtpreceiver.getcapabilities(kind); parameters kind a domstring indicating the type of
media for which you wish to get the device's capability to receive.
... all browsers support the primary
media kinds: audio and video.
... return value an rtcrtpcapabilities object stating what capabilities the browser has for receiving the specified
media kind over an rtcpeerconnection.
...And 4 more matches
RTCRtpSender.getCapabilities() static function - Web APIs
syntax let rtpcapabilities = rtcrtpsender.getcapabilities(kind); parameters kind a domstring indicating the type of
media for which you wish to get the sender's capability to receive.
... all browsers support the primary
media kinds: audio and video.
... return value an rtcrtpcapabilities object stating what capabilities the browser has for sending the specified
media kind over an rtcpeerconnection.
...And 4 more matches
RTCRtpSender - Web APIs
the rtcrtpsender interface provides the ability to control and obtain details about how a particular
mediastreamtrack is encoded and sent to a remote peer.
... with it, you can configure the encoding used for the corresponding track, get information about the device's
media capabilities, and so forth.
... rtcrtpsender.track read only the
mediastreamtrack which is being handled by the rtcrtpsender.
...And 4 more matches
SourceBuffer.mode - Web APIs
the mode property of the sourcebuffer interface controls whether
media segments can be appended to the sourcebuffer in any order, or in a strict sequence.
... the two available values are: segments: the
media segment timestamps determine the order in which the segments are played.
... the mode value is initially set when the sourcebuffer is created using
mediasource.addsourcebuffer().
...And 4 more matches
TextTrackList - Web APIs
retrieve an instance of this object with html
mediaelement.texttracks.
... event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new text track has been added to the
media element.
... onremovetrack an event handler to call when the removetrack event is sent, indicating that a text track has been removed from the
media element.
...And 4 more matches
VideoTrackList - Web APIs
retrieve an instance of this object with html
mediaelement.videotracks.
... event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new video track has been added to the
media element.
... onremovetrack an event handler to call when the removetrack event is sent, indicating that a video track has been removed from the
media element.
...And 4 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
async function start() { try { const stream = await navigator.
mediadevices.getuser
media(constraints); for (const track of stream.gettracks()) { pc.addtrack(track, stream); } selfvideo.srcobject = stream; } catch(err) { console.error(err); } } this isn't appreciably different from older webrtc connection establishment code.
... the user's camera and microphone are obtained by calling getuser
media().
... the resulting
media tracks are then added to the rtcpeerconnection by passing them into addtrack().
...And 4 more matches
Migrating from webkitAudioContext - Web APIs
it was first implemented in webkit, and some of its older parts were not im
mediately removed as they were replaced in the specification, leading to many sites using non-compatible code.
... new engines implementing the web audio spec (such as gecko) will only implement the official, final version of the specification, which means that code using webkitaudiocontext or old naming conventions in the web audio specification may not im
mediately work out of the box in a compliant web audio implementation.
...); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return im
mediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful.
...And 4 more matches
-ms-high-contrast - CSS: Cascading Style Sheets
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
media feature applies to bitmap
media types.
... syntax the -ms-high-contrast
media feature is specified as one of the following values.
...And 4 more matches
Viewport concepts - CSS: Cascading Style Sheets
we generally think of width and height
media queries as being relative to the width and height of the browser window.
... a width-based
media query within the iframe document is relative to the iframe's viewport.
... @
media screen and (min-width: 500px) { p { color: red; } } if the above css is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state.
...And 4 more matches
HTML elements reference - HTML: Hypertext Markup Language
image and multi
media html supports various multi
media resources such as images, audio, and video.
...it can also be the destination for streamed
media, using a
mediastream.
... <track> the html <track> element is used as a child of the
media elements, <audio> and <video>.
...And 4 more matches
Tabbed browser - Archive of obsolete content
.getinterface(components.interfaces.nsidomwindow); mainwindow.gbrowser.addtab(...); from a dialog if your code is running in a dialog opened directly by a browser window, you can use: window.opener.gbrowser.addtab(...); if window.opener doesn't work, you can get the most recent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-
mediator;1"] .getservice(components.interfaces.nsiwindow
mediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you ...
... function openandreuseonetabperurl(url) { var wm = components.classes["@mozilla.org/appshell/window-
mediator;1"] .getservice(components.interfaces.nsiwindow
mediator); var browserenumerator = wm.getenumerator("navigator:browser"); // check each browser instance for our url var found = false; while (!found && browserenumerator.hasmoreelements()) { var browserwin = browserenumerator.getnext(); var tabbrowser = browserwin.gbrowser; // check each tab of this brow...
... function openandreuseonetabperattribute(attrname, url) { var wm = components.classes["@mozilla.org/appshell/window-
mediator;1"] .getservice(components.interfaces.nsiwindow
mediator); for (var found = false, index = 0, tabbrowser = wm.getenumerator('navigator:browser').getnext().gbrowser; index < tabbrowser.tabcontainer.childnodes.length && !found; index++) { // get the next tab var currenttab = tabbrowser.tabcontainer.childnodes[index]; // does this tab contain our ...
...And 3 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
our engineering team actually needed the least convincing to convert over to a standards-based design, because they could also im
mediately envision the benefits to their workload and maintenance of the site.
...the breakdown: 1 master screen
media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print
media file 1 aural
media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
... we have one css file specifically set up to cover most of the content throughout our pages for print
media.
...And 3 more matches
XForms Custom Controls - Archive of obsolete content
in many cases different values provided for the appearance or
mediatype attributes will determine which xbl binding will be used for a particular xforms control on the form.
...xf|select1[appearance="compact"] { -moz-binding: url('chrome://xforms/content/select-xhtml.xml#xformswidget-select1-compact'); } the
mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains.
... for example, if
mediatype='image/*' then the user should see the image that the bytes represent rather than just the byte sequence.
...And 3 more matches
Build your own function - Learn web development
try including the following line below your function to call it: displaymessage(); this line invokes the function, making it run im
mediately.
... when you save your code and reload it in the browser, you'll see the little message box appear im
mediately, only once.
...this is because we don't want to call the function im
mediately — only after the button has been clicked.
...And 3 more matches
Implementing feature detection - Learn web development
this works in a similar manner to
media queries (see also responsive design problems) — except that instead of selectively applying css depending on a
media feature like a resolution, screen width or aspect ratio, it selectively applies css depending on whether a css feature is supported.
... match
media we also wanted to mention the window.match
media javascript feature at this point too.
... this is a property that allows you to run
media query tests inside javascript.
...And 3 more matches
Gecko info for Windows accessibility vendors
ajax: asynchronous javascript and xml ajax is a method of building interactive web applications that process user requests, user actions im
mediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load.
...another [in] parameter, usealternative
mediaproperties, indicates whether you want style information for the default
media type (usually screen), or a set of alternative
media types specified in nsisimpledomdocument::set_alternateview
mediatype(
mediatypestring) .
... see the w3c's website for a list of official
media type name.
...And 3 more matches
HTML parser threading
this method returns im
mediately if another invocation of it is already on the call stack (nested event loop case).
...parser termination is checked before each tree op for an early return, because, unfortunately, gecko expects parsers to be able to terminate im
mediately.
...the parts of the parser that drive the tokenizer/tree builder pairs guarantee to flush tree ops im
mediately if a script execution tree op is generated.
...And 3 more matches
HTTP Cache
a particular app cache version in a group) in hands, this storage will provide read and write access to entries in that application cache; when the app cache is not specified, this storage will operate over all existing app caches the service also provides methods to clear the whole disk and memory cache content or purge any inter
mediate memory structures: clear – after it returns, all entries are no longer accessible through the cache apis; the method is fast to execute and non-blocking in any way; the actual erase happens in background purgefrommemory – removes (schedules to remove) any inter
mediate cache data held in memory for faster access (more about the inter
mediate cache below) nsi...
...im
mediately); there is currently no way to opt out of this feature (watch bug 938186).
...the data will be available as the writer writes data to the cache entry's output stream im
mediately, even before the output stream is closed.
...And 3 more matches
Index
the listener will passed to asyncresolve will be notified im
mediately with a status code of ns_error_abort.
... 497 nsidomhtml
mediaelement firefox 3.5, gecko 1.9.1, interfaces, interfaces:scriptable, xpcom, xpcom interface reference no summary!
... 498 nsidomhtmlsourceelement dom, html, html5, interfaces, interfaces:scriptable,
media, xpcom, xpcom interface reference the nsidomhtmlsourceelement interface is the dom interface to the source child of the audio and video
media elements in html.
...And 3 more matches
nsIDOMHTMLSourceElement
the nsidomhtmlsourceelement interface is the dom interface to the source child of the audio and video
media elements in html.
... last changed in gecko 1.9.1.2 inherits from: nsidomhtmlelement the source element allows authors to specify multiple
media resources for
media elements.
... attributes attribute type description src domstring the src attribute gives the address of the
media resource.
...And 3 more matches
Working with windows in chrome code
finding already opened windows the window
mediator xpcom component (nsiwindow
mediator interface) provides information about existing windows.
...please refer to the nsiwindow
mediator page for more information and examples of using nsiwindow
mediator.
... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel" oncommand="window.arguments[1](); close();" /> example 3: using nsiwindow
mediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places.
...And 3 more matches
Examine and edit CSS - Firefox Developer Tools
you can: toggle pseudo-classes; toggle classes; add a new rule; change the display based on the color scheme preference (as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature); change the display based on print
media rules.
... this makes it easy to see which rule is overriding the declaration: view @
media rules for print you can toggle the display into a mode that emulates @
media rules for print.
... view @
media rules for color-scheme-preference as of firefox 72, you must set devtools.inspector.color-scheme-simulation.enabled to true in the configuration editor to enable this feature.
...And 3 more matches
Style Editor - Firefox Developer Tools
the toolbox will appear at the bottom of the browser window, with the style editor activated: the style editor is divided into three main sections: the style sheet pane on the left the editor on the right the
media sidebar.
...any changes you make are im
mediately applied to the page.
... the
media sidebar the style editor displays a sidebar on the right-hand side whenever the current sheet contains any @
media rules.
...And 3 more matches
HTMLAudioElement - Web APIs
it's based on, and inherits properties and methods from, the html
mediaelement 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/html
mediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" 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">html
mediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="8...
... properties no specific properties; inherits properties from its parent, html
mediaelement, and from htmlelement.
...And 3 more matches
HTMLVideoElement.videoHeight - Web APIs
in simple terms, this is the height of the
media in its natural size.
...if the element's readystate is html
mediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame size information is yet available.
... about intrinsic width and height a user agent calculates the intrinsic width and height of the element's
media by starting with the
media's raw pixel width and height, then taking into account factors including: the
media's aspect ratio.
...And 3 more matches
HTMLVideoElement.videoWidth - Web APIs
in simple terms, this is the width of the
media in its natural size.
...if the element's readystate is html
mediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame size information is yet available.
... about intrinsic width and height a user agent calculates the intrinsic width and height of the element's
media by starting with the
media's raw pixel width and height, then taking into account factors including: the
media's aspect ratio.
...And 3 more matches
msPlayToSource - Web APIs
msplaytosource is a read-only property which gets the source associated with the
media element for use by the playtomanager.
...for more information, see the windows.
media.playto apis.
... the property value for msplaytosource is the source associated with the
media element.
...And 3 more matches
PhotoCapabilities - Web APIs
the photocapabilities interface of the the
mediastream image capture api provides available configuration options for an attached photographic device.
... photocapabilities.imageheight read only returns a
mediasettingsrange object indicating the image height range supported by the user agent.
... photocapabilities.imagewidth read only returns a
mediasettingsrange object indicating the image width range supported by the user agent.
...And 3 more matches
RTCConfiguration.bundlePolicy - Web APIs
max-compat the ice agent intially creates one rtcdtlstransport for each
media track and a separate one for the rtcdatachannel, if one is created.
... if the remote endpoint can't handle bundling, each
media track is negotiated on its own separate transport.
... max-bundle the ice agent starts by creating a single rtcdtlstransport to handle all of the connection's
media.
...And 3 more matches
RTCRtpTransceiver - Web APIs
each sdp
media section describes one bidirectional srtp ("secure real time protocol") stream (excepting the
media section for rtcdatachannel, if present).
... this pairing of send and receive srtp streams is significant for some applications, so rtcrtptransceiver is used to represent this pairing, along with other important state from the
media section.
... each non-disabled srtp
media section is always represented by exactly one transceiver.
...And 3 more matches
RTCTrackEvent - Web APIs
the webrtc api interface rtctrackevent represents the track event, which is sent when a new
mediastreamtrack is added to an rtcrtpreceiver which is part of the rtcpeerconnection.
... streams read only optional an array of
mediastream objects, each representing one of the
media streams to which the added track belongs.
... track read only the
mediastreamtrack which has been added to the connection.
...And 3 more matches
URL.createObjectURL() - Web APIs
syntax const objecturl = url.createobjecturl(object) parameters object a file, blob, or
mediasource object to create an object url for.
... using object urls for
media streams in older versions of the
media source specification, attaching a stream to a <video> element required creating an object url for the
mediastream.
... important: if you still have code that relies on createobjecturl() to attach streams to
media elements, you need to update your code to simply set srcobject to the
mediastream directly.
...And 3 more matches
Taking still photos with WebRTC - Web APIs
this canvas is kept hidden by styling the canvas with display:none, to avoid cluttering up the screen — the user does not need to see this inter
mediate stage.
... function startup() { video = document.getelementbyid('video'); canvas = document.getelementbyid('canvas'); photo = document.getelementbyid('photo'); startbutton = document.getelementbyid('startbutton'); get the
media stream the next task is to get the
media stream: navigator.
mediadevices.getuser
media({ video: true, audio: false }) .then(function(stream) { video.srcobject = stream; video.play(); }) .catch(function(err) { console.log("an error occurred: " + err); }); here, we're calling
mediadevices.getuser
media() and requesting a video stream (without audio).
... once the stream is linked to the <video> element, we start it playing by calling html
mediaelement.play().
...And 3 more matches
Window.devicePixelRatio - Web APIs
you can use window.match
media() to check if the value of devicepixelratio changes (which can happen, for example, if the user drags the window to a display with a different pixel density).
...ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(10, 10, 300, 300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a
media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to.
... javascript the javascript code creates the
media query that monitors the device resolution and checks the value of devicepixelratio any time it changes.
...And 3 more matches
XSL Transformations in Mozilla FAQ - Web APIs
note: starting in gecko 7.0, both text/xsl and application/xslt+xml are supported mime types for xslt
media stylesheets.
... <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=3"> <!-- msxml3 specific markup --> </xsl:if> what about
media="print"?
...having xslt stylesheet specific to particular
media would require to retransform the original xml source, which counteracts the expectations of the user.
...And 3 more matches
Web APIs
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted
media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api m
media capabilities api
media capture and streams
media session api
media source extensions
mediastream recordingnnavigation timingnetwork information api ppage visibility apipaym...
...aracteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue css
mediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapture
mediastreamtrack canvasgradient canvasimagesource can...
...domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync display
mediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotro...
...And 3 more matches
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a
media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
... image fragments one key difference between url() and image() is the ability to add a
media fragment identifier — a starting point along the x and y axis, along with a width and height — onto the image source to display only a section of the source image.
... the #xywh=#,#,#,#
media fragment syntax takes four comma separated numeric values.
...And 3 more matches
<ratio> - CSS: Cascading Style Sheets
the <ratio> css data type, used for describing aspect ratios in
media queries, denotes the proportion between two unitless values.
... syntax in
media queries level 3, the <ratio> data type consisted of a strictly positive <integer> followed by a forward slash ('/', unicode u+002f solidus) and a second strictly positive <integer>.
... in
media queries level 4, the <ratio> date type is updated to consist of a strictly positive <number> followed by a forward slash ('/', unicode u+002f solidus) and a second strictly positive <number>.
...And 3 more matches
Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser html5 video player using the
media and fullscreen apis.
... javascript that's really it for the im
mediate styling; the next task is making a number of javascript changes to ensure that everything works as expected.
...if a user uses the default controls, the defined
media api events — such as play and pause — are raised so this can be taken advantage of to ensure that the custom control buttons are kept in sync.
...And 3 more matches
Web Audio playbackRate explained - Developer guides
defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the
media resets; for example, if we change the source of the video, or (in some browsers) when an ended event is generated.
... so defaultplaybackrate allows us to set the playback rate before playing the
media, while playbackrate allows us to change it during
media playback.
... negative values will not cause the
media to play in reverse.
...And 3 more matches
Audio and video manipulation - Developer guides
the general technique is to: write a frame from the <video> element to an inter
mediary <canvas> element.
... read the data from the inter
mediary <canvas> element and manipulate it.
... use this web audio node type an audio track from an html <audio> or <video> element
mediaelementaudiosourcenode a plain raw audio data buffer in memory audiobuffersourcenode an oscillator generating a sine wave or other computed waveform oscillatornode an audio track from webrtc (such as the microphone input you can get using getuser
media().
...And 3 more matches
<picture>: The Picture element - HTML: Hypertext Markup Language
to decide which url to load, the user agent examines each <source>'s srcset,
media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
...cropping or modifying images for different
media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
...this lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit
media conditions.
...And 3 more matches
Promise.all() - JavaScript
it rejects im
mediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.
...it is typically used when there are multiple asynchronous tasks that are dependent on one another to complete successfully, as it does not wait and will reject im
mediately upon any of the input promises rejecting.
...synchronicity of promise.all this following example demonstrates the asynchronicity (or synchronicity, if the iterable passed is empty) of promise.all: // we are passing as argument an array of promises that are already resolved, // to trigger promise.all as soon as possible var resolvedpromisesarray = [promise.resolve(33), promise.resolve(44)]; var p = promise.all(resolvedpromisesarray); // im
mediately logging the value of p console.log(p); // using settimeout we can execute code after the stack is empty settimeout(function() { console.log('the stack is now empty'); console.log(p); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: array[2] } the same thing happens if promise.all rejects: var mixedpromi...
...And 3 more matches
panel - Archive of obsolete content
self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css"
media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about content scrip...
...addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/css"
media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default style is different for each operating system: this helps to ensure that the panel's style is con...
...this may take one of the following values: "start": load content scripts im
mediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this ...
...And 2 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
to overcome this limitation, nsiwindow
mediator makes it possible to access all of firefox's windows.
... get active window one thing that nsiwindow
mediator is often used for is to get the active window.
... passing the name of the window type as the parameter of the nsiwindow
mediator.getmostrecentwindow() method returns the most recently active window from among the root element's windows with that type set for the windowtype attribute value.
...And 2 more matches
XUL accessibility guidelines - Archive of obsolete content
media audio informative audio files such as podcasts can be made accessible by supplying a word-for-word transcript.
...most
media delivery formats provide a means for displaying captions.
...provide a mechanism for turning
media and movement on and off.
...And 2 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
@
media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
... miscellaneous issues html 5
media controls html 5
media controls are not styled the html5 video control bar is not styled.
... html 5
media control bar is missing full screen button the fullscreen icon is missing from the html5 video control bar.
...And 2 more matches
Visual typescript game engine - Game development
*/ private networkdeeplogs: boolean = false; /** * masterserverkey is channel access id used to connect * multi
media server channel.
... */ private masterserverkey: string = "multi-platformer-sever1.maximum"; /** * rtcserverport port used to connect multi
media server.
... */ private connectorport: number = 1234; /** * broadcasterport port used to connect multi
media server multirtc3.
...And 2 more matches
HTML: A good basis for accessibility - Learn web development
later articles on wai-aria and multi
media will look at other aspects of ui accessibility.
...for example, you sometimes see buttons marked up using <div>s, for example: <div data-message="this is from the first button">click me!</div> <div data-message="this is from the second button">click me too!</div> <div data-message="this is from the third button">and me!</div> but using such code is not advised — you im
mediately lose the native keyboard accessibility you would have had if you'd just used <button> elements, plus you don't get any of the default css styling that buttons get.
... text alternatives whereas textual content is inherently accessible, the same cannot necessarily be said for multi
media content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
...And 2 more matches
HTML: A good basis for accessibility - Learn web development
later articles on wai-aria and multi
media will look at other aspects of ui accessibility.
...for example, you sometimes see buttons marked up using <div>s, for example: <div data-message="this is from the first button">click me!</div> <div data-message="this is from the second button">click me too!</div> <div data-message="this is from the third button">and me!</div> but using such code is not advised — you im
mediately lose the native keyboard accessibility you would have had if you'd just used <button> elements, plus you don't get any of the default css styling that buttons get.
... text alternatives whereas textual content is inherently accessible, the same cannot necessarily be said for multi
media content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people.
...And 2 more matches
Introducing asynchronous JavaScript - Learn web development
when you fetch an image from a server, you can't return the result im
mediately.
... when we pass a callback function as an argument to another function, we are only passing the function's reference as an argument, i.e, the callback function is not executed im
mediately.
...however, it doesn't wait for anything — it runs im
mediately.
...And 2 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
(see the note below on why it runs "as soon as possible" and not "im
mediately".) more on why you might want to do this later.
... as a consequence, code like settimeout(fn, 0) will execute as soon as the stack is empty, not im
mediately.
... if you execute code like settimeout(fn, 0) but then im
mediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds.
...And 2 more matches
Introduction to web APIs - Learn web development
audio and video apis like html
mediaelement, the web audio api, and webrtc allow you to do really interesting things with multi
media such as creating custom ui controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or adding effects to au...
...
mediaelementaudiosourcenode, which represents an <audio> element containing sound you want to play and manipulate inside the audio context.
... we start by creating an audiocontext instance inside which to manipulate our track: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); next, we create constants that store references to our <audio>, <button>, and <input> elements, and use the audiocontext.create
mediaelementsource() method to create a
mediaelementaudiosourcenode representing the source of our audio — the <audio> element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.create
mediaelementsource(audioelement); next up we include a co...
...And 2 more matches
Handling common HTML and CSS problems - Learn web development
note: the same is true for other css features like
media queries, @font-face and @supports blocks — if they are not supported, the browser just ignores them.
...a desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using
media queries, and make sure it is applied correctly using viewport.
...there are a number of techniques that allow you to work around such problems, from simple mobile first
media queries, to more complex responsive image techniques.
...And 2 more matches
DeferredTask.jsm
void start(); flush obsolete since gecko 28 perform any postponed task im
mediately.
... if the task is running and the timer is armed, then one last execution from start to finish will happen again, im
mediately after the current execution terminates; then the returned promise will be resolved.
... if the task is not running and the timer is armed, then the task is started im
mediately, and the returned promise resolves when the new execution terminates.
...And 2 more matches
sslfnc.html
if the callback returns secfailure, the ssl connection is terminated im
mediately unless the application has supplied a bad-certificate callback function by having previously called ssl_badcerthook.
...the ssl connection will be terminated im
mediately.
...since it is called im
mediately after the certificate authentication callback returns, the bad-certificate callback function can obtain the error code set by the certificate authentication callback by calling pr_geterror im
mediately, as the first operation it performs.
...And 2 more matches
URLs - Plugins
note that npn_geturl is typically asynchronous: it returns im
mediately and only later handles the request, such as displaying the url or creating the stream for the instance and writing the data.
...it returns im
mediately and only later handles the request and calls npp_urlnotify.
... _parent: load the url into the im
mediate frameset parent of the plug-in instance document.
...And 2 more matches
AudioTrackList.onremovetrack - Web APIs
the audiotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that an audio track has been removed from the
media element, and therefore also from the audiotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the
media element's audiotracklist.
... syntax audiotracklist.onremovetrack = eventhandler; value set onremovetrack to a function that accepts as input a trackevent object which indicates in its track property which audio track has been removed from the
media element.
...And 2 more matches
HTMLSourceElement - Web APIs
htmlsourceelement.
media is a domstring reflecting the
media html attribute, containing the intended type of the
media resource.
... htmlsourceelement.sizes is a domstring representing image sizes between breakpoints htmlsourceelement.src is a domstring reflecting the src html attribute, containing the url for the
media resource.
... the htmlsourceelement.src property has a meaning only when the associated <source> element is nested in a
media element that is a <video> or an <audio> element.
...And 2 more matches
HTMLTableElement - Web APIs
if a correct object is given, it is inserted in the tree im
mediately before the first element that is neither a <caption>, nor a <colgroup>, or as the last child if there is no such element, and the first <thead> that is a child of this element is removed from the tree, if any.
...if a correct object is given, it is inserted in the tree im
mediately before the first element that is neither a <caption>, a <colgroup>, nor a <thead>, or as the last child if there is no such element, and the first <tfoot> that is a child of this element is removed from the tree, if any.
...if none is found, a new one is created and inserted in the tree im
mediately before the first element that is neither a <caption>, nor a <colgroup>, or as the last child if there is no such element.
...And 2 more matches
KeyboardEvent: code values - Web APIs
fied" "" 0x007d "intlyen" "intlyen" 0x007e "numpadcomma" "" 0x007f "unidentified" "" 0xe000 ~ 0xe007 "unidentified" "" 0xe008 "unidentified" "undo" 0xe009 "unidentified" "" 0xe00a "" "paste" 0xe00b ~ 0xe00f "" "" 0xe010 "
mediatrackprevious" "
mediatrackprevious" 0xe011 ~ 0xe016 "" "" 0xe017 "unidentified" "cut" 0xe018 "unidentified" "copy" 0xe019 "
mediatracknext" "
mediatracknext" 0xe01a, 0xe01b "unidentified" "" 0xe01c "numpadenter" "numpadenter" 0xe01d "controlright" "controlright" ...
... 0xe01e "unidentified" "launchmail" 0xe01f "unidentified" "" 0xe020 "audiovolumemute" "audiovolumemute" 0xe021 "launchapp2" "" 0xe022 "
mediaplaypause" "
mediaplaypause" 0xe023 "unidentified" "" 0xe024 "
mediastop" "
mediastop" 0xe025 ~ 0xe02b "unidentified" "" 0xe02c "unidentified" "eject" 0xe02d "unidentified" "" 0xe02e "audiovolumedown" "volumedown" (was "volumedown" until chrome 50) 0xe02f "unidentified" "" 0xe030 "audiovolumeup" "volumeup" (was "volumeup" until chrome 50) 0xe031 "unidentified" "" ...
...earch" "browsersearch" 0xe066 "browserfavorites" "browserfavorites" 0xe067 "browserrefresh" "browserrefresh" 0xe068 "browserstop" "browserstop" 0xe069 "browserforward" "browserforward" 0xe06a "browserback" "browserback" 0xe06b "launchapp1" "" 0xe06c "launchmail" "" 0xe06d "launch
mediaplayer" ("
mediaselect" prior to firefox 49) "" 0xe06e ~ 0xe0f0 "unidentified" "" 0xe0f1 (hanja key with korean keyboard layout) "lang2" "" 0xe0f2 (han/yeong key with korean keyboard layout) "lang1" "" code values on mac on mac os x, it's hard to get scancode or something which can distinguish a physical key from a key event.
...And 2 more matches
active - Web APIs
the active read-only property of the
mediastream interface returns a boolean value which is true if the stream is currently active; otherwise, it returns false.
... a stream is considered active if at least one of its
mediastreamtracks is not in the
mediastreamtrack.ended state.
... syntax var isactive =
mediastream.active; value a boolean value which is true if the stream is currently active; otherwise, the value is false.
...And 2 more matches
RTCPeerConnection.onaddstream - Web APIs
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 im
mediately after the call setremotedescription() and doesn't wait for the result of the sdp negotiation.
...And 2 more matches
RTCPeerConnection.setRemoteDescription() - Web APIs
the description specifies the properties of the remote end of the connection, including the
media format.
... because descriptions will be exchanged until the two peers agree on a configuration, the description submitted by calling setremotedescription() does not im
mediately take effect.
... note: the process of changing descriptions actually involves inter
mediary steps handled by the webrtc layer to ensure that an active connection can be changed without losing the connection if the change does not succeed.
...And 2 more matches
RTCRtpCapabilities - Web APIs
those components are: red (redundant audio data) the
media type of an red entry may vary due to there being several versions of it, but it will end with red, such as video/red or video/fwdred.
...there may be multiple entries for red if different forms are supported; each will have a unique
media type in that case.
... fec (forward error correction) an fec component handles error correction data; its
media type may also vary due to there being advanced versions of the standard available, but it will always end with fec.
...And 2 more matches
RTCRtpSender.replaceTrack() - Web APIs
the rtcrtpsender method replacetrack() replaces the track currently being used as the sender's source with a new
mediastreamtrack.
... the new track must be of the same
media kind (audio, video, etc) and switching the track should not require negotiation.
... syntax trackreplacedpromise = sender.replacetrack(newtrack); parameters newtrack optional a
mediastreamtrack specifying the track with which to replace the rtcrtpsender's current source track.
...And 2 more matches
RTCRtpStreamStats.kind - Web APIs
the kind property of the rtcrtpstreamstats dictionary is a string indicating whether the described rtp stream contains audio or video
media.
... this property was previously called
mediatype.
... syntax
mediakind = rtcrtpstreamstats.kind; value a domstring whose value is "audio" if the track whose statistics are given by the rtcrtpstreamstats object contains audio, or "video" if the track contains video
media.
...And 2 more matches
SourceBuffer.appendWindowStart - Web APIs
the appendwindowstart property of the sourcebuffer interface controls the timestamp for the start of the append window, a timestamp range that can be used to filter what
media data is appended to the sourcebuffer.
... coded
media frames with timestamps wthin this range will be appended, whereas those outside the range will be filtered out.
... the default value of appendwindowstart is the presentation start time, which is the beginning time of the playable
media.
...And 2 more matches
SourceBuffer.changeType() - Web APIs
the changetype() method of the sourcebuffer interface sets the mime type that future calls to appendbuffer() should expect the new
media data to conform to.
... one scenario in which this is helpful is to support adapting the
media source to changing bandwidth availability, by transitioning from one codec to another as resource constraints change.
... invalidstateerror the sourcebuffer is not a member of the parent
media source's sourcebuffers list, or the buffer's updating property indicates that a previously queued appendbuffer() or remove() is still being processed.
...And 2 more matches
TextTrackList.onremovetrack - Web APIs
the texttracklist onremovetrack event handler is called when the removetrack event occurs, indicating that a text track has been removed from the
media element, and therefore also from the texttracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the
media element's texttracklist.
... syntax texttracklist.onremovetrack = eventhandler; value set onremovetrack to a function that accepts as input a trackevent object which indicates in its track property which text track has been removed from the
media element.
...And 2 more matches
VideoTrack - Web APIs
id read only a domstring which uniquely identifies the track within the
media.
...the id can also be used as the fragment part of the url if the
media supports seeking by
media fragment per the
media fragments uri specification.
...returns null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the
mediasource.sourcebuffers attribute of its parent
media source.
...And 2 more matches
VideoTrackList.onremovetrack - Web APIs
the videotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that a video track has been removed from the
media element, and therefore also from the videotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the
media element's videotracklist.
... syntax videotracklist.onremovetrack = eventhandler; value set onremovetrack to a function that accepts as input a trackevent object which indicates in its track property which video track has been removed from the
media element.
...And 2 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
these correspond to the following three types of transport supported by rtcpeerconnection: rtcrtpsender rtcrtpsenders handle the encoding and transmission of
mediastreamtrack data to a remote peer.
... rtcrtpreceiver rtcrtpreceivers provide the ability to inspect and obtain information about incoming
mediastreamtrack data.
... rtcrtptransceiver an rtcrtptransceiver is a pair of one rtp sender and one rtp receiver which share an sdp mid attribute, which means they share the same sdp
media m-line (representing a bidirectional srtp stream).
...And 2 more matches
Using the Web Audio API - Web APIs
the web audio api does not replace the <audio>
media element, but rather complements it, just like <canvas> coexists alongside the <img> element.
...if you simply want to control playback of an audio track, the <audio>
media element provides a better, quicker solution than the web audio api.
...lucky for us there's a method that allows us to do just that — audiocontext.create
mediaelementsource: // get the audio element const audioelement = document.queryselector('audio'); // pass it into the audio context const track = audiocontext.create
mediaelementsource(audioelement); note: the <audio> element above is represented in the dom by an object of type html
mediaelement, which comes with its own set of functionality.
...And 2 more matches
-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-transform-3d boolean css
media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported.
... note: this
media feature is only supported by webkit and blink.
... syntax -webkit-transform-3d is a boolean css
media feature whose value is true if the browser supports -webkit prefixed css 3d transforms.
...And 2 more matches
aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css
media feature can be used to test the aspect ratio of the viewport.
...</div> css /* minimum aspect ratio */ @
media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @
media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @
media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html...
... <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @
media (min-aspect-ratio: 8/5) { div { background: %239af; } } @
media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @
media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=funct...
...And 2 more matches
aural - CSS: Cascading Style Sheets
the aural css
media type is used for devices that have speech output capabilities.
... note: this
media type has been deprecated in favor of speech.
... syntax the aural css
media type—which has been deprecated in favor of the speech
media type—was used to specify a block of css that applied only when the content is being presented using a speech synthesis device.
...And 2 more matches
Handling Overflow in Multicol - CSS: Cascading Style Sheets
more columns than will fit how overflowing columns are handled depends on whether you are in a fragmented
media context, such as print, or a continuous
media context, such as a web page.
... in fragmented
media, once a fragment (for example a page) is filled with columns, the columns will move to a new page and fill that up with columns.
... in continuous
media, columns will overflow in the inline direction.
...And 2 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
in the example below, i have a simple
media object.
... the float no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .
media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .
media::after { content: ""; display: block; clear: both; } .
media .image { float: left; width: 150px; margin-right: 20px; } .
media .text { pad...
...ding: 10px; align-self: end; } <div class="
media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="text">this is a
media object example.
...And 2 more matches
Visual formatting model - CSS: Cascading Style Sheets
in css the visual formatting model describes how user agents take the document tree, and process and display it for visual
media.
... this includes continuous
media such as a computer screen and paged
media such as a book or document printed by browser print functions.
... most of the information applies equally to continuous and paged
media.
...And 2 more matches
HTML5 - Developer guides
multi
media: making video and audio first-class citizens in the open web.
... using html5 audio and video the <audio> and <video> elements embed and allow the manipulation of new multi
media content.
... new semantic elements beside sections,
media and forms elements, there are numerous new elements, like <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid html5 elements.
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
buffered <audio>, <video> contains the time range of already buffered
media.
... capture <input> from the html
media capturethe definition of '
media capture' in that specification.spec, specifies a new file can be captured.
... loading <img>, <iframe> indicates if the element should be loaded lazily (loading="lazy") or loaded im
mediately (loading="eager").
...And 2 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file
media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction...
... capture introduced in the html
media capture specification and valid for the file input type only, the capture attribute defines which
media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios.
... checkvalidity() im
mediately runs the validity check on the element, triggering the document to fire the invalid event at the element if the value isn't valid.
...And 2 more matches
<style>: The Style Information element - HTML: Hypertext Markup Language
in the same manner as <link> elements, <style> elements can include
media attributes that contain
media queries, allowing you to selectively apply internal stylesheets to your document depending on
media features such as viewport width.
...
media this attribute defines which
media the style should be applied to.
... its value is a
media query, which defaults to all if the attribute is missing.
...And 2 more matches
Navigation and resource timings - Web Performance
client-side web applications may seem faster than this one with transfer sizes under 10000 and decoded body sizes under 30000, but that doesn't mean javascript, css, or
media assets aren't adding bloat.
...the request start is the moment im
mediately before the user agent starts requesting the resource from the server, or from relevant application caches or from local resources.
... the response start is the time im
mediately after the user agent's http parser receives the first byte of the response from relevant application caches, or from local resources or from the server, which happens after the request is received and processed.
...And 2 more matches
Tutorials
inter
mediate level multi
media and embedding this module explores how to use html to include multi
media in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... inter
mediate level css layout at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... inter
mediate level introducing javascript objects in javascript, most things are objects, from core javascript features like strings and arrays to the browser apis built on top of javascript.
...And 2 more matches
JavaScript timers - Archive of obsolete content
but there are some javascript native functions (timers) which allow us to delay the execution of arbitrary instructions: settimeout() setinterval() setim
mediate() requestanimationframe() the settimeout() function is commonly used if you wish to have your function called once after the specified delay.
...the setim
mediate() function can be used instead of the settimeout(fn, 0) method to execute heavy operations in ie.
... setim
mediate() calls a function im
mediately after the browser has completed other operations, such as events and display updates.
... clearim
mediate() cancels the im
mediate actions, just like cleartimeout() for settimeout().
Signing an XPI - Archive of obsolete content
this means that firefox will refuse to install code signed via an inter
mediate certificate authority such as certum level i unless the user installs that inter
mediate ca certificate into firefox first.
... installing the inter
mediate ca certificate causes firefox to mark the inter
mediate code signing ca certificate as a valid object signing ca certificate, which makes it all work.
... bug 321156 has been filed to request a way to obviate the installation of inter
mediate code signing ca certs into firefox.
... download the root ca and any inter
mediate certificates used to sign your certificate from the issuer; their web site will have a link somewhere to their root cas and public certificates.
Notes on HTML Reflow - Archive of obsolete content
some reflows are im
mediate in response to user or script actions; for example, resizing the window or changing the document's default font.
... initial, incremental, resize, and style change reflows may each be performed as an im
mediate "global" reflow from the presentation shell: an initial reflow is performed when the presentation shell is initialized to flow the shell's initial frame hierarchy.
...the presentation shell does not process the command im
mediately.
...these differences are
mediated by two adapter classes: nsboxframe and nsboxtoblockadaptor.
Treehydra Manual - Archive of obsolete content
instead of representing code in "easy" form like dehydra, treehydra relies on gimple, the gcc internals "middle-end" inter
mediate representation.
...callbacks and gcc inter
mediate representations like dehydra, treehydra sends program representations to the user javascript via callbacks.
...to make things easier, we will first present recipes for accessing specific gcc inter
mediate representations.
...in this case, gimple asts will not be available, as gcc does not save earlier inter
mediate representations--they are modified in place.
nsIContentPolicy - Archive of obsolete content
type_
media 15 indicates a video or audio load.
... important: this type is mapped to type_
media before being passed to content policy implementations, and should not be used outside gecko core code.
... important: this type is mapped to type_
media before being passed to content policy implementations, and should not be used outside gecko core code.
... important: this type is mapped to type_
media before being passed to content policy implementations, and should not be used outside gecko core code.
Archive of obsolete content
mmgc mmgc is the tamarin (née macro
media) garbage collector, a memory management library that has been built as part of the avm2/tamarin effort.
... web standards the web standards project windows
media in netscape netscape 7.1 has the ability to load the microsoft® windows
media player™ as an activex control, and thus developers can now build multi
media 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.
Plug-in Development Overview - Gecko Plugin API Reference
plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special
media for which the plug-in is created.
...the browser looks up the
media type, and if it finds a plug-in registered to that type, loads the plug-in software.
...for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two:
media types" rfc-4288: "
media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...consider the following example, where a
media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin = document.getelementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else alert("plugin not installed corr...
IIFE - MDN Web Docs Glossary: Definitions of Web-related terms
an iife (im
mediately invoked function expression) is a javascript function that runs as soon as it is defined.
... the second part creates the im
mediately invoked function expression () through which the javascript engine will directly interpret the function.
... examples the function becomes a function expression which is im
mediately executed.
... var result = (function () { var name = "barry"; return name; })(); // im
mediately creates the output: result; // "barry" ...
Organizing your CSS - Learn web development
the standard example of oocss is the pattern described as the
media object.
... .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1px solid grey; } .comment .content { font-size: .8rem; } .list-item { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid grey; } .list-item .content { font-size: .8rem; } in oocss, you would create one pattern called
media that would have all of the common css for both patterns — a base class for things that are generally the shape of the
media object.
... .
media { display: grid; grid-template-columns: 1fr 3fr; } .
media .content { font-size: .8rem; } .comment img { border: 1px solid grey; } .list-item { border-bottom: 1px solid grey; } in your html the comment would need both the
media and comment classes applied: <div class="
media comment"> <img /> <div class="content"></div> </div> the list-item would have
media and list-item applied: <ul> <li class="
media list-item"> <img /> <div class="content"></div> </li> </ul> the work that nicole sullivan did in describing this approach and promoting it means that even people who are not strictly following an oocss approach today will generally be reusi...
... previous overview: building blocks 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Pseudo-classes and pseudo-elements - Learn web development
:first in paged
media, matches the first page.
... :left in paged
media, matches left-hand pages.
... :right in paged
media, matches right-hand pages.
... 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Mozilla splash page - Learn web development
previous overview: multi
media and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... prerequisites: before attempting this assessment you should have already worked through the rest of the multi
media and embedding module.
...you need to add some
media to make the page look nice and make more sense.
... previous overview: multi
media and embedding in this module images in html video and audio content from <object> to <iframe> — other embedding technologies adding vector graphics to the web responsive images mozilla splash page ...
Third-party APIs - Learn web development
they are found on third-party servers browser apis are built into the browser — you can access them from javascript im
mediately.
...const audiosource = audioctx.create
mediaelementsource(audioelement); // etc.
... link.href = current.web_url; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + ' '; para2.appendchild(span); } if(current.multi
media.length > 0) { img.src = 'http://www.nytimes.com/' + current.multi
media[0].url; img.alt = current.headline.main; } clearfix.setattribute('class','clearfix'); article.appendchild(heading); heading.appendchild(link); article.appendchild(img); article.appendchild(para1); article.appendchild(para2); article.appendchild(clearfix); ...
... we used an if() block (if(current.multi
media.length > 0) { ...
What is JavaScript? - Learn web development
javascript is a scripting language that enables you to create dynamically updating content, control multi
media, animate images, and pretty much everything else.
... audio and video apis like html
mediaelement and webrtc allow you to do really interesting things with multi
media, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple snapshot demo to get the idea).
...in interpreted languages, the code is run from top to bottom and the result of running the code is im
mediately returned.
... if your scripts should be run im
mediately and they don't have any dependencies, then use async.
Web performance - Learn web development
multi
media: images the lowest hanging fruit of web performance is often
media optimization.
... serving different
media files based on each user agent's capability, size, and pixel density is possible.
... multi
media: video the lowest hanging fruit of web performance is often
media optimization.
...by minimizing the number of dom nodes, making sure the best order and attributes are used for including content such as styles, scripts,
media, and third-party scripts, you can drastically improve the user experience.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
when you update a component's state in svelte, it doesn't update the dom im
mediately.
...inside the onedit() function we set editing = true and im
mediately afterwards try to access the nameel variable and execute nameel.focus().
...the tick() function returns a promise that resolves as soon as any pending state changes have been applied to the dom (or im
mediately, if there are no pending state changes).
... in our im
mediate use case, we will define a function called selectonfocus() that will receive a node as parameter.
Styling Vue components with CSS - Learn web development
font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @
media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
...r: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @
media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: ...
...1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @
media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @
media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo list is now in a car...
...#228bec; } .custom-checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .custom-checkbox > input[type="checkbox"]:checked + label::after { opacity: 1; } @
media only screen and (min-width: 40rem) { label, input, .custom-checkbox { font-size: 19px; font-size: 1.9rem; line-height: 1.31579; } } now we need to add some css classes to our template to connect the styles.
Log.jsm
expect these to be im
mediately visible on a status console.
...expect these to be im
mediately visible on a status console.
...expect these to be im
mediately visible on a status console.
...expect these to be im
mediately visible on a console, so be conservative and keep to a minimum.
Index
2 an overview of nss internals api, inter
mediate, intro, nss, tools a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss).
...often freeing is combined with im
mediately erasing (zeroing, zfree) the memory associated to the arena, in order to make it more difficult for attackers to extract keys from a memory dump.
... 10 encrypt and decrypt mac using token example, inter
mediate, mozilla, nss generates encryption/mac keys and uses token for storing.
...the -o prints the full chain of a certificate, going from the initial ca (the root ca) through ever inter
mediary ca to the actual certificate.
NSS 3.16.4 release notes
in nss 3.16.4, a 2048-bit inter
mediate ca certificate has been included, without explicit trust.
... the intention is to mitigate the effects of the previous removal of the 1024-bit entrust.net root certificate, because many public internet sites still use the "usertrust legacy secure server ca" inter
mediate certificate that is signed by the 1024-bit entrust.net root certificate.
... the inclusion of the inter
mediate certificate is a temporary measure to allow those sites to function, by allowing them to find a trust path to another 2048-bit root ca certificate.
... the temporarily included inter
mediate certificate expires november 1, 2015.
Tracing JIT
nanojit/lir.* the nanojit/lir.cpp and nanojit/lir.h files define the inter
mediate representation lir, which is used as input to nanojit.
...it is correspondingly very simple: register allocation is done im
mediately, step-by-step as code is being generated.
...the associated fragment is placed in the monitor's fragment table and the monitor returns to monitoring mode, with a high likelihood of im
mediately transitioning to executing mode on the next bytecode interpreted.
...if that pc has itself grown hot, the monitor will im
mediately transition to recording mode starting with the exiting pc.
nsIDOMWindowUtils
audiomuted boolean with this it's possible to mute all the
mediaelements in this window.
... sheets added via this api take effect im
mediately on the document.
... redraw() force an im
mediate redraw of this window.
...the removal takes effect im
mediately.
nsIZipWriter
if false, the operation is performed im
mediately.
...if false, the operation is performed im
mediately.
...if false, the operation is performed im
mediately.
...if false, the operation is performed im
mediately.
WebIDL bindings
such attributes will have their getter called im
mediately when the js wrapper for the dom object is created, and the returned value will be stored directly on the js object.
...this will im
mediately call the c++ getter and cache the value it returns, so it needs a jscontext to work on.
...unlike [storeinslot] attributes, doing so will not im
mediately invoke the getter, so it does not need a jscontext.
...they will get cross-compartment wrappers that make touching them from chrome code not be an im
mediate security bug, but otherwise they can have quite surprising behavior if the page is trying to be malicious.
Plug-in Development Overview - Plugins
plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the browser and the special
media for which the plug-in is created.
...the browser looks up the
media type, and if it finds a plug-in registered to that type, loads the plug-in software.
...for more information about mime types, see these mime rfcs: rfc-2045: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two:
media types" rfc-4288: "
media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...consider the following example, where a
media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin = document.getelementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else alert("plugin not installed corr...
Examine and edit HTML - Firefox Developer Tools
(paste) before paste the clipboard contents into the document im
mediately before this node.
... (paste) after paste the clipboard contents into the document im
mediately after this node.
... duplicate node create a copy of this element, and insert the copy im
mediately after this element.
... editing html you can edit the html — tags, attributes, and content — directly in the html pane: double-click the text you want to edit, change it, and press enter to see the changes reflected im
mediately.
AudioConfiguration - Web APIs
the audioconfiguration dictionary of the
media capabilities api defines the audio file being tested when calling
mediacapabilities.encodinginfo() or
mediacapabilities.decodinginfo() to query whether a specific audio configuration is supported, smooth, and/or power efficient.
... examples //create
media configuration to be tested const
mediaconfig = { type : 'file', // 'record', 'transmission', or '
media-source' audio : { contenttype : "audio/ogg", // valid content type channels : 2, // audio channels used by the track bitrate : 132700, // number of bits used to encode 1s of audio samplerate : 5200 // number of audio samples making up that 1s.
... } }; // check support and performance navigator.
mediacapabilities.decodinginfo(
mediaconfig).then(result => { console.log('this configuration is ' + (result.supported ?
...'' : 'not ') + 'power efficient.' }); specifications specification status comment
media capabilitiesthe definition of 'audioconfiguration' in that specification.
AudioContext - Web APIs
audiocontext.create
mediaelementsource() creates a
mediaelementaudiosourcenode associated with an html
mediaelement.
... audiocontext.create
mediastreamsource() creates a
mediastreamaudiosourcenode associated with a
mediastream representing an audio stream which may come from the local computer microphone or other sources.
... audiocontext.create
mediastreamdestination() creates a
mediastreamaudiodestinationnode associated with a
mediastream representing an audio stream which may be stored in a local file or sent to another computer.
... audiocontext.create
mediastreamtracksource() creates a
mediastreamtrackaudiosourcenode associated with a
mediastream representing an
media stream track.
AudioTrack.enabled - Web APIs
syntax isaudioenabled = audiotrack.enabled; audiotrack.enabled = true | false; value the enabled property is a boolean whose value is true if the track is enabled; enabled tracks produce audio while the
media is playing.
... setting enabled to false effectively mutes the audio track, preventing it from contributing to the
media's audio performance.
... example this example switches between the main and commentary audio tracks of a
media element.
... the element's audio tracks are then scanned through using the javascript foreach() method (although the audiotracks property of a
media element isn't actually a javascript array, it can be accessed like one for the most part).
AudioTrackList.onaddtrack - Web APIs
the audiotracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new audio track has been added to the
media element whose audio tracks the audiotracklist represents.
... syntax audiotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object which indicates in its track property which audio track has been added to the
media.
... usage notes the addtrack event is called whenever a new track is added to the
media element whose audio tracks are represented by the audiotracklist object.
... this happens when tracks are added to the element when the
media is first attached to the element; one addtrack event will occur for each audio track in the
media resource.
Managing screen orientation - Web APIs
the first is the orientation
media query.
...by using a
media query, you can do this easily and automatically.
...nullam quis malesuada est.</p> css relies on the orientation
media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospace; margin : 0; padding: .5em...
...; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @
media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* for landscape, we want the tool bar stick on the left */ @
media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } } and here's the result portrait landscape note: the orientation
media query actually applies based o...
HTMLCanvasElement.captureStream() - Web APIs
the htmlcanvaselement capturestream() method returns a
mediastream which includes a canvascapture
mediastreamtrack containing a real-time video capture of the canvas's contents.
... syntax
mediastream = canvas.capturestream(framerate); parameters framerate optional a double-precision floating-point value that indicates the rate of capture of each frame.
... return value a reference to a
mediastream object, which has a single canvascapture
mediastreamtrack in it.
...send it to another computer using an rtcpeerconnection // pc is an rtcpeerconnection created elsewhere pc.addstream(stream); specifications specification status comment
media capture from dom elementsthe definition of 'htmlcanvaselement.capturestream()' in that specification.
load() - Web APIs
the
mediakeysession.load() method returns a promise that resolves to a boolean value after loading data for a specified session object.
... syntax
mediakeysession.load(sessionid).then(function(booleanvalue) { ...
... }); parameter sessionid a unique string generated by the content decription module for the current
media object and its associated keys or licenses.
... specifications specification status comment encrypted
media extensionsthe definition of 'load()' in that specification.
msPlayToPreferredSourceUri - Web APIs
msplaytopreferredsourceuri is a read/write property which gets or sets the path to the preferred
media source.
... this enables the playto target device to stream the
media content, which can be drm protected, from a different location, such as a cloud
media server.
... syntax ptr = object.msplaytopreferredsourceuri; value msplaytopreferredsourceuri enables a playto reference (a uri or url) for streaming content on the playto target device from a different location, such as a cloud
media server.
...this uri can point to a cloud based
media server allowing streaming directly from the cloud, which can be drm protected, instead of streaming content from the windows machine which must be unprotected content.
RTCConfiguration - Web APIs
constants rtcbundlepolicy enum the rtcbundlepolicy enum defines string constants which are used to request a specific policy for gathering ice candidates if the remote peer isn't "bundle-aware" (compatible with the sdp bundle standard for bundling multiple
media streams on a single transport link).
... if the remote endpoint is bundle-aware, all
media tracks and data channels are bundled onto a single transport at the completion of negotiation, regardless of policy used, and any superfluous transports that were created initially are closed at that point.
... note: in technical terms, a bundle lets all
media flow between two peers flow across a single 5-tuple; that is, from a single ip and port on one peer to a single ip and port on the other peer, using the same transport protocol.
... "max-compat" the ice agent initially creates one rtcdtlstransport per
media track and a separate one for data channels.
RTCIceCandidate.type - Web APIs
srflx the candidate is a server reflexive candidate; the ip indicates an inter
mediary address assigned by the stun server to represent the candidate's peer anonymously.
... prflx the candidate is a peer reflexive candidate; the ip is an inter
mediary address assigned by the stun server to represent the candidate's peer anonymously.
...the relay candidate's ip address is an address the turn server uses to forward the
media between the two peers.
... example in this example, the candidate's type is used to present a modified user interface for host candidates (those where the ip refers directly to the remote peer, rather than an inter
mediary).
RTCPeerConnection.onremovestream - Web APIs
the removestream event has been removed from the webrtc specification in favor of the existing removetrack event on the remote
mediastream and the corresponding
mediastream.onremovetrack event handler property of the remote
mediastream.
... the rtcpeerconnection.onremovestream event handler is a property containing the code to execute when the removestream event, of type
mediastreamevent, is received by this rtcpeerconnection.
... such an event is sent when a
mediastream is removed from this connection.
...an event handler always has one single parameter, containing the event, here of type
mediastreamevent.
RTCRtpReceiver - Web APIs
the rtcrtpreceiver interface of the webrtc api manages the reception and decoding of data for a
mediastreamtrack on an rtcpeerconnection.
... properties rtcrtpreceiver.track read only returns the
mediastreamtrack associated with the current rtcrtpreceiver instance.
... rtcrtpreceiver.transport read only returns the rtcdtlstransport instance over which the
media for the receiver's track is received.
... static methods rtcrtpreceiver.getcapabilities() returns the most optimistic view of the capabilities of the system for receiving
media of the given kind.
RTCRtpSender.setParameters() - Web APIs
the setparameters() method of the rtcrtpsender interface applies changes the configuration of sender's track, which is the
mediastreamtrack for which the rtcrtpsender is responsible.
... in other words, setparameters() updates the configuration of the rtp transmission as well as the encoding configuration for a specific
media track on the webrtc connection.
... encodings an array of rtcrtpencodingparameters objects, each specifying the parameters for a single codec that could be used to encode the track's
media.
... in addition, if a webrtc error occurs while configuring or accessing the
media, an rtcerror is thrown with its errordetail set to hardware-encoder-error.
SourceBuffer.appendBufferAsync() - Web APIs
the appendbufferasync() method of the sourcebuffer interface begins the process of asynchronously appending
media segment data from an arraybuffer or arraybufferview object to the sourcebuffer.
... syntax appendpromise = sourcebuffer.appendbufferasync(source); parameters source a buffersource (that is, either an arraybufferview or arraybuffer) which contains the
media segment data you want to add to the sourcebuffer.
... example this simplified example async function, fillsourcebuffer(), takes as input parameters buffersource, buffer, and a sourcebuffer to which to append the source
media from the buffer.
... specification status comment
media source extensions recommendation initial definition; does not include this method.
SourceBuffer.appendWindowEnd - Web APIs
the appendwindowend property of the sourcebuffer interface controls the timestamp for the end of the append window, a timestamp range that can be used to filter what
media data is appended to the sourcebuffer.
... coded
media frames with timestamps wthin this range will be appended, whereas those outside the range will be filtered out.
...its sourcebuffer.updating property is currently true), or this sourcebuffer has been removed from the
mediasource.
... example tbd specifications specification status comment
media source extensionsthe definition of 'appendwindowend' in that specification.
SourceBuffer.remove() - Web APIs
the remove() method of the sourcebuffer interface removes
media segments within a specific time range from the sourcebuffer.
... exceptions exception explanation invalidaccesserror the
mediasource.duration property is equal to nan, the start parameter is negative or greater than
mediasource.duration, or the end parameter is less than or equal to start or equal to nan.
... invalidstateerror the sourcebuffer.updating property is equal to true, or this sourcebuffer has been removed from the
mediasource.
... specifications specification status comment
media source extensionsthe definition of 'remove()' in that specification.
SourceBuffer.timestampOffset - Web APIs
the timestampoffset property of the sourcebuffer interface controls the offset applied to timestamps inside
media segments that are appended to the sourcebuffer.
... exception explanation invalidstateerror one or more of the sourcebuffer objects in
mediasource.sourcebuffers are being updated (i.e.
... their sourcebuffer.updating property is currently true), a
media segment inside the sourcebuffer is currently being parsed, or this sourcebuffer has been removed from the
mediasource.
... example tbd specifications specification status comment
media source extensionsthe definition of 'timestampoffset' in that specification.
TextTrackList.length - Web APIs
the read-only texttracklist property length returns the number of entries in the texttracklist, each of which is a texttrack representing one track in the
media element.
... a value of 0 indicates that there are no text tracks in the
media.
... example this snippet gets the number of text tracks in the first
media element found in the dom by queryselector().
... var
mediaelem = document.queryselector("video, audio"); var numtexttracks = 0; if (
mediaelem.texttracks) { numtexttracks =
mediaelem.texttracks.length; } note that this sample checks to be sure html
mediaelement.texttracks is defined, to avoid failing on browsers without support for texttrack.
TextTrackList.onaddtrack - Web APIs
the texttracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new text track has been added to the
media element whose text tracks the texttracklist represents.
... syntax texttracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object which indicates in its track property which video track has been added to the
media.
... usage notes the addtrack event is called whenever a new track is added to the
media element whose video tracks are represented by the texttracklist object.
... this happens when tracks are added to the element when the
media is first attached to the element; one addtrack event will occur for each video track in the
media resource.
VideoPlaybackQuality.totalVideoFrames - Web APIs
the videoplaybackquality interface's totalvideoframes read-only property returns the total number of video frames that have been displayed or dropped since the
media was loaded.
... syntax value = videoplaybackquality.totalvideoframes; value the total number of frames that the <video> element has displayed or dropped since the
media was loaded into it.
... this value is reset when the
media is reloaded or replaced.
... specifications specification status comment
media playback qualitythe definition of 'videoplaybackquality.totalvideoframes' in that specification.
VideoTrackList.onaddtrack - Web APIs
the videotracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new video track has been added to the
media element whose video tracks the videotracklist represents.
... syntax videotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as input a trackevent object which indicates in its track property which video track has been added to the
media.
... usage notes the addtrack event is called whenever a new track is added to the
media element whose video tracks are represented by the videotracklist object.
... this happens when tracks are added to the element when the
media is first attached to the element; one addtrack event will occur for each video track in the
media resource.
Introduction to WebRTC protocols - Web APIs
sdp session description protocol (sdp) is a standard for describing the multi
media content of the connection such as resolution, formats, codecs, encryption, etc.
...this is, in essence, the metadata describing the content and not the
media content itself.
... technically, then, sdp is not truly a protocol, but a data format used to describe connection that shares
media between devices.
...for example, lines providing
media descriptions have the type "m", so those lines are referred to as "m-lines." for more information to learn more about sdp, see the following useful resources: specification: rfc 4566: sdp: session description protocol iana registry of sdp parameters ...
Lifetime of a WebRTC session - Web APIs
signaling signaling is the process of sending control information between two devices to determine the communication protocols, channels,
media codecs and formats, and method of data transfer, as well as any required routing information.
...
media capability negotiation: what codecs and
media data formats can the peers understand?
...this is a process by which the network connection is renegotiated, exactly the same way the initial ice negotiation is performed, with one exception:
media continues to flow across the original network connection until the new one is up and running.
... then
media shifts to the new network connection and the old one is closed.
Web Accessibility: Understanding Colors and Luminance - Accessibility
luckily, css
media queries level 5 will be a game-changer in accessibility initiatives, because it will allow users to select settings that accomodate their needs best.
... one of the greatest gifts to accessibility now in development is the css
media queries level 5.
... the implication is that web developers who seek to improve legibility of text in which the ambient conditions of a room have changed can take advantage of css
media queries 5 environment
media features, when these features become available.
... wiki
media commons provides a great image for illustrating red saturation.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
the -moz-device-pixel-ratio gecko-only css
media feature can be used to apply styles based on the number of device pixels per css pixel.
... note: this
media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio.
...
media:
media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx.
... example: @
media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx.
-webkit-animation - CSS: Cascading Style Sheets
the -webkit-animation boolean css
media feature is a chrome extension whose value is true if vendor-prefixed css animations are supported.
... note: this
media feature is only supported by webkit.
... syntax the -webkit-animation
media feature is a boolean whose value is true if the vendor-prefixed css animation properties are supported.
... examples @
media (-webkit-animation) { /* css to use if animations are supported */ } specifications not part of any standard.
-webkit-transition - CSS: Cascading Style Sheets
the -webkit-transition boolean css
media feature is a chrome extension whose value is true if the browsing context supports css transitions.
... note: you should not use this
media feature; it was never specified, has never been widely implemented, and has been removed from all browsers.
... syntax @
media (-webkit-transition) { /* css to use if transitions are supported */ } examples use @supports instead do not use the -webkit-transition
media feature.
... instead, test for transition support using the css @supports at-rule, like this: @supports (transition: initial) { /* css to use if transitions are supported */ } obsolete example before this became obsolete, you could use -webkit-transition in your css like this: @
media (-webkit-transition) { /* css to use if transitions are supported */ } specifications not part of any standard.
color-index - CSS: Cascading Style Sheets
the color-index css
media feature can be used to test the number of entries in the output device's color lookup table.
... examples basic example html <p>this is a test.</p> css p { color: black; } @
media (color-index) { p { color: red; } } @
media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 colors.
... <link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet"
media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment
media queries level 4the definition of 'color-index' in that specification.
...
media queriesthe definition of 'color-index' in that specification.
device-aspect-ratio - CSS: Cascading Style Sheets
the device-aspect-ratio css
media feature can be used to test the width-to-height aspect ratio of an output device.
... examples article { padding: 1rem; } @
media screen and (min-device-aspect-ratio: 16/9) { article { padding: 1rem 5vw; } } specifications specification status comment
media queries level 4the definition of 'device-aspect-ratio' in that specification.
... candidate recommendation deprecated in
media queries level 4.
...
media queriesthe definition of 'device-aspect-ratio' in that specification.
device-height - CSS: Cascading Style Sheets
the device-height css
media feature can be used to test the height of an output device's rendering surface.
... <link rel="stylesheet"
media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status comment
media queries level 4the definition of 'device-height' in that specification.
... candidate recommendation deprecated in
media queries level 4.
...
media queriesthe definition of 'device-height' in that specification.
device-width - CSS: Cascading Style Sheets
the device-width css
media feature can be used to test the width of an output device's rendering surface.
... <link rel="stylesheet"
media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status comment
media queries level 4the definition of 'device-width' in that specification.
... candidate recommendation deprecated in
media queries level 4.
...
media queriesthe definition of 'device-width' in that specification.
forced-colors - CSS: Cascading Style Sheets
the forced-colors css
media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.
... syntax the forced-colors
media feature indicates whether or not the browser is currently in forced-colors mode.
... user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this
media query is ever implemented user agents will likely rely on the settings provided by the operating system in use.
... html <div class="colors">weird color box</div> css .colors { background-color: red; color: grey; } @
media (forced-colors: active) { .colors { background-color: white; color: black; } } result specifications specification status comment
media queries level 5the definition of 'forced-colors' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
the prefers-reduced-data css
media feature is used to detect if the user has requested the web content that consumes less internet traffic.
... user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this
media query is ever implemented user agents will likely rely on the settings provided by the operating system.
... in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font"
media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @
media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regula...
...+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; } result specifications specification status comment
media queries level 5the definition of 'reduced-data' in that specification.
prefers-reduced-motion - CSS: Cascading Style Sheets
the prefers-reduced-motion css
media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
...changes to this preference take effect im
mediately.
...*/ @
media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transf...
...orm: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment
media queries level 5the definition of 'prefers-reduced-motion' in that specification.
Using CSS transitions - CSS: Cascading Style Sheets
instead of having property changes take effect im
mediately, you can cause the changes in a property to take place over a period of time.
...ion-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-timing-function specifies a function to define how inter
mediate values for properties are computed.
... timing functions determine how inter
mediate values of the transition are calculated.
... javascript examples care should be taken when using a transition im
mediately after: adding the element to the dom using .appendchild() removing an element's display: none; property.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
while the declarations contained in most at-rules — such as those in @
media, @document, or @supports — participate in the cascade, declarations contained in @keyframes don't.
...that means rules whose selector matches the given element and which are part of an appropriate
media at-rule.
... all lets you opt to im
mediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.
... example let's look at an example involving multiple sources of css across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the html: user-agent css: li { margin-left: 10px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @
media screen { li { margin-left: 3px } } @
media print { li { margin-left: 1px } } user css: .specific { margin-left: 1em } html: <ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> in this case, declarations inside li and .specific rules should apply.
Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and
media queries.
...on-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-
media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical s...
...tdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-
mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-inline-box -moz-inline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz-gridobsolete since gecko 62 -moz-grid-groupobsolete since gecko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 ...
...z-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-document
media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-windows-accent-color-in-titlebar -moz-windows-classic -moz-windows-compositor -moz-windows-default-theme -moz-windows...
WebKit CSS extensions - CSS: Cascading Style Sheets
pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-page-
media :-webkit-full-screen* :-webkit-full-screen-ancestor :-webkit-full-screen-document :-webkit-full-screen-controls-hidden * now standard.
... ::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-
media-controls ::-webkit-
media-controls-current-time-display ::-webkit-
media-controls-enclosure ::-webkit-
media-controls-fullscreen-button ::-webkit-
media-controls-mute-button ::-webkit-
media-controls-overlay-enclosure ::-webkit-
media-controls-panel ::-webkit-
media-controls-play-button ::-webkit-
media-controls-timeline ::-webkit-
media-controls-time-remaining-display ::-webkit-
media-controls-toggle-closed-captions-button :...
...:-webkit-
media-controls-volume-control-container ::-webkit-
media-controls-volume-control-hover-background ::-webkit-
media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value -webkit-
media-text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-results-button ::-webkit-slider-runnable-track ::-webkit-slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
...
media features -webkit-animation -webkit-device-pixel-ratio -webkit-transform-2d -webkit-transform-3d -webkit-transition ...
break-after - CSS: Cascading Style Sheets
the type of this break is that of the im
mediately-containing fragmentation context.
... if we are inside a multicol container then it would force a column break, inside paged
media (but not inside a multicol container) a page break.
...changes the
media type of this property from paged to visual.
...rt 37safari ios no support nosamsung internet android full support 5.0legend full support full support no support no support support in paged
media desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in paged
mediachrome full support 50edge full support 12firefox full support 65ie ...
break-before - CSS: Cascading Style Sheets
the type of this break is that of the im
mediately-containing fragmentation context.
... if we are inside a multicol container then it would force a column break, inside paged
media (but not inside a multicol container) a page break.
...changes the
media type of this property from paged to visual.
... support in paged
media desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in paged
mediachrome full support 50edge full support 12firefox full support 65ie ...
Adding captions and subtitles to HTML5 video - Developer guides
in other articles we looked at how to build a cross browser video player using the html
mediaelement and window.fullscreen apis, and also at how to style the player.
... firefox firefox's implementation was completely broken due to a bug, leading to mozilla turning off webvtt support by default (you can turn it on via the
media.webvtt.enabled flag.) however, this bug looks to have been fixed and webvtt support re-enabled as of gecko 31, so this will not be a problem for firefox final release users for much longer (on gecko 29 as of the time of this writing) this has been fixed as of firefox 31, and everything works as it should.
...
mediaelement.js another complete video player that also support video captions, albeit only in srt format.
... radiant
media player supports multi-languages webvtt closed captions note: you can find an excellent list of html5 video players and their current "state" at html5 video player comparison.
HTML attribute: rel - HTML: Hypertext Markup Language
values if there are multiple <link rel="icon">s, the browser uses their
media attribute, type, and sizes attributes to select the most appropriate icon.
... <link rel="alternate" type="application/atom+xml" href="posts.xml" title="blog"> both the hreflang and type attributes specify links to versions of the document in an alternative format and language, intended for other
media: <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html
media=print title="french html (for printing)"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="french pdf"> author indicates the author of the current document or article.
... the most common use for the icon value is the favicon: <link rel="icon" href="favicon.ico"> if there are multiple <link rel="icon">s, the browser uses their
media attribute, type, and sizes attributes to select the most appropriate icon.
... the external stylesheet will not be used or even downloaded if the
media does not match the value of the
media attribute.
<img>: The Image Embed element - HTML: Hypertext Markup Language
loading indicates how the browser should load the image: eager: loads the image im
mediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).
...each source size consists of: a
media condition.
...
media conditions describe properties of the viewport, not of the image.
...when the (max-width: 600px)
media condition matches, the 200 pixel-wide image will load (it is the one that matches 200px most closely), otherwise the other image will load.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
including
media one nice feature of <link> elements is their ability to accept
media attributes.
... these can accept
media types or full-blown
media queries, allowing you to do responsive preloading!
... let's look at an example (see it on github — source code, live example): <head> <meta charset="utf-8"> <title>responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image"
media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image"
media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var
mediaquerylist = window.match
media("(max-width: 600px)"); var header = document.queryselector('header'); if (
mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include
media attributes on our <link> ...
...we use window.match
media /
mediaquerylist to do this (see testing
media queries for more).
Content Security Policy (CSP) - HTTP
there are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video
media, scripts, and workers.
...self' example 2 a web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the csp is set on.) content-security-policy: default-src 'self' *.trusted.com example 3 a web site administrator wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video
media to trusted providers, and all scripts only to a specific server that hosts trusted code.
... content-security-policy: default-src 'self'; img-src *;
media-src
media1.com
media2.com; script-src userscripts.example.com here, by default, content is only permitted from the document's origin, with the following exceptions: images may load from anywhere (note the "*" wildcard).
...
media is only allowed from
media1.com and
media2.com (and not from subdomains of those sites).
Compression in HTTP - HTTP
if text can typically have as much as 60% redundancy, this rate can be much higher for some other
media like audio and video.
... unlike text, these other
media types use lot of space to store their data and the need to optimize storage and regain space was apparent very early.
...whatever the inter
mediate nodes are, they leave the body untouched.
...connections between successive inter
mediate nodes may apply a different compression.
Promise - JavaScript
this lets asynchronous methods return values like synchronous methods: instead of im
mediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
...sometimes there is no choice, because an error must be handled im
mediately.
... (see throw -999 in the example, below, for a technique to handle the consequences.) on the other hand, in the absence of an im
mediate need, it is simpler to leave out error handling until a final .catch() statement.
...promisea.then( (val) => console.log("asynchronous logging has val:",val) ); console.log("im
mediate logging"); // produces output in this order: // im
mediate logging // asynchronous logging has val: 777 constructor promise() creates a new promise object.
Graphic design for responsive sites - Progressive web apps (PWAs)
css
media queries allow us to serve different css rules dependant on viewport dimensions, and you should consider using mobile first
media queries where possible.
... this means that the default layout before any
media queries are encountered in the css is the small screen/mobile layout, not the wide screen/desktop layout.
... high res and low res image copies one option here is to create a hi res and a low res set of images, then use resolution
media queries to serve the hi res images only to hi res devices.
...you can also add links direcly into svg and can create animations using smil (synchronized multi
media intergration language).
dur - SVG: Scalable Vector Graphics
g"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> |
media | indefinite default value indefinite animatable no <clock-value> this value specifies the length of the simple duration.
...
media this value specifies the simple duration as the intrinsic
media duration.
... this is only valid for elements that define
media.
... (for animation elements the attribute will be ignored if
media is specified.) indefinite this value specifies the simple duration as indefinite.
page-mod - Archive of obsolete content
the scripts are executed im
mediately.
... the option takes a single string that may take any one of the following values: "start": load content scripts im
mediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); page...
... modifications already made to open documents by content scripts will not be undone, but stylesheets added by contentstyle or contentstylefile, will be unregistered im
mediately.
page-worker - Archive of obsolete content
this may take one of the following values: "start": load content scripts im
mediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this pr...
...setting it loads the content im
mediately.
...this may have one of the following values: "start": load content scripts im
mediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions r...
Adding preferences to an extension - Archive of obsolete content
next, we call our own refreshinformation() method to im
mediately fetch and display the current information about the stock the extension is configured to monitor.
... once we've gotten the updated preference, we call refreshinformation() to im
mediately update the display with the new stock's information.
... watchstock() while we're at it, let's add a method that sets which stock we want to be watching, changing the preference and im
mediately requesting a refresh of the display.
Introducing the Audio API extension - Archive of obsolete content
the audio data api extension extends the html5 specification of the <audio> and <video>
media elements by exposing audio metadata and raw audio data.
... reading audio streams the loadedmetadata event when the metadata of the
media element is available, it triggers a loadedmetadata event.
...those samples may or may not have been played yet at the time of the event and have not been adjusted for mute or volume settings on the
media element.
Using XPInstall to Install Plugins - Archive of obsolete content
many plugins are part of additional software for
media types.
...by refreshing your plugin, you're ensuring that the plugin is available for use im
mediately, without obliging the user to restart their browser.
...it is, however, a safe assumption for most plugins, especially macro
media's flash plugin which consists of a single dll (on windows this is npswf32.dll) and a single xpt file for scriptability (called flashplayer.xpt).
collapse - Archive of obsolete content
before when the grippy is clicked, the element im
mediately before the splitter in the same parent is collapsed so that its width or height is 0.
... after when the grippy is clicked, the element im
mediately after the splitter in the same parent is collapsed so that its width or height is 0.
... both either the element im
mediately before the splitter, or the element im
mediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter.
removeAllNotifications - Archive of obsolete content
« xul reference home removeallnotifications( im
mediate ) return type: no return value remove all notifications.
... if im
mediate is true, the messages are removed im
mediately.
... if im
mediate is false, the notifications are removed using a slide transition.
notificationbox - Archive of obsolete content
removeallnotifications( im
mediate ) return type: no return value remove all notifications.
... if im
mediate is true, the messages are removed im
mediately.
... if im
mediate is false, the notifications are removed using a slide transition.
prefwindow - Archive of obsolete content
on platforms where the convention is to apply changes im
mediately, the preferences are adjusted as soon as the user interface element is changed.
...a true value for this preference makes the preference window apply im
mediately the user choices, without waiting for the dialog to close with ok.
...if it is set to true any changes to settings are supposed to be applied im
mediately.
XULRunner Hall of Fame - Archive of obsolete content
celtx all-in-one
media pre-production software.
...build instructions convertigo enterprise mashup server a web integrator and web clipper tool to build enterprise mashups nightingale nightingale is a communtiy fork of the songbird
media player, bringing back linux support and much more.
...source tomtom home 2 pc application to manage tomtom gps devices understanding faith (desktop version) a multi
media religious education resource for catholic secondary schools in australia.
-moz-mac-graphite-theme - Archive of obsolete content
note: since firefox 58, this
media feature is no longer available to web content — it is only available internally (e.g.
... the -moz-mac-graphite-theme gecko-only css
media feature can be used to apply styles based on whether the user has the mac os x "graphite" theme enabled.
...
media:
media/visual accepts min/max prefixes: no ...
-moz-os-version - Archive of obsolete content
note: since firefox 58, this
media feature is no longer available to web content — it is only available internally (e.g.
... the -moz-os-version gecko-only css
media feature can be used to apply styles based on the user's version of microsoft windows.
...
media:
media/visual accepts min/max prefixes: no ...
-moz-windows-accent-color-in-titlebar - Archive of obsolete content
note: since firefox 58, this
media feature is no longer available to web content — it is only available internally (e.g.
... the -moz-windows-accent-color-in-titlebar gecko-only css
media feature can be used to apply styles based on whether accent colors are enabled in microsoft windows titlebars.
...
media:
media/visual accepts min/max prefixes: no example @
media (-moz-windows-accent-color-in-titlebar: 1) { h1 { color: -moz-win-accentcolortext; } body { background-color: -moz-win-accentcolor; } } ...
-moz-windows-theme - Archive of obsolete content
note: since firefox 58, this
media feature is no longer available to web content — it is only available internally (e.g.
... the -moz-windows-theme gecko-only css
media feature is useful for customizing application skins and other chrome code to work well with the user's windows theme.
... values aero luna-blue luna-olive luna-silver royale generic zune
media:
media/visual accepts min/max prefixes: no ...
Writing JavaScript for XHTML - Archive of obsolete content
in practise, very few xhtml documents are served over the web with the correct mime
media type, application/xhtml+xml.
... whilst authored to the stricter rules of xml, they are sent with the
media type for html (text/html).
...partially it is because, prior to version 9, internet explorer was incapable of handling xhtml sent with the official xhtml
media type at all.
RDF in Mozilla FAQ - Archive of obsolete content
var ds = rdf.getdatasource("http://www.mozilla.org/some-rdf-file.rdf"); // note that ds will load asynchronously, so assertions will not // be im
mediately available alternatively, you can create one directly using the xpcom component manager, as the following code fragment illustrates: // create an rdf/xml datasource using the xpcom component manager var ds = components .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"] .createinstance(components.interfaces.nsirdfdatasource); // the nsirdfremotedatasource interface has the i...
...remote.refresh(false); // note that ds will load asynchronously, so assertions will not // be im
mediately available you may decide that you need to "manually" create an rdf/xml datasource if you want to force it to load synchronously.
... using the nsirdfremotedatasource interface, it is possible to im
mediately query the loaded property to determine if the datasource has loaded or not: // get the rdf service var rdf = components .classes["@mozilla.org/rdf/rdf-service;1"] .getservice(components.interfaces.nsirdfservice); // get the datasource.
The Business Benefits of Web Standards - Archive of obsolete content
one of the most important features of a successful site is constantly evolving relevant content which in turn can act as fuel for social
media dialogue with the user community.
... from this it follows that there needs to be a framework and a process for content contributors to post articles, to upload videos, sound or any other
media.
...customers, developers, digital
media creators, can be freed from the tyranny of graphics led development, code generators, and incomprehensible markup.
Anatomy of a video game - Game development
but do not im
mediately assume animations require frame-by-frame control.
...for the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an im
mediately-invoked function expression (iife).
...*/ ;(function () { function main() { window.requestanimationframe( main ); // your main loop contents } main(); // start the cycle })(); when the browser comes across this iife, it will define your main loop and im
mediately queue it for the next frame.
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
a mime type (now properly called "
media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled audio/ogg, or an image file image/png).
... learn more general knowledge internet
media type on wikipedia technical reference list of mime types properly configuring server mime types details information about the usage of mime types in a web context.
... incomplete list of mime types how mozilla determines mime types
mediarecorder.mimetype ...
What is accessibility? - Learn web development
text content (as you'll see in the next article) is easy, but what about your multi
media content, and your whizzy 3d graphics?
...having all your multi
media content transcribed is one option which, while expensive, is possible.
... html: a good basis for accessibility css and javascript accessibility best practices wai-aria basics accessible multi
media mobile accessibility accessibility troubleshooting see also wcag perceivable operable understandable robust ...
Cascade and inheritance - Learn web development
while working through this lesson may seem less im
mediately relevant and a little more academic than some other parts of the course, an understanding of these things will save you much pain later on!
... the color has applied to the direct children, but also the indirect children — the im
mediate child <li>s, and those inside the first nested list.
... 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
CSS layout - Learn web development
beginner's guide to
media queries 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.
Images in HTML - Learn web development
overview: multi
media and embedding next in the beginning, the web was just text, and it was really quite boring.
...there are other types of multi
media to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage.
... overview: multi
media and embedding next in this module images in html video and audio content from <object> to <iframe> — other embedding technologies adding vector graphics to the web responsive images mozilla splash page ...
Looping code - Learn web development
if we set it to i === cats.length, the loop would not run at all because i is not equal to 5 on the first loop iteration, so it would stop im
mediately.
...we already met this in the previous article when we looked at switch statements — when a case is met in a switch statement that matches the input expression, the break statement im
mediately exits the switch statement and moves onto the code after it.
... it's the same with loops — a break statement will im
mediately exit the loop and make the browser move on to any code that follows it.
Web performance resources - Learn web development
to load css asynchronously one can simpy set the
media type to print and then change to all once loaded.
... <link rel="stylesheet" href="/path/to/my.css"
media="print" onload="this.
media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.
... apis gather user metrics using https://github.com/akamai/boomerang or directly gather with window.performance.timing things not to do (bad practices) download everything use uncompressed
media files ...
The "why" of web performance - Learn web development
good performance may not be obvious to most site visitors, but most will im
mediately recognize a sluggish site.
...reducing html/css/javascript and
media file sizes reduces both the time to load and a site's power consumption (see performance budgets).
... measuring performance multi
media: images multi
media: video javascript performance best practices.
Beginning our React todo list - Learn web development
; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @
media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3;...
...rgin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @
media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @
media screen...
....label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @
media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inse...
Starting our Svelte Todo list app - Learn web development
; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @
media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3...
...rgin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @
media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @
media scree...
....label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @
media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inse...
Getting started with Svelte - Learn web development
t> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @
media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created.
... the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @
media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element.
... using the svelte repl a repl (read–eval–print loop) is an interactive environment that allows you to enter commands and im
mediately see the results — many programming languages provide a repl.
Introducing a complete toolchain - Learn web development
you would handcode the html, use "vanilla javascript" (meaning no frameworks or inter
mediary languages), and manually upload it all to a server for hosting.
... an im
mediate issue is that no browser has native support for jsx; it is an inter
mediate language that is meant to be compiled into languages the browser understands in the production code.
... if the browser tries to run the source javascript it will im
mediately complain; the project needs a build tool to transform the source code to something the browser can consume without issue.
The Firefox codebase: CSS Guidelines
writing
media queries boolean
media queries do this: @
media (-moz-mac-yosemite-theme: 0) { not this: @
media not all and (-moz-mac-yosemite-theme) { privilege css for most common configuration it is better to put the most common configuration (latest version of an os, or default theme for example) outside of the
media query.
... do this: @
media (-moz-mac-yosemite-theme: 0) { #placeslist { box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2); } } not this: #placeslist { box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2); } @
media (-moz-mac-yosemite-theme) { #placeslist { box-shadow: none; } } theme support firefox comes built-in with 3 themes: default, light and dark.
... however, if only 1x and 2x png assets are available, you can use this @
media query to target higher density displays (hdpi): @
media (min-resolution: 1.1dppx) ...
Performance best practices for Firefox front-end engineers
normally, the changes to the dom just result in the standard style calculation occurring im
mediately after the javascript has finished running during the 16ms window, inside the "style" step.
... it should be possible to write a test that gets the nsidomwindowutils for a browser window, records the number of styleflushes, then synchronously calls the function that you want to test, and im
mediately after checks the styleflushes attribute again.
...normally, however, the changes to the dom just result in the standard style calculation that occurs im
mediately after the javascript has finished running during the 16ms window.
IPDL Tutorial
because protocol messages are represented as c++ methods, it's easy to forget that they are in fact asynchronous messages: by default the c++ method will return im
mediately, before the message has been delivered.
...the message is sent, and the c++ method returns im
mediately.
...any time a message implementation returns false, ipdl will im
mediately begin catastrophic error handling: the communication channels for the child process (tab or plugin) will be disconnected, and the process will be terminated.
Introduction to Layout in Mozilla
nsparency [0..1] per frame, owned by frame widget native window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets presentation has
media type, dimensions, etc.
...(tables, blocks, xul boxes) reflow “global” reflows initial, resize, style-change processed im
mediately via presshell method incremental reflows targeted at a specific frame dirty, content-changed, style-changed, user-defined nshtmlreflowcommand object encapsulates info queued and processed asynchronously, nsipressshell::appendreflowcommand, processreflowcommands incremental reflow recursively descend to target recovering reflow state chi...
... rc’s type incremental reflow propagate damage to frames later “in the flow” incremental reflow multiple reflow commands are batched nsreflowpath maintains a tree of target frames amortize state recovery and damage propagation cost painting as reflow proceeds through the frame hierarchy, areas are invalidated via nsiviewmanager::updateview unless im
mediate, invalid areas are coalesced and processed asynchronously via os expose event native expose event dispatched to widget; widget delegates to the view manager view manager paints views back-to-front, invoking presshell’s paint method presshell::paint walks from the view to the frame; invokes nsiframe::paint for each layer incrementalism single-threaded simple (no locking) ...
Examples
actors/webconsole.js:734:9 dsc_onpacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/main.js:1098:9 ldt_send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/server/transport.js:279:11 makeinfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/devtoolsutils.js:84:7 */ inter
mediate of user defined promise function 1 components.utils.import("resource://gre/modules/promise.jsm"); // this function creates and returns a new promise.
... mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/
media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/
media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + ...
...change this line: var imagepaths = ['http://www.mozilla.org/
media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/
media/redesign/img/favicon32.png']; change it to: var imagepaths = ['http://www.mozilla.org/
media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/
media/redesign/img/favicon32.png', 'blah blah']; i added 'blah blah' to that array, it will cuase the whole promise to reject.
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
tdbhandle *certhandle, const char *nicknamestr, prbool sigverify) { secstatus rv = secsuccess; prfiledesc *headerfile = null; certcertificate *cert = null; headertype htype = certenc; /* if the inter
mediate header file already exists, delete it */ if (pr_access(headerfilename, pr_access_exists) == pr_success) { pr_delete(headerfilename); } headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_truncate, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing (%ld, %ld).\n", headerfilename, pr_geterror()...
...em data; unsigned char ptext[modblocksize]; unsigned char encbuf[modblocksize]; unsigned int ptextlen; int index; unsigned int nwritten; unsigned int pad[1]; secitem paditem; unsigned int paddinglength = 0; seckeypublickey *pubkey = null; /* if the inter
mediate encrypted file already exists, delete it*/ if (pr_access(encryptedfilename, pr_access_exists) == pr_success) { pr_delete(encryptedfilename); } /* read certificate from header file */ rv = readfromheaderfile(headerfilename, certenc, &data, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not read certificate from header file\n"); ...
... * write certificate to inter
mediate header file * extract public key from certificate, encrypts the input file and write to external file.
sample2
p: return rv; } /* * finds the certificate using nickname and saves it to the header file */ secstatus addcertificatetoheader(pk11slotinfo *slot, secupwdata *pwdata, const char *headerfilename, certcertdbhandle *certhandle, const char *nicknamestr, prbool sigverify) { secstatus rv = secsuccess; prfiledesc *headerfile = null; certcertificate *cert = null; headertype htype = certenc; /* if the inter
mediate header file already exists, delete it */ if (pr_access(headerfilename, pr_access_exists) == pr_success) { pr_delete(headerfilename); } headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_truncate, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing (%ld, %ld).\n", headerfilename, pr_geterror(), pr_getoserror()); rv = secfailure; goto cleanup; } cer...
...ilename) { secstatus rv; prfiledesc *headerfile = null; prfiledesc *encfile = null; prfiledesc *infile = null; certcertificate *cert = null; secitem data; unsigned char ptext[modblocksize]; unsigned char encbuf[modblocksize]; unsigned int ptextlen; int index; unsigned int nwritten; unsigned int pad[1]; secitem paditem; unsigned int paddinglength = 0; seckeypublickey *pubkey = null; /* if the inter
mediate encrypted file already exists, delete it*/ if (pr_access(encryptedfilename, pr_access_exists) == pr_success) { pr_delete(encryptedfilename); } /* read certificate from header file */ rv = readfromheaderfile(headerfilename, certenc, &data, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not read certificate from header file\n"); goto cleanup; } /* read in an ascii cert and return ...
...* write certificate to inter
mediate header file * extract public key from certificate, encrypts the input file and write to external file.
Handling Mozilla Security Bugs
in particular, we understand and acknowledge the concerns of those who believe that all information about security vulnerabilities should be publicly disclosed as soon as it is known, so that users may take im
mediate steps to protect themselves and so that problems can get the maximum amount of developer attention and be fixed as soon as possible.
... when a bug is put into the security bug group, the group members, bug reporter, and others associated with the bug will decide by consensus, either through comments on the bug or the group mailing list, whether an im
mediate warning to users is appropriate and how it should be worded.
... to establish, for each bug, the amount of information a distributor can reveal im
mediately (before a fix is available) without putting other distributors and their customers at risk.
IAccessibleComponent
locationinparent() returns the location of the upper left corner of the object's bounding box relative to the im
mediate parent object.
...[propget] hresult locationinparent( [out] long x, [out] long y ); parameters x the x coordinate of the upper left corner of the object's bounding box relative to the im
mediate parent object.
... y the y coordinate of the upper left corner of the object's bounding box relative to the im
mediate parent object.
mozIStorageConnection
transaction_im
mediate 1 a reserved lock is obtained on the database.
... void begintransactionas( in print32 transactiontype ); parameters transactiontype one of the transaction constants (mozistorageconnection.transaction_deferred, mozistorageconnection.transaction_im
mediate, mozistorageconnection.transaction_exclusive) clone() clones a database connection, optionally making the new connection read only.
... note: the statements may be reused im
mediately, and the statements do not need to be reset individually.
nsIDOMEvent
void stopim
mediatepropagation(); void stoppropagation(); attributes attribute type description bubbles boolean used to indicate whether or not an event is a bubbling event.
...e xpcom interface guidelines serialize() void serialize( in ipcmessageptr amsg, in boolean aserializeinterfacetype ); parameters amsg aserializeinterfacetype native code only!settarget void settarget( in nsidomeventtarget atarget ); parameters atarget native code only!settrusted void settrusted( in boolean atrusted ); parameters atrusted stopim
mediatepropagation() prevents other event listeners from being triggered and, unlike stoppropagation() its effect is im
mediate.
... void stopim
mediatepropagation(); parameters none.
nsIOutputStream
exceptions thrown ns_base_stream_would_block a non-blocking stream may throw this exception when written to if space for the data is not im
mediately available.
...typically, output streams that do not have an internal buffer will not implement this method since such an implementation would require an inter
mediate buffer unless afromstream supported nsiinputstream.readsegments(), but that is not guaranteed.
...acstring*) aclosure; const char* data; pruint32 len = ns_cstringgetdata(&data); data += afromoffset; len -= afromoffset; if (len > acount) len = acount; memcpy(atosegment, data, len); // indicate that we have copied len bytes to the segment *areadcount = len; return ns_ok; } // write the contents of asource into astream, using writesegments // to avoid inter
mediate buffer copies.
nsIProcess
kill() im
mediately terminates the process represented by the nsiprocess object.
... void run( in boolean blocking, [array, size_is(count)] in string args, in unsigned long count ); parameters blocking if true, this method will block until the process terminates; if false, the method returns im
mediately.
... void runw( in boolean blocking, [array, size_is(count)] in wstring args, in unsigned long count ); parameters blocking if true, this method will block until the process terminates; if false, the method returns im
mediately.
Debugger.Frame - Firefox Developer Tools
a frame is a visible frame if any of the following are true: it is running debuggee code; its im
mediate caller is a frame running debuggee code; or it is a "debugger" frame, representing the continuation of debuggee code invoked by the debugger.
... the “im
mediate caller” rule means that, when debuggee code calls a non-debuggee function, it looks like a call to a primitive: you see a frame for the non-debuggee function that was accessible to the debuggee, but any further calls that function makes are treated as internal details, and omitted from the stack trace.
... (note that the debuggee is not considered an “im
mediate caller” of handler methods it triggers.
AudioParam.setTargetAtTime() - Web APIs
if it is less than or equal to audiocontext.currenttime, the parameter will start changing im
mediately.
... time since starttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a
media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect lasts being controlled by the timeconstant.
...ow.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var attimeplus = document.queryselector('.at-time-plus'); var attimeminus = document.queryselector('.at-time-minus'); // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.
AudioTrack.id - Web APIs
this id can be used with the audiotracklist.gettrackbyid() method to locate a specific track within the
media associated with a
media element.
... the track id can also be used as the fragment of a url that loads the specific track (if the
media supports
media fragments).
... syntax var trackid = audiotrack.id; value a domstring which identifies the track, suitable for use when calling gettrackbyid() on an audiotracklist such as the one specified by a
media element's audiotracks property.
AudioTrackList.length - Web APIs
the read-only audiotracklist property length returns the number of entries in the audiotracklist, each of which is an audiotrack representing one audio track in the
media element.
... a value of 0 indicates that there are no audio tracks in the
media.
... var videoelem = document.queryselector("video"); var numaudiotracks = 0; if (videoelem.audiotracks) { numaudiotracks = videoelem.audiotracks.length; } note that this sample checks to be sure html
mediaelement.audiotracks is defined, to avoid failing on browsers without support for audiotrack.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
bit 6, attested credential data (at) - if set, attestedcredentialdata will im
mediately follow the first 37 bytes of this authenticatordata.
...extension data will follow attestedcredentialdata if it is present, or will im
mediatelly follow the first 37 bytes of the authenticatordata if no attestedcredentialdata is present.
... credentialidlength (2 bytes) - the length of the credential id that im
mediately follows these bytes.
BaseAudioContext.createStereoPanner() - Web APIs
in the javascript we create a
mediaelementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalu...
...e.innerhtml = pancontrol.value; } // connect the
mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'createstereopanner()' in that specification.
ConstrainBoolean - Web APIs
specifications specification status comment
media capture and streamsthe definition of 'constrainboolean' in that specification.
... candidate recommendation initial definition technically, constrainboolean is actually based on an inter
mediary dictionary named constrainbooleanparameters, which adds exact and ideal to the simple boolean type.
... however, for the sake of documentation clarity, the inter
mediate type (present only because of quirks in webidl syntax) is ignored here.
ConstrainDOMString - Web APIs
specifications specification status comment
media capture and streamsthe definition of 'constraindomstring' in that specification.
... candidate recommendation initial definition technically, constraindomstring is actually based on an inter
mediary dictionary named constraindomstringparameters, which adds exact and ideal to domstring.
... however, for the sake of documentation clarity, the inter
mediate type (present only because of quirks in webidl syntax) is ignored here.
ConstrainDouble - Web APIs
specifications specification status comment
media capture and streamsthe definition of 'constraindouble' in that specification.
... candidate recommendation initial definition technically, constraindouble is actually based on an inter
mediary dictionary named constraindoublerange, which adds exact and ideal to doublerange, with constraindouble being a type that can be either a long integer or a doublerange.
... however, for the sake of documentation clarity, the inter
mediate type (present only because of quirks in webidl syntax) is ignored here.
ConstrainULong - Web APIs
specifications specification status comment
media capture and streamsthe definition of 'constrainulong' in that specification.
... candidate recommendation initial definition technically, constrainulong is actually based on an inter
mediary dictionary named constrainulongrange, which adds exact and ideal to ulongrange, with constrainulong being a type that can be either a long integer or a ulongrange.
... however, for the sake of documentation clarity, the inter
mediate type (present only because of quirks in webidl syntax) is ignored here.
Content Index API - Web APIs
a url for a cached
media file, for example, can't be indexed directly.
... instead, you need to provide a url for a page that displays
media, and which works offline.
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/
media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) {...
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
inside this context, whitespace character processing can be summarized as follows: first, all spaces and tabs im
mediately before and after a line break are ignored so, if we take our example markup from before and apply this first rule, we get: <h1>◦◦◦hello⏎ <span>◦world!</span>⇥◦◦</h1> next, all tab characters are handled as space characters, so the example becomes: <h1>◦◦◦hello⏎ <span>◦world!</span>◦◦◦</h1> next, line breaks are converted to spaces: <h1>◦�...
...��◦hello◦<span>◦world!</span>◦◦◦</h1> after that, any space im
mediately following another space (even across two separate inline elements) is ignored, so we end up with: <h1>◦hello◦<span>world!</span>◦</h1> and finally, sequences of spaces at the beginning and end of a line are removed, so we finally get this: <h1>hello◦<span>world!</span></h1> this is why people visiting the web page will simply see the phrase "hello world!" nicely written at the top of the page, rather than a weirdly indented "hello" followed but an even more weirdly indented "world!" on the line below that.
... (normally |previoussibling| is a property * of all dom nodes that gives the sibling node, the node that is * a child of the same parent, that occurs im
mediately before the * reference node.) * * @param sib the reference node.
Element.getElementsByClassName() - Web APIs
as new elements that match names are added to the subtree, they im
mediately appear in the collection.
... similarly, if an existing element that doesn't match names has its set of classes adjusted so that it matches, it im
mediately appears in the collection.
... the opposite is also true; as elements no longer match the set of names, they are im
mediately removed from the collection.
HTMLAnchorElement - Web APIs
htmlanchorelement.
media is a domstring that reflects the
media html attribute, indicating the intended
media for the linked resource.
... technically, the url-related properties,
media, host, hostname, pathname, port, protocol, search, and hash, have been moved to the htmlhyperlinkelementutils mixin, and htmlanchorelement implements this mixin.
... the following properties have been added: hash, host, hostname,
media, pathname, port, protocol, rellist, search, and text.
HTMLAreaElement - Web APIs
htmlareaelement.
media is a domstring containing that reflects the
media html attribute, indicating target
media of the linked resource.
... technically, the url-related properties,
media, host, hostname, pathname, port, protocol, search, and hash, have been moving to the htmlhyperlinkelementutils mixin, and htmlareaelement implements this mixin.
... the following properties have been added: rel, rellist,
media, hreflang, type, host, hostname, pathname, port, protocol, search, and hash.
Audio() - Web APIs
if a url is specified, the browser begins to asynchronously load the
media resource before returning the new object.
...if it's html
mediaelement.have_future_data, there's enough data available to begin playback and play for at least a short time.
... if it's html
mediaelement.have_enough_data, then there's enough data available that, given the current download rate, you should be able to play the audio through to the end without interruption.
HTMLImageElement.loading - Web APIs
this helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than im
mediately during the initial page load.
... images whose loading attribute is set to lazy but are located within the visual viewport im
mediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event.
... in other words, these images aren't loaded im
mediately when processing the <img> element, but are still loaded as part of the initial page load.
msClearEffects - Web APIs
the mscleareffects method of the html
mediaelement, is a proprietary method specific to internet explorer and microsoft edge.
... mscleareffects clears all effects from the
media pipeline.
... syntax html
mediaelement.mscleareffects(); parameters this method has no parameters.
HTMLScriptElement - Web APIs
if neither attribute is present, then the script is fetched and executed im
mediately, blocking further parsing of the page.
... examples dynamically importing scripts let's create a function that imports new scripts within a document creating a <script> node im
mediately before the <script> that hosts the following code (through document.currentscript).
....src + " didn't load correctly."); } function prefixscript(url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.currentscript.parentnode.insertbefore(newscript, document.currentscript); newscript.src = url; } this next function, instead of prepending the new scripts im
mediately before the document.currentscript element, appends them as children of the <head> tag.
HTMLVideoElement.msInsertVideoEffect() - Web APIs
the html
mediaelement.msinsertvideoeffect() method inserts the specified video effect into the
media pipeline.
... syntax str = html
mediaelement.msinsertvideoeffect(activatableclassid: domstring, effectrequired: boolean, config); parameters activatableclassid a domstring defining the video effects class.
... example var ovideo1 = document.getelementbyid("video1"); ovideo1.msinsertvideoeffect("windows.
media.videoeffects.videostabilization", true, null); see also htmlvideoelement microsoft api extensions ...
ImageCapture() constructor - Web APIs
syntax const imagecapture = new imagecapture(videotrack) parameters videotrack a
mediastreamtrack from which the still images will be taken.
... example the following example shows how to use a call to
mediadevices.getuser
media() to retrieve the
mediastreamtrack needed by the imagecapture() constructor.
... navigator.
mediadevices.getuser
media({video: true}) .then(
mediastream => { document.queryselector('video').srcobject =
mediastream const track =
mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); specifications specification status comment
mediastream image capturethe definition of 'imagecapture' in that specification.
ImageCapture.getPhotoCapabilities() - Web APIs
this example also shows how the imagecapture object is created using a
mediastreamtrack retrieved from a device's
mediastream.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.
mediadevices.getuser
media({video: true}) .then(
mediastream => { document.queryselector('video').srcobject =
mediastream; const track =
mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification ...
... status comment
mediastream image capturethe definition of 'getphotocapabilities()' in that specification.
ImageCapture.getPhotoSettings() - Web APIs
this example also shows how the imagecapture object is created using a
mediastreamtrack retrieved from a device's
mediastream.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.
mediadevices.getuser
media({video: true}) .then(
mediastream => { document.queryselector('video').srcobject =
mediastream; const track =
mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification ...
... status comment
mediastream image capturethe definition of 'getphotosettings()' in that specification.
ImageCapture.track - Web APIs
the track read-only property of the imagecapture interface returns a reference to the
mediastreamtrack passed to the imagecapture() constructor.
... syntax const
mediastreamtrack = imagecaptureobj.track value a
mediastreamtrack object.
... specifications specification status comment
mediastream image capturethe definition of 'track' in that specification.
close() - Web APIs
the
mediakeysession.close() method notifies that the current
media session is no longer needed, and that the content decryption module should release any resources associated with this object and close it.
... syntax
mediakeysession.close().then(function() { ...
... specifications specification status comment encrypted
media extensionsthe definition of 'close()' in that specification.
generateRequest() - Web APIs
the
mediakeysession.generaterequest() method returns a promise after generating a
media request based on initialization data.
... syntax
mediakeysession.generaterequest().then(function) { ...
... }); specifications specification status comment encrypted
media extensionsthe definition of 'generaterequest()' in that specification.
update() - Web APIs
the
mediakeysession.update() method loads messages and licenses to the cdm, and then returns a promise .
... syntax
mediakeysession.update(response).then(function() { ...
... specifications specification status comment encrypted
media extensionsthe definition of 'update()' in that specification.
setServerCertificate() - Web APIs
the
mediakeys.setservercertificate() method a promise to a server certificate to be used to encrypt messages to the license server.
... syntax
mediakeys.setservercertificate([
mediakeysessiontype]).then(function() { ...
... }); specifications specification status comment encrypted
media extensionsthe definition of 'setservercertificate()' in that specification.
msRealTime - Web APIs
msrealtime is a read/write property which specifies whether or not to enable low-latency playback on the
media element.
... syntax ptr = object.msrealtime; value boolean value set to true indicates that low-latency playback will be enabled on the
media element.
... low-latency playback is useful in communication and some gaming scenarios, but is more demanding on power consumption and less reliable for smooth
media playback.
OverconstrainedError.OverconstrainedError() - Web APIs
the overconstrainederror constructor creates a new overconstrainederror object which indicates that the set of desired capabilities for the current
mediastreamtrack cannot currently be met.
... when this event is thrown on a
mediastreamtrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
... specifications specification status comment
media capture and streamsthe definition of 'overconstrainederror' in that specification.
OverconstrainedError - Web APIs
the overconstrainederror interface of the
media capture and streams api indicates that the set of desired capabilities for the current
mediastreamtrack cannot currently be met.
... when this event is thrown on a
mediastreamtrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
... specifications specification status comment
media capture and streamsthe definition of 'overconstrainederror' in that specification.
PerformanceResourceTiming.fetchStart - Web APIs
the fetchstart read-only property represents a timestamp im
mediately before the browser starts to fetch the resource.
... if there are http redirects the property returns the time im
mediately before the user agent starts to fetch the final resource in the redirection.
... syntax resource.fetchstart; return value a domhighrestimestamp im
mediately before the browser starts to fetch the resource.
PerformanceResourceTiming.redirectEnd - Web APIs
the redirectend read-only property returns a timestamp im
mediately after receiving the last byte of the response of the last redirect.
... when fetching a resource, if there are multiple http redirects, and any of the redirects have an origin that is different from the current document, and the timing allow check algorithm passes for each redirected resource, this property returns the time im
mediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned.
... syntax resource.redirectend; return value a timestamp im
mediately after receiving the last byte of the response of the last redirect.
PhotoCapabilities.imageHeight - Web APIs
the imageheight read-only property of the photocapabilities interface returns a
mediasettingsrange object indicating the image height range supported by the user agent.
... syntax var
mediasettingsrange = photocapabilities.imageheight value a
mediasettingsrange object.
... specifications specification status comment
mediastream image capturethe definition of 'imageheight' in that specification.
imageWidth - Web APIs
the imagewidth read-only property of the photocapabilities interface returns a
mediasettingsrange object indicating the image width range supported by the user agent.
... syntax var
mediasettingsrange = photocapabilities.imagewidth value a
mediasettingsrange is an object.
... specifications specification status comment
mediastream image capturethe definition of 'imagewidth' in that specification.
RTCIceCandidateStats.candidateType - Web APIs
srflx the candidate is a server reflexive candidate; the ip indicates an inter
mediary address assigned by the stun server to represent the candidate's peer anonymously.
... prflx the candidate is a peer reflexive candidate; the ip is an inter
mediary address assigned by the stun server to represent the candidate's peer anonymously.
...the relay candidate's ip address is an address the turn server uses to forward the
media between the two peers.
RTCIceCandidateType - Web APIs
srflx the candidate is a server reflexive candidate; the ip indicates an inter
mediary address assigned by the stun server to represent the candidate's peer anonymously.
... prflx the candidate is a peer reflexive candidate; the ip is an inter
mediary address assigned by the stun server to represent the candidate's peer anonymously.
...the relay candidate's ip address is an address the turn server uses to forward the
media between the two peers.
RTCInboundRtpStreamStats - Web APIs
bytesreceived a 64-bit integer which indicats the total numer of bytes that have been received so far for this
media source.
...this counter may also be incremented when fec packets arrive in-band along with
media content; this can happen with opus, for example.
... framesdecoded a long integer value indicating the total number of frames of video which have been correctly decoded so far for this
media source.
RTCOutboundRtpStreamStats.qualityLimitationReason - Web APIs
the qualitylimitationreason property of the rtcoutboundrtpstreamstats dictionary is a string indicating the reason why the
media quality in the stream is currently being reduced by the codec during encoding, or none if no quality reduction is being performed.
... the amount of time the encoded
media has had its quality reduced in each of the potential ways that can be done can be found in qualitylimitationdurations.
... syntax var qualitylimitationreason = rtcoutboundrtpstreamstats.qualitylimitationreason; value a map whose keys are domstrings whose values come from the rtcqualitylimitationreason enumerated type, and whose values are the duration of the
media, in seconds, whose quality was reduced for that reason.
RTCPeerConnection.addStream() - Web APIs
the obsolete rtcpeerconnection method addstream() adds a
mediastream as a local source of audio or video.
... syntax rtcpeerconnection.addstream(
mediastream); parameters
mediastream a
mediastream object indicating the stream to add to the webrtc peer connection.
... navigator.
mediadevices.getuser
media({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); pc.addstream(stream); }); migrating to addtrack() compatibility allowing, you should update your code to instead use the addtrack() method: navigator.getuser
media({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); stream.gettracks().foreach(function(track) { pc.addtrack(track, stream); }); }); the newer addtrack() api avoids confusion over whether later changes to the track-makeup of a stream affects a peer connection (they do not).
RTCPeerConnection.addTransceiver() - Web APIs
syntax rtptransceiver = rtcpeerconnection.addtransceiver(trackorkind, init); parameters trackorkind a
mediastreamtrack to associate with the transceiver, or a domstring which is used as the kind of the receiver's track, and by extension of the rtcrtpreceiver itself.
... sendencodings optional a list of encodings to allow when sending rtp
media from the rtcrtpsender.
... streams optional a list of
mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
RTCPeerConnection: addstream event - Web APIs
the obsolete addstream event is sent to an rtcpeerconnection when new
media, in the form of a
mediastream object, has been added to it.
...you should instead watch for the track event, which is sent for each
media track added to the rtcpeerconnection.
... bubbles no cancelable no interface
mediastreamevent event handler property rtcpeerconnection.onaddstream you can, similarly, watch for streams to be removed from the connection by monitoring the removestream event.
RTCPeerConnection.getStats() - Web APIs
the rtcpeerconnection method getstats() returns a promise which resolves with data providing statistics about either the overall connection or about the specified
mediastreamtrack.
... syntax promise = rtcpeerconnection.getstats(selector) parameters selector optional a
mediastreamtrack for which to gather statistics.
... promise = rtcpeerconnection.getstats(selector, successcallback, failurecallback) parameters selector optional a
mediastreamtrack for which to gather statistics.
RTCPeerConnection.removeStream() - Web APIs
the rtcpeerconnection.removestream() method removes a
mediastream as a local source of audio or video.
... syntax rtcpeerconnection.removestream(
mediastream); parameters
mediastream a
mediastream specifying the stream to remove from the connection.
... example var pc, videostream; navigator.getuser
media({video: true}, function(stream) { pc = new rtcpeerconnection(); videostream = stream; pc.addstream(stream); } document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removestream(videostream); pc.close(); }, false); ...
RTCPeerConnection.removeTrack() - Web APIs
the rtcpeerconnection.removetrack() method tells the local end of the connection to stop sending
media from the specified track, without actually removing the corresponding rtcrtpsender from the list of senders as reported by rtcpeerconnection.getsenders().
... syntax pc.removetrack(sender); parameters
mediatrack a rtcrtpsender specifying the sender to remove from the connection.
... var pc, sender; navigator.getuser
media({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
RTCPeerConnection.setLocalDescription() - Web APIs
this description specifies the properties of the local end of the connection, including the
media format.
...because descriptions will be exchanged until the two peers agree on a configuration, the description submitted by calling setlocaldescription() does not im
mediately take effect.
... the process of changing descriptions actually involves inter
mediary steps handled by the webrtc layer to ensure that an active connection can be changed without losing the connection if the change does not succeed.
RTCRtpCodecParameters - Web APIs
the rtcrtpcodecparameters dictionary, part of the webrtc api, is used to describe the configuration parameters for a single
media codec.
... mimetype optional the codec's mime
media type and subtype specified as a domstring of the form "type/subtype".
...most codecs have specific values or ranges of values they permit; see the iana payload format
media type registry for details.
RTCRtpContributingSource - Web APIs
the information provided is based on the last ten seconds of
media received.
... rtptimestamp optional the rtp timestamp of the
media played out at the time indicated by timestamp.
... timestamp optional a domhighrestimestamp indicating the most recent time at which a frame originating from this source was delivered to the receiver's
mediastreamtrack specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcontributingsource' in that specification.
RTCRtpStreamStats.trackId - Web APIs
the rtcrtpstreamstats dictionary's trackid property is a string which uniquely identifies the rtc
mediastreamtrackstats object which contains the track statistics for the
mediastreamtrack for which statistics are provided in this object.
... syntax var trackid = rtcrtpstreamstats.trackid; value a domstring which uniquely identifies the rtc
mediastreamtrackstats object that provides statistics for the track for which statistics are being collected by this rtcstatsreport.
... note: this value is not the same as the value of
mediastramtrack.id.
RTCRtpTransceiver.mid - Web APIs
the read-only rtcrtptransceiver interface's mid property specifies the negotiated
media id (mid) which the local and remote peers have agreed upon to uniquely identify the stream's pairing of sender and receiver.
... syntax var
mediaid = rtcrtptransceiver.mid; value a domstring which uniquely identifies the pairing of source and destination of the transceiver's stream.
... its value is taken from the
media id of the sdp m-line.
RTCStatsReport - Web APIs
stream an object of type rtc
mediastreamstats, providing statistics and information about a
mediastream which is part of the rtcpeerconnection.
... track the object is one of the types based on rtc
mediahandlerstats: for audio tracks, the type is rtcsenderaudiotrackattachmentstats and for video tracks, the type is rtcsendervideotrackattachmentstats.
... the data within provides statistics related to a particular
mediastreamtrack's attachment to an rtcrtpsender; also included are the
media level metrics that go along with the track.
RTCStatsType - Web APIs
stream an object of type rtc
mediastreamstats, providing statistics and information about a
mediastream which is part of the rtcpeerconnection.
... track the object is one of the types based on rtc
mediahandlerstats: for audio tracks, the type is rtcsenderaudiotrackattachmentstats and for video tracks, the type is rtcsendervideotrackattachmentstats.
... the data within provides statistics related to a particular
mediastreamtrack's attachment to an rtcrtpsender; also included are the
media level metrics that go along with the track.
RTCTrackEvent() - Web APIs
this object has the following properties: receiver the rtcrtpreceiver which is being used to receive the track's
media.
... streams optional an array of
mediastream objects representing each of the streams that comprise the event's corresponding track.
... track the
mediastreamtrack the event is associated with.
RTCTrackEventInit - Web APIs
properties rtctrackeventinit inherits properties from the eventinit dictionary, and also includes the following properties: receiver the rtcrtpreceiver which is being used to receive the track's
media.
... streams optional an array of
mediastream objects representing each of the streams that comprise the event's corresponding track.
... track the
mediastreamtrack the event is associated with.
SourceBuffer.abort() - Web APIs
exceptions exception explanation invalidstateerror the
mediasource.readystate property of the parent
media source is not equal to open, or this sourcebuffer has been removed from the
mediasource.
... saying that, current implementations can be useful in certain situations, when you want to stop the current append (or whatever) operation occuring on a sourcebuffer, and then im
mediately start performing operations on it again.
...in lines 92-101, the seek() function is defined — note that abort() is called if
mediasource.readystate is set to open, which means that it is ready to receive new source buffers — at this point it is worth aborting the current segment and just getting the one for the new seek position (see checkbuffer() and getcurrentsegment().) specifications specification status comment
media source extensionsthe definition of 'abort()' in that specification.
SourceBuffer.appendBuffer() - Web APIs
the appendbuffer() method of the sourcebuffer interface appends
media segment data from an arraybuffer or arraybufferview object to the sourcebuffer.
... syntax sourcebuffer.appendbuffer(source); parameters source a buffersource (that is, either an arraybufferview or arraybuffer) which contains the
media segment data you want to add to the sourcebuffer.
... specifications specification status comment
media source extensionsthe definition of 'appendbuffer()' in that specification.
SourceBuffer.trackDefaults - Web APIs
the trackdefaults property of the sourcebuffer interface specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the
media to be appended to the sourcebuffer.
... exception explanation invalidstateerror one or more of the sourcebuffer objects in
mediasource.sourcebuffers are being updated (i.e.
... their sourcebuffer.updating property is currently true), or this sourcebuffer has been removed from the
mediasource.
StereoPannerNode.pan - Web APIs
in the javascript we create a
mediaelementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalu...
...e.innerhtml = pancontrol.value; } // connect the
mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'pan' in that specification.
StereoPannerNode - Web APIs
in the javascript we create a
mediaelementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalu...
...e.innerhtml = pancontrol.value; } // connect the
mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'stereopannernode' in that specification.
TrackEvent - Web APIs
the trackevent interface, which is part of the html dom specification, is used for events which represent changes to a set of available tracks on an html
media element; these events are addtrack and removetrack.
... events based on trackevent are always sent to one of the
media track list types: events involving video tracks are always sent to the videotracklist found in html
mediaelement.videotracks events involving audio tracks are always sent to the audiotracklist specified in html
mediaelement.audiotracks events affecting text tracks are sent to the texttracklist object indicated by html
mediaelement.texttracks.
...if not null, this is always an object of one of the
media track types: audiotrack, videotrack, or texttrack).
VTTCue - Web APIs
the vttcue interface—part of the api for handling webvtt (text tracks on
media presentations)—describes and controls the text track associated with a particular <track> element.
... param starttime the time, in seconds and fractions of a second, that describes the beginning of the range of the
media data to which the cue applies.
... endtime the time, in seconds and fractions of a second, that describes the end of the range of the
media data to which the cue applies.
VideoConfiguration - Web APIs
the videoconfiguration dictionary of the
media capabilities api is used to define the video file being tested when calling the
mediacapabilities methods encodinginfo() and decodinginfo() to determine whether or not the described video configuration is supported, and how smoothly and how smoooth and power-efficient it can be handled.
... examples // create
media configuration to be tested const
mediaconfig = { type : 'file', // see
mediadecodingconfiguration and
mediaencodingconfiguration 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...
... } }; specifications specification status comment
media capabilitiesthe definition of 'videoconfiguration' in that specification.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
the read-only droppedvideoframes property of the videoplaybackquality interface returns the number of video frames which have been dropped rather than being displayed since the last time the
media was loaded into the htmlvideoelement.
... syntax value = videoplaybackquality.droppedvideoframes; value an unsigned 64-bit value indicating the number of frames that have been dropped since the last time the
media in the <video> element was loaded or reloaded.
... var videoelem = document.getelementbyid("my_vid"); var percentelem = document.getelementbyid("percent"); var quality = videoelem.getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment
media playback qualitythe definition of 'videoplaybackquality.droppedvideoframes' in that specification.
VideoTrack.id - Web APIs
this id can be used with the videotracklist.gettrackbyid() method to locate a specific track within the
media associated with a
media element.
... the track id can also be used as the fragment of a url that loads the specific track (if the
media supports
media fragments).
... syntax var trackid = videotrack.id; value a domstring which identifies the track, suitable for use when calling gettrackbyid() on an videotracklist such as the one specified by a
media element's videotracks property.
VideoTrackList.length - Web APIs
the read-only videotracklist property length returns the number of entries in the videotracklist, each of which is a videotrack representing one video track in the
media element.
... a value of 0 indicates that there are no video tracks in the
media.
... var videoelem = document.queryselector("video"); var numvideotracks = 0; if (videoelem.videotracks) { numvideotracks = videoelem.videotracks.length; } note that this sample checks to be sure html
mediaelement.videotracks is defined, to avoid failing on browsers without support for videotrack.
Web Animations API Concepts - Web APIs
history over a decade ago, synchronized multi
media integration language, or smil (pronounced "smile"), brought animation to svg.
... animation animation objects can be imagined as dvd players: they’re used for controlling
media playback, but without
media to play, they don’t do anything.
... animation objects accept
media in the form of animation effects, specifically keyframe effects (we’ll get to those in a moment).
Web Audio API best practices - Web APIs
when working with files, you are looking at either the grabbing the file from an html
mediaelement (i.e.
...
media elements have streaming support out of the box.
... if you're looking to work with audio from the user's camera or microphone you can access it via the
media stream api and the
mediastreamaudiosourcenode interface.
Window - Web APIs
window.clearim
mediate() cancels the repeated execution set using setim
mediate.
... window.match
media() returns a
mediaquerylist object representing the specified
media query string.
... window.setim
mediate() executes a function after the browser has finished other heavy tasks window.setresizable() toggles a user's ability to resize a window.
WindowEventHandlers.onbeforeprint - Web APIs
in general, you should prefer the use of an @
media print css at-rule, but it may be necessary to use these events in some cases.
...}; polyfill safari does not implement these events, but you can create an equivalent result to the beforeprint event with window.match
media('print').
... var
mediaquerylist = window.match
media('print');
mediaquerylist.addlistener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status comment html living standardthe definition of 'onbeforeprint' in that specification.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
if this parameter is omitted, a value of 0 is used, meaning execute "im
mediately", or more accurately, the next event cycle.
...for example: function foo() { console.log('foo has been called'); } settimeout(foo, 0); console.log('after settimeout'); will write to the console: after settimeout foo has been called this is because even though settimeout was called with a delay of zero, it's placed on a queue and scheduled to run at the next opportunity; not im
mediately.
...this causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days), resulting in the timeout being executed im
mediately.
Using the alert role - Accessibility
the alert role is most useful for information that requires the user's im
mediate attention, for example: an invalid value was entered into a form field the user's login session is about to expire the connection to the server was lost, local changes will not be saved because of its intrusive nature, the alert role must be used sparingly and only in situations where the user's im
mediate attention is required.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers may interrupt current output (whether it's speech or braille) and im
mediately announce or display the alert message.
...if the element was already in the original source code when the page loaded, the screen reader will announce the error im
mediately after announcing the page title.
Accessibility documentation index - Accessibility
the alert role is most useful for information that requires the user's im
mediate attention, for example: 16 using the alertdialog role aria, accessibility, codingscripting, html, needscontent, role(2), web development, agent, alertdialog, alerts, modal, user, useragent the alertdialog role is used to notify the user of urgent information that demands the user's im
mediate attention.
... 98 perceivable accessibility, principle 1, wcag, web content accessibility guidelines, contrast, different presentation, text alternatives, time-based
media this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the perceivable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... 105 web accessibility for seizures and physical reactions
media queries, peat, photosensitve epilepsy analysis tool, the harding test, color, epilepsy, musicogenic seizures, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, web animation this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures an...
@document - CSS: Cascading Style Sheets
media-document(), with the parameter of video, image, plugin or all.
... the values provided to the url(), url-prefix(), domain(), and
media-document() functions can be optionally enclosed by single or double quotes.
... formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) |
media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples specifying document for css rule @document url("http://www.w3.org/"), url-prefix("http://www.w3.org/style/"), domain("mozilla.org"),
media-document("video"), regexp("https:.*") { /* css rules here apply to: - the page "http://www.w3.org/" - any page whose url begins wit...
-webkit-transform-2d - CSS: Cascading Style Sheets
the -webkit-transform-2d boolean css
media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported.
... syntax -webkit-transform-2d is a boolean css
media feature whose value is true if the browser supports -webkit prefixed css 2d transforms.
... examples basic example @
media (-webkit-transform-2d) { div { -webkit-transform: translate(100px, 100px); } } this
media feature is only supported by webkit.
any-pointer - CSS: Cascading Style Sheets
the any-pointer css
media feature tests whether the user has any pointing device (such as a mouse), and if so, how accurate it is.
... html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"]:checked { background: gray; } @
media (any-pointer: fine) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @
media (any-pointer: coarse) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 2px solid red; ...
...} } result specifications specification status comment
media queries level 4the definition of 'any-pointer' in that specification.
color - CSS: Cascading Style Sheets
the color css
media feature can be used to test the number of bits per color component (red, green, blue) of the output device.
... examples html <p>this text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p> css p { color: black; } /* any color device */ @
media (color) { p { color: red; } } /* any color device with at least 8 bits per color component */ @
media (min-color: 8) { p { color: #24ba13; } } result specifications specification status comment
media queries level 4the definition of 'color' in that specification.
...
media queriesthe definition of 'color' in that specification.
grid - CSS: Cascading Style Sheets
the grid css
media feature can be used to test whether the output device uses a grid-based screen.
...neato!</p> css :not(.unknown) { color: lightgray; } @
media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-transform: uppercase; } } @
media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-transform: uppercase; } } result specifications specification status comment
media queries level 4the definition of 'grid' in that specification.
...
media queriesthe definition of 'grid' in that specification.
height - CSS: Cascading Style Sheets
the height css
media feature can be used to apply styles based on the height of the viewport (or the page box, for paged
media).
... examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @
media (height: 360px) { div { color: red; } } /* minimum height */ @
media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @
media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment
media queries level 4the definition of 'height' in that specification.
...
media queriesthe definition of 'height' in that specification.
monochrome - CSS: Cascading Style Sheets
the monochrome css
media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.
... examples html <p class="mono">your device supports monochrome pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p> css p { display: none; } /* any monochrome device */ @
media (monochrome) { p.mono { display: block; color: #333; } } /* any non-monochrome device */ @
media (monochrome: 0) { p.no-mono { display: block; color: #ee3636; } } result specifications specification status comment
media queries level 4the definition of 'monochrome' in that specification.
...
media queriesthe definition of 'monochrome' in that specification.
orientation - CSS: Cascading Style Sheets
the orientation css
media feature can be used to test the orientation of the viewport (or the page box, for paged
media).
... examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div { background: yellow; } @
media (orientation: landscape) { body { flex-direction: row; } } @
media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status comment
media queries level 4the definition of 'orientation' in that specification.
...
media queriesthe definition of 'orientation' in that specification.
prefers-color-scheme - CSS: Cascading Style Sheets
(any other value causes firefox to return light.) the prefers-color-scheme css
media feature is used to detect if the user has requested the system use a light or dark color theme.
...="day light-scheme">day (changes in light scheme)</div> <div class="day dark-scheme">day (changes in dark scheme)</div> <br> <div class="night">night (initial)</div> <div class="night light-scheme">night (changes in light scheme)</div> <div class="night dark-scheme">night (changes in dark scheme)</div> css .day { background: #eee; color: black; } .night { background: #333; color: white; } @
media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @
media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; ve...
...rtical-align: middle; } result specifications specification status comment
media queries level 5the definition of 'prefers-color-scheme' in that specification.
prefers-reduced-transparency - CSS: Cascading Style Sheets
the prefers-reduced-transparency css
media feature is used to detect if the user has requested that the system minimize the amount of transparency used across elements.
... user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this
media query is ever implemented user agents will likely rely on the settings provided by the operating systems.
... html <div class="transparency">transparent box</div> css .transparency { opacity: 0.5; } @
media (prefers-reduced-transparency: reduce) { .transparency { opacity: 1; } } result specifications specification status comment
media queries level 5the definition of 'prefers-reduced-transparency' in that specification.
scan - CSS: Cascading Style Sheets
the scan css
media feature can be used to test the scanning process (if any) utilized by the output device.
...if your screen uses progressive scanning, you should see a serif font.</p> css p { font-family: cursive; } @
media (scan: interlace) { p { font-family: sans-serif; } } @
media (scan: progressive) { p { font-family: serif; } } result specifications specification status comment
media queries level 4the definition of 'scan' in that specification.
...
media queriesthe definition of 'scan' in that specification.
shape - CSS: Cascading Style Sheets
the shape css
media feature can be used to test the shape of the device to distinguish recrangular and round displays.
... examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @
media (shape: rect) { h1 { text-align: left; } } @
media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens.
... <head> <link rel="stylesheet" href="default.css" /> <link
media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> <link
media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> specifications specification status css round display level 1the definition of 'shape' in that specification.
width - CSS: Cascading Style Sheets
the width css
media feature can be used to test the width of the viewport (or the page box, for paged
media).
... examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @
media (width: 360px) { div { color: red; } } /* minimum width */ @
media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @
media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment
media queries level 4the definition of 'width' in that specification.
...
media queriesthe definition of 'width' in that specification.
At-rules - CSS: Cascading Style Sheets
nested at-rules — a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: @
media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a
media query.
... @keyframes — describes the aspect of inter
mediate steps in a css animation sequence.
... conditional group rules are defined in css conditionals level 3 and are: @
media, @supports, @document.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/
media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale a...
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/
media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of th...
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/
media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
CSS values and units - CSS: Cascading Style Sheets
many of these units are therefore more useful when the output is a fixed size
media, such as print.
...otherwise, the unit identifier is required, is case insensitive, and must come im
mediately after the numeric part of the value, with no space in-between.
...the syntax starts with the name of the function im
mediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ).
CSS reference - CSS: Cascading Style Sheets
gin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@
mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only-of-typeopacityopacity():optionalorderorientation (@view...
... combinators combinators are selectors that establish a relationship between two or more simple selectors, such as "a is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b im
mediately follows the element selected by a horizontally.
... general sibling combinator a ~ b specifies that the elements selected by both a and b share the same parent and that the element selected by a comes before—but not necessarily im
mediately before—the element selected by b.
CSS Tutorials - CSS: Cascading Style Sheets
media queries the size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays.
...
media queries are the fundamental building blocks in achieving web sites that render everywhere in their best quality.
... inter
mediate-level css tutorials after the release of css 2 (level 1), new features have been added to css.
animation-delay - CSS: Cascading Style Sheets
the animation can start later, im
mediately from its beginning, or im
mediately and partway through the animation.
... a negative value causes the animation to begin im
mediately, but partway through its cycle.
... for example, if you specify -1s as the animation delay time, the animation will begin im
mediately but will start 1 second into the animation sequence.
column-fill - CSS: Cascading Style Sheets
in fragmented contexts, such as paged
media, only the last fragment is balanced.
... therefore in paged
media, only the last page would be balanced.
...in fragmented contexts, such as paged
media, all fragments are balanced.
<resolution> - CSS: Cascading Style Sheets
the <resolution> css data type, used for describing resolutions in
media queries, denotes the pixel density of an output device, i.e., its resolution.
... examples use in a
media query @
media print and (min-resolution: 300dpi) { ...
...
media queriesthe definition of '<resolution>' in that specification.
Event developer guide - Developer guides
the
media streams embedded in the html documents might trigger some events, as explained in the
media events page.
... two common styles are: the generalized addeventlistener() and a set of specific on-event handlers.
media eventsvarious 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.mouse gesture eventsgecko 1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures.
...ems at play and how you use them.overview of events and handlersevents and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as
media stream playback or animation timing.touch events (mozilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17.
Introduction to Web development - Developer guides
common css questions — common questions and answers for beginners inter
mediate css concepts — grouping, pseudo-classes and more.
... eloquent javascript — a comprehensive guide to inter
mediate and advanced javascript methodologies inter
mediate a re-introduction to javascript — a recap on the javascript programming language aimed at inter
mediate-level developers essential javascript design patterns — an introduction to essential javascript design patterns introduction to object-oriented javascript — learn about the javascript object model.
... csstutorial.net beginner tutorials a broad range of useful text and video tutorials that cover the basics through to inter
mediate aspects of css.
HTML attribute: capture - HTML: Hypertext Markup Language
the capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new
media of a type defined by the accept attribute.
... environment the outward-facing camera and/or microphone should be used note: capture was previously a boolean attribute which, if present, requested that the device's
media capture device(s) such as camera or microphone be used instead of requesting a file input.
... specifications specification status html
media capturethe definition of 'capture attribute' in that specification.
<input type="file"> - HTML: Hypertext Markup Language
note: capture was previously a boolean attribute which, if present, requested that the device's
media capture device(s) such as camera or microphone be used instead of requesting a file input.
... // https://developer.mozilla.org/docs/web/
media/formats/image_types const filetypes = [ "image/apng", "image/bmp", "image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon" ]; function validfiletype(file) { return filetypes.includes(file.type); } the returnfilesize() function takes a number (of bytes, taken from the current file's size property), and turns it into...
... recommendation initial definition html
media capturethe definition of 'capture attribute' in that specification.
Connection management in HTTP/1.x - HTTP
the model used in connections between a client and its first proxy may differ from the model between a proxy and the destination server (or any inter
mediate proxies).
... the http headers involved in defining the connection model, like connection and keep-alive, are hop-by-hop headers with their values able to be changed by inter
mediary nodes.
... domain sharding unless you have a very specific im
mediate need, don't use this deprecated technique; switch to http/2 instead.
Using Feature Policy - HTTP
for example, the following are equivalent: feature-policy: unsized-
media 'none'; geolocation 'self' https://example.com; camera *; feature-policy: unsized-
media 'none' feature-policy: geolocation 'self' https://example.com feature-policy: camera *; the iframe allow attribute the second way to use feature policy is for controlling content within an iframe.
...these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized
media to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
... send the following the http header: feature-policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-
media 'none'; using the <iframe> allow attribute: <iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-
media 'none';"></iframe> ...
CSP: default-src - HTTP
for each of the following directives that are absent, the user agent looks for the default-src directive and uses this value for it: child-src connect-src font-src frame-src img-src manifest-src
media-src object-src prefetch-src script-src script-src-elem script-src-attr style-src style-src-elem style-src-attr worker-src csp version 1 directive type fetch directive syntax one or more sources can be allowed for the default-src policy: content-security-policy: default-src <source>; content-security-policy: default-src <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name o...
...
mediastream: allows
mediastream: uris to be used as a content source.
...the following header: content-security-policy: default-src 'self'; script-src https://example.com is the same as: content-security-policy: connect-src 'self'; font-src 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self';
media-src 'self'; object-src 'self'; script-src https://example.com; style-src 'self'; worker-src 'self' specifications specification status comment content security policy level 3the definition of 'default-src' in that specification.
Feature-Policy: autoplay - HTTP
the http feature-policy header autoplay directive controls whether the current document is allowed to autoplay
media requested through the html
mediaelement interface.
... when this policy is enabled and there were no user gestures, the promise returned by html
mediaelement.play() will reject with a domexception.
... for more details on autoplay and autoplay blocking, see the article autoplay guide for
media and web audio apis.
An overview of HTTP - HTTP
this im
mediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets.
...the client can instruct inter
mediate cache proxies to ignore the stored document.
... http flow when a client wants to communicate with a server, either the final server or an inter
mediate proxy, it performs the following steps: open a tcp connection: the tcp connection is used to send a request, or several, and receive an answer.
Regular expression syntax cheatsheet - JavaScript
if the multiline flag is set to true, also matches im
mediately after a line break character.
...if the multiline flag is set to true, also matches im
mediately before a line break character.
...for example, /e?le?/ matches the "el" in "angel" and the "le" in "angle." if used im
mediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).
async function - JavaScript
} async function concurrentstart() { console.log('==concurrent start with await=='); const slow = resolveafter2seconds() // starts timer im
mediately const fast = resolveafter1second() // starts timer im
mediately // 1.
...this runs 2 seconds after 1., im
mediately after 2., since fast is already resolved } function concurrentpromise() { console.log('==concurrent start with promise.all==') return promise.all([resolveafter2seconds(), resolveafter1second()]).then((messages) => { console.log(messages[0]) // slow console.log(messages[1]) // fast }) } async function parallel() { console.log('==parallel with await promise.all==') // start 2 "jobs" in parallel and wait for both of them to complete await promise.all([ (async()=>console.log(await resolveafter2seconds()))(), (async()=>console.log(await resolveafter1second()))() ]) } sequentialstart() // afte...
... this highlights the subtle difference between return foo; and return await foo; — return foo im
mediately returns foo and never throws, even if foo is a promise that rejects.
Performance fundamentals - Web Performance
this is done by avoiding inter
mediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware.
...css
media queries allow these compromises to be restricted only to devices that need them.
... make events im
mediate as old-school, accessibility-aware web developers we love click events since they also support keyboard input.
Recommended Web Performance Timings: How long is too long? - Web Performance
as noted in the description of the critical rendering path, when received, browsers im
mediately start processing the html, rendering the content as it is received rather than waiting for additional assets to load.
...50ms seconds feels im
mediate.
... the acknowledgment of user interaction should often feel im
mediate, such as a hover or button press, but that doesn't mean the completed response should be instantaneous.
Lazy loading - Web Performance
between 2011 and 2019, the
median resource weight increased from ~100kb to ~400kb for desktop and ~50kb to ~350kb for mobile.
...css must be thin, delivered as quickly as possible, and the usage
media types and queries are advised to unblock rendering.
... <link href="style.css" rel="stylesheet"
media="all"> <link href="portrait.css" rel="stylesheet"
media="orientation:portrait"> <link href="print.css" rel="stylesheet"
media="print"> it is possible to perform some css optimizations to achieve that.
Content type - SVG: Scalable Vector Graphics
the format of an rgb value in hexadecimal notation is a "#" im
mediately followed by either three or six hexadecimal characters.
...as defined in css2, a frequency value is a <number> im
mediately followed by a frequency unit identifier.
... time <time> a time value is a <number> im
mediately followed by a time unit identifier.
2015 MDN Fellowship Program - Archive of obsolete content
github: brittanystoroz twitter: @brittanystoroz webgl brief project description webgl is the latest incarnation of the opengl family of real time rendering im
mediate mode graphics apis.
...the fellow will also share the results of their projects at 1-2 events agreed upon by the fellow and the program director, as well as on their personal channels (blog, social
media, etc).
content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts im
mediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this pr...
...this may have one of the following values: "start": load content scripts im
mediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions r...
core/promise - Archive of obsolete content
flat chaining you can use then for chaining inter
mediate operations on promises (var data = readasync().then(parse).then(extract)).
... // extract sql query then(readdbasync); // exectue extracted query against db nested chaining flat chaining is not always an option though, as in some cases you may want to capture inter
mediate values of the chain: var result = readasync(url).then(function(source) { var json = parse(source); return readdbasync(extractquery(json)).then(function(data) { return writeasync(json.url, data); }); }); in general, nesting is useful for computing values from more than one promise: function eventualadd(a, b) { return a.then(function (a) { return b.then(function (b) { ret...
places/favicon - Archive of obsolete content
let { getfavicon } = require("sdk/places/favicon"); // string example getfavicon("http://mozilla.org").then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/
media/img/favicon.ico }); // tab example require("sdk/tabs").open({ url: "http://mozilla.org", onready: function (tab) { getfavicon(tab).then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/
media/img/favicon.ico }); } }); // an optional callback can be provided to handle // the promise's resolve and reject states getfavicon("http://mozilla.org", function (url) ...
...{ console.log(url); // http://mozorg.cdn.mozilla.net/
media/img/favicon.ico }); parameters object : string|tab a value that represents the url of the page to get the favicon url from.
Miscellaneous - Archive of obsolete content
"firefox" for firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called im
mediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application.
... var ci = components.interfaces; var cc = components.classes; //assume you can not get the main window object directly, if you can, just use it var wm = cc["@mozilla.org/appshell/window-
mediator;1"].getservice(ci.nsiwindow
mediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); //get sessionhistory from the current selected tab var history = mainwindow.gbrowser.selectedbrowser.webnavigation.sessionhistory; and then get the page you want, and it's postdata.
Windows - Archive of obsolete content
the simplest way to do that is to use nsiwindow
mediator.
... example window.open(); //this open a pop-up window that could be "blocked" client-side //the following code generate an error as describe in the following warning box var wm = components.classes["@mozilla.org/appshell/window-
mediator;1"] .getservice(components.interfaces.nsiwindow
mediator); var newwindow = wm.getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console.
Enhanced Extension Installation - Archive of obsolete content
finalization for themes, the item is im
mediately installed fully, rather than awaiting the next restart, since themes do not supply xpcom components, preferences defaults etc.
...if the item is a theme, we perform the installation im
mediately (thanks to benjamin smedberg's chrome registry changes this operation is now so simple that it can be performed by a function on the extensionmanager, rather than creating a separate object).
Appendix D: Loading Scripts - Archive of obsolete content
these tags are generally inserted into xul overlay files or other xul documents, after which they are automatically loaded into the context of the xul window in question and executed im
mediately and synchronously.
...problems can ensue if the script im
mediately attempts to access dom nodes.
User Notifications and Alerts - Archive of obsolete content
they interrupt the user's workflow, demanding im
mediate action before anything else can be done.
...also, clicking on any of your custom buttons will cause the notification to be im
mediately closed, so you should only use notification boxes for single-step processes.
Using the Stylesheet Service - Archive of obsolete content
in firefox 3, the changes take effect im
mediately, though some declarations (especially those affecting xul) won't work until a reload.
... if("@mozilla.org/content/style-sheet-service;1" in components.classes) { if(components.id('{41d979dc-ea03-4235-86ff-1e3c090c5630}') .equals(components.interfaces.nsistylesheetservice)) { // stylesheet service is available, but changes won't apply until reload // (firefox 1.5 and 2 behaviour) } else { // stylesheet service is available and changes will apply im
mediately // (firefox 3 behaviour) } } else { // stylesheet service is not available (pre-firefox 1.5 behaviour) } ...
Index of archived content - Archive of obsolete content
extenders jetpack snippets libraries twitter meta enabling enabling experimental jetpack features first run first run me settings multi
media storage file access settings simple storage system clipboard clipboard clipboard test clipboard test system information ui ...
...es arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abbreviations and acronyms the business benefits of web standards using the right markup to invoke plugins windows
media in netscape xquery xul booster xul parser in python input archive ...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
html and web standards have evolved and now offer flexible and fine-grained control to layout as well supporting dhtml, powerful programming languages like javascript, and additional
media through embeddable third-party resources like flash, java, vrml, etc.
...instead of forcing the reader to follow links to new pages, the javascript code can act as the
mediator for information access.
List of Former Mozilla-Based Applications - Archive of obsolete content
witched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee
media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it released a new beta on june 16, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet...
... bugfix release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer
media player last project update on 3/14/09 zoomcreator photo collage tool on april 29, 2010 the site announced zoomara was shutting down.
LIR - Archive of obsolete content
lir stands for low-level inter
mediate representation.
... 48 not in use im
mediate 49 immi int im
mediate 50 immq 64 bit quad im
mediate 51 immd double im
mediate 52 not in use comparisons 53 eqi integer int equality 54 lti integer signed int less-than 55 gti integer signed int greater-than 56 lei integer signed int less-than-or-equal 57 gei integer ...
New Skin Notes - Archive of obsolete content
-- gandalf unfortunately the category styling is very much embedded into the
mediawiki code.
...--dria well, with
mediawiki skin, you can have the clear:both's in content area without a problem.
Venkman Introduction - Archive of obsolete content
stop button waiting for execution also note that when you are currently executing javascript and click the stop button, the javascript stops im
mediately.
... if an item visible in the local variables view is modified via the interactive session view the modification will be im
mediately reflected in the local variable view.
Elements - Archive of obsolete content
only im
mediate children are matched against the selector.
... for example, an xml fragment <customelement><foobar><hoge/></foobar></customelement> with an binding definition <binding id="customelement"><content><xul:box><children includes="hoge"/></xul:box></content></binding> for the customelement element, <xul:box/> becomes empty because the selector includes="hoge" doesn't match for the im
mediate child foobar element.
Splitters - Archive of obsolete content
set this to closest to have the element im
mediately to the left of the splitter resize.
...set this to closest to have the element im
mediately to the right of the splitter resize.
XPCOM Interfaces - Archive of obsolete content
an example is shown below: var bmarks = components.classes["@mozilla.org/browser/bookmarks-service;1"].getservice(); bmarks.queryinterface(components.interfaces.nsibookmarksservice); bmarks.addbookmarkim
mediately("http://www.mozilla.org","mozilla",0,null); first, the component "@mozilla.org/browser/bookmarks-service;1" is retrieved and its service is placed in the variable bmarks.
...the function addbookmarkim
mediately() provided by this interface can be used to add bookmarks.
tab - Archive of obsolete content
afterselected type: boolean this is set to true if the tab is im
mediately after the currently selected tab.
... beforeselected type: boolean this is set to true if the tab is im
mediately before the currently selected tab.
Archived Mozilla and build documentation - Archive of obsolete content
gre hacking wiki to be able to hack the mdc wiki software, you'll need a local webserver install, which can run
mediawiki.
... introducing the audio api extension the audio data api extension extends the html5 specification of the <audio> and <video>
media elements by exposing audio metadata and raw audio data.
Gecko Compatibility Handbook - Archive of obsolete content
this is also the case for older versions of web authoring tools such as macro
media's dreamweaver 2 and 3.
... useful resources beginning to inter
mediate web authors can look to the devedge web tune up wizard for pointers on areas where content needs to be updated to support gecko and other browsers that support the w3c standards.
Introduction to Public-Key Cryptography - Archive of obsolete content
if a certificate for one of the inter
mediate cas shown in figure 8, such as engineering ca, is found in the verifier's local database, verification stops with that certificate, as shown in figure 9.
...for example, figure 10 shows how verification fails if neither the root ca certificate nor any of the inter
mediate ca certificates are included in the verifier's local database.
Using workers in extensions - Archive of obsolete content
when the result is received from xmlhttprequest, instead of im
mediately updating the displayed information in the status bar, a message is sent to the main thread using the worker's postmessage() method.
...watchstock() is updated to pass the symbol to the ticker thread, and refreshinformation(), whose main functionality is now in the worker, is updated to simply pass an empty message to the worker, which tells the worker to refresh the stock information im
mediately.
-moz-maemo-classic - Archive of obsolete content
the -moz-maemo-classic gecko-only css
media feature can be used to apply styles based on whether the user agent is using the original maemo theme.
...
media:
media/visual accepts min/max prefixes: no ...
-moz-touch-enabled - Archive of obsolete content
media:
media/visual accepts min/max prefixes: no example you might use this feature to render your buttons slightly larger if the user is on a touch-screen device, to make them more finger-friendly.
... button { padding: .5em; } @
media (-moz-touch-enabled) { button { padding: 1em; } } ...
Debug.write - Archive of obsolete content
remarks the debug.write function sends strings to the im
mediate window of a script debugger at run time.
... example this example uses the debug.write function to display the value of the variable in the im
mediate window of the script debugger.
Debug.writeln - Archive of obsolete content
remarks the debug.writeln function sends strings, followed by a newline character, to the im
mediate window of the microsoft script debugger at run time.
... example this example uses the debug.writeln function to display the value of the variable in the im
mediate window of the microsoft script debugger.
Sharp variables in JavaScript - Archive of obsolete content
form sharp variables have the form of a sharp sign (#) im
mediately followed by one or more digits.
... #1 = {}; // this doesn't do much since the sharp variable is out of scope im
mediately after a = #2 = {}; // slightly more useful since we retain a reference to the new object to reference the sharp variable, simply append another sharp (#) to the end of the variable name.
XForms Output Element - Archive of obsolete content
image - if the instance node contains an image, then an output element can be used in combination with the
mediatype element to display the image (fx 3.0 only, xhtml/xul).
...characteristics the bound instance node is of type xsd:anyuri, xsd:base64binary or a type derived from it either the
mediatype attribute is present and contains the image's mimetype or the output element contains a
mediatype element which specifies the image's mimetype (for example, image/*).
XForms Upload Element - Archive of obsolete content
the xforms author can set the filter by using the
mediatype attribute directly on the upload element or by placing a
mediatype element (see the spec) as a direct child of the upload element.
... single-node binding special
mediatype - supported.
Game promotion - Game development
presskit() is a press kit builder that helps you create a press page to share with the
media.
... social
media your social
media presence is very important — follow the right hashtags, make friends, engage in conversations, help other devs in need.
2D breakout game using pure JavaScript - Game development
every step has editable, live samples available to play with so you can see what the inter
mediate stages should look like.
... to get the most out of this series of articles you should already have basic to inter
mediate javascript knowledge.
2D breakout game using Phaser - Game development
every step has editable, live samples available to play with, so you can see what the inter
mediate stages should look like.
... to get the most out of this series of articles you should already have basic to inter
mediate javascript knowledge.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
networking and communications asynchronous communication is a method of exchanging messages between two or more parties in which each party receives and processes messages whenever it's convenient or possible to do so, rather than doing so im
mediately upon receipt.
...for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the result being returned when available rather than im
mediately.
Function - MDN Web Docs Glossary: Definitions of Web-related terms
function loop(x) { if (x >= 10) return; loop(x + 1); }; //using ecmascript 2015 arrow notation const loop = x => { if (x >= 10) return; loop(x + 1); }; an im
mediately invoked function expressions (iife) is a function that is called directly after the function is loaded into the browser’s compiler.
... // declared functions can't be called im
mediately this way // error (https://en.wikipedia.org/wiki/im
mediately-invoked_function_expression) /* function foo() { console.log('hello foo'); }(); */ // function expressions, named or anonymous, can be called im
mediately (function foo() { console.log("hello foo"); }()); (function food() { console.log("hello food"); })(); (() => console.log('hello world'))(); if you'd like to know more about iifes, check out the following page on wikipedia : im
mediately invoked function expression learn more technical reference functions arrow functions ...
Application Context - MDN Web Docs Glossary: Definitions of Web-related terms
if an application context is created as a result of the user agent being asked to navigate to a deep link, the user agent must im
mediately navigate to the deep link with replacement enabled.
... otherwise, when the application context is created, the user agent must im
mediately navigate to the start url with replacement enabled.
MDN Web Docs Glossary: Definitions of Web-related terms
racter character encoding character set chrome cia cipher cipher suite ciphertext class client hints closure cms code splitting codec compile compile time computer programming conditional constant constructor continuous
media control flow cookie copyleft cors cors-safelisted request header cors-safelisted response header crawler crlf cross axis cross-site scripting crud cryptanalysis cryptographic hash function cryptography csp csrf css css object model (csso...
... latency layout viewport lazy load lgpl ligature local scope local variable locale localization long task loop lossless compression lossy compression ltr (left to right) m main axis main thread markup mathml
media media (audio-visual presentation)
media (css) metadata method microsoft edge microsoft internet explorer middleware mime mime type minification mitm mixin mobile first modem modern web apps modularity mozilla firefox mutable mvc...
CSS and JavaScript accessibility best practices - Learn web development
css and javascript don't have the same im
mediate importance for accessibility as html, but they are still able to help or damage accessibility, depending on how they are used.
... html: a good basis for accessibility css and javascript accessibility best practices wai-aria basics accessible multi
media mobile accessibility accessibility troubleshooting ...
Mobile accessibility - Learn web development
such issues can be solved by creating a responsive layout using technologies such as
media queries, viewport, and flexbox.
... keeping menus accessible because the screen is so much narrower on mobile devices, it is very common to use
media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile.
Backgrounds and borders - Learn web development
the value of background-size may only be included im
mediately after background-position, separated with the '/' character, like this: center/80%.
... 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Fundamental CSS comprehension - Learn web development
the final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social
media profile.
... project brief you have been provided with some raw html and an image, and need to write the necessary css to style this into a nifty little online business card, which can perhaps double as a gamer card or social
media profile.
Attribute selectors - Learn web development
[attr|=value] div[lang|="zh"] matches elements with an attr attribute whose value is exactly value or begins with value im
mediately followed by a hyphen.
... 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
CSS building blocks - Learn web development
images,
media, and form elements in this lesson we will take a look at how certain special elements are treated in css.
... images, other
media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
Floats - Learn web development
add a class of special to the first paragraph of text, the one im
mediately following the floated box, then in your css add the following rules.
... previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Grids - Learn web development
add this to the css inside your file: .container { display: grid; } unlike flexbox, the items will not im
mediately look any different.
... see also css grid guides css grid inspector: examine grid layouts previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Legacy layout methods - Learn web development
see this example from a
mediarecorder api tutorial.
... previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Multiple-column layout - Learn web development
it essentially behaves the same way as content behaves in paged
media — such as when you print a webpage.
...this specification gives us properties to control breaking of content in multicol and in paged
media.
Practical positioning examples - Learn web development
don't worry if you didn't get this all im
mediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding.
... in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
How much does it cost to do something on the Web? - Learn web development
media editors if you want to include video or audio into your website, you can either embed online services (for example youtube, vimeo, or dailymotion), or include your own videos (see below for bandwidth costs).
...likewise, video-editing software can be free (pitivi, openshot for linux, imovie for mac), less than $100 (adobe premiere elements), or several hundred dollars (adobe premiere pro, avid
media composer, final cut pro).
The HTML5 input types - Learn web development
it is a helpful aid to guide users to fill out a form accurately, and it can save time — it is useful to know that your data is not correct im
mediately, rather than having to wait for a round trip to the server.
...then we im
mediately set the output's textcontent to the current value of the input.
Your first form - Learn web development
forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to im
mediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature).
... a click on a reset button resets all the form widgets to their default value im
mediately.
Use HTML to solve common problems - Learn web development
l how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multi
media how to add images to a webpage how to add video content to a webpage scripting & styling html only sets up document structure.
... advanced images & multi
media how to add a responsive image to a webpage how to add vector image to a webpage how to add a hit map on top of an image internationalization html is not monolingual.
Structuring the web with HTML - Learn web development
html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multi
media player, form, or one of many other available elements or even a new element that you define.
... multi
media and embedding this module explores how to use html to include multi
media in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
Introduction to events - Learn web development
the
media recorder api, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back).
... then it moves on to the next im
mediate ancestor element and does the same thing, then the next one, and so on until it reaches the <html> element.
Drawing graphics - Learn web development
graphics on the web as we talked about in our html multi
media and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and svg.
...this uses getuser
media() to take a video stream from a computer web cam and project it onto the side of the cube as a texture!
Perceived performance - Learn web development
if you're downloading all the assets in the end, the weight of all your assets hasn't improved -- in fact, you may need to add some code -- but because the download of non-im
mediately necessary assets are delayed in a manner that is not perceptible the the user, the user will feel like the download was faster.
... measuring performance multi
media: images multi
media: video javascript performance best practices.
JavaScript performance - Learn web development
battery impact conclusion while optimizing your
media files and scripts will get you very far along in terms of web performance optimization, everything that touches a web pages impacts performance.
... measuring performance multi
media: images multi
media: video javascript performance best practices.
Introduction to client-side frameworks - Learn web development
the wiki
media foundation recently chose to use vue for its front-end, and posted a request for comments (rfc) on framework adoption.
... eric gardner, the author of the rfc, took time to outline the needs of the wiki
media project and why certain frameworks were good choices for the team.
Focus management with Vue refs - Learn web development
because vue is trying to optimize and batch changes, it won't im
mediately update the dom when we set isediting to false.
... mounted() { const labelinputref = this.$refs.labelinput; labelinputref.focus(); } now when you activate the "edit" button with your keyboard, focus should im
mediately be moved to the edit <input>.
Handling common accessibility problems - Learn web development
when we say accessibility in the context of web technology, most people im
mediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.
...its most im
mediately useful form is probably the browser extensions: axe for chrome axe for firefox these add an accessibility tab to the browser developer tools.
How Mozilla's build system works
static libraries are often used as inter
mediate steps to building a shared library, if there are source files from several directories that are part of the shared library.
... static libraries as mentioned above, static libraries are most commonly used as inter
mediate steps to building a larger library (usually a component).
Eclipse CDT
changes you make in one editor will be im
mediately reflected in the other.
...furthermore, the results are not saved so if you im
mediately search for the exact same text again without any changes to the source files having occurred, eclipse will do a slow search all over again.
Embedding the editor
the editing session will forward commands to the individual editors depending on focus, and
mediate undo/redo between them.
... use a new interface, nsieditoruserinterface, to
mediate communication between the editor and the ui.
How to Report a Hung Firefox
another way to trigger a crash in a hung tab is to run the following script in the browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-
mediator;1"].
... getservice(ci.nsiwindow
mediator); let win = wm.getmostrecentwindow("navigator:browser"); let browser = win.gbrowser.selectedbrowser; if (browser.isremotebrowser) { browser.messagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.process_type_default) {components.utils.import("resource://gre/modules/ctypes.jsm");var zero = new ctypes.intptr_t(8);var badptr = ctypes.cast(zero, ctypes.pointertype(ctypes.int32_t));var crash = badptr.contents;}', true); } other techniques on os x if you use a nightly build (>= firefox 16), you can use activity monitor's "sample process" feature to generate a sample.
IME handling guide
note that even if there are pending notifications, they are canceled when notify_ime_of_focus is sent since querying content with following notifications im
mediately after getting focus does not make sense.
...the callers of notifyime(request_tocommit_composition) may expect that composition string is committed im
mediately for their next job.
Addon
for some add-ons this will change im
mediately based on the appdisabled and userdisabled properties; for others it will only change after an application restart.
...if possible the uninstall will happen im
mediately, otherwise it will wait until the next application restart.
Download
inter
mediate values are reported only if hasprogress is true.
... if the cancel() method was called but the cancellation process has not finished yet, this method waits for the cancellation to finish, then restarts the download im
mediately.
OS.File for the main thread
'); }, function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/
media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.
... flush if false or unspecified, return im
mediately once the write is complete.
SourceMap.jsm
this is useful as the final inter
mediate representation a compiler might use before outputting the generated js and source map.
...is im
mediately passed to sourcenode.prototype.add, see below.
Sqlite.jsm
consumers of this api can call the cancel function should they want to im
mediately abort the execution of the statement.
...valid values are transaction_deferred, transaction_im
mediate, transaction_exclusive.
Localizing without a specialized tool
with that document, users can see im
mediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation.
... for instance, enter the proper translation for the line "add %s" cmd_addfoundengine=add "%s" with these two string examples translated, you can now test your work to see im
mediately where you have translated.
AsyncTestUtils extended framework
we do not mark the folders as offline and therefore do not attempt to download the messages so that they are im
mediately available for offline use.
...we mark the folders as offline and download the messages so that they are im
mediately available for offline use.
NSPR's Position On Abrupt Thread Termination
in that environment, exit() may be called and any time, and results in the calling thread's im
mediate termination.
...to make this solution work requires that a function that encounters an error be designed such that it first repairs its im
mediate state, and then reports that error to its caller.
PRLinger
description by default, pr_close returns im
mediately, but if there are any data remaining in the socket send buffer, the system attempts to deliver the data to the peer.
... the pr_sockopt_linger socket option, with a value represented by a structure of type prlinger, makes it possible to change this default as follows: if polarity is set to pr_false, pr_close returns im
mediately, but if there are any data remaining in the socket send buffer, the runtime attempts to deliver the data to the peer.
PR_LogFlush
flushes the log buffer to external
media.
... returns nothing description this function flushes the log buffer to external
media.
nss tech note3
certusagesslca ............... an inter
mediate or root ca cert allowed to issue ssl client or ssl server certs or other inter
mediate ssl ca certs.
...this allows all ssl inter
mediate cas to also be used as email inter
mediate cas.
Index
7 gcintegration developing mozilla, firefox, garbage collection, inter
mediate, intro, jsapi, needsupdate, spidermonkey, tools, memory the spidermonkey garbage collector (gc) will be changing a lot in the future.
...the allocation will then be retried (and may still fail.) 68 js::setoutofmemorycallback jsapi reference, reference, référence(2), spidermonkey unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called im
mediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed.
Functions
an algol-like function may read the local variables and arguments of its im
mediate enclosing function from the stack, as if by magic.
...if a name definitely refers to an argument or local variable of the im
mediately enclosing function, it can be accessed using jsop_{get,set,call}{arg,local} instructions.
Garbage collection
if so, the engine must im
mediately restart a full, non-incremental gc in order to reclaim some memory and continue execution.
...this is easily done by simply marking new objects im
mediately upon allocation during an incremental gc, thus the name allocate-black.
JSAPI Cookbook
xception(cx); /* do error-handling stuff here */ return true; finally // javascript try { foo(); bar(); } finally { cleanup(); } if your c/c++ cleanup code doesn't call back into the jsapi, this is straightforward: /* jsapi */ bool success = false; if (!js_callfunctionname(cx, global, "foo", 0, null, &r)) goto finally_block; /* instead of returning false im
mediately */ if (!js_callfunctionname(cx, global, "bar", 0, null, &r)) goto finally_block; success = true; /* intentionally fall through to the finally block.
... /* jsapi */ bool success = false; if (!js_callfunctionname(cx, global, "foo", 0, null, &r)) goto finally_block; /* instead of returning false im
mediately */ if (!js_callfunctionname(cx, global, "bar", 0, null, &r)) goto finally_block; success = true; /* intentionally fall through to the finally block.
JS_SetBranchCallback
if the callback returns js_false without raising an exception, then the javascript engine im
mediately stops running the script with an uncatchable error.
...the callback simply increments the counter and does nothing further (returning js_true im
mediately) unless the counter has reached the threshold value.
Web Replay
the data stream should have enough error checking in place that we can im
mediately detect if the replay has gone out of sync with the recording.
...
media elements are not supported yet, as many of these run third party multithreaded code which hasn't been tested with the infrastructure.
WebReplayRoadmap
this requires scanning the recording and the console will not update im
mediately.
...
media elements (bug 1304146) web audio (bug 1304147) webrtc (bug 1304149) webassembly (bug 1481007) webgl (bug 1506467) support more operating systems (not yet implemented) only macos is supported right now.
Redis Tips
the redis command watch lets you name keys you're worried about; it causes your next transaction to be im
mediately aborted if any of the watched keys has been modified by anyone else.
... ok, now in a different shell, and another redis-cli, do this: redis2> rpush myqueue 42 now if you look back at the first redis-cli, you'll see that it im
mediately popped the value off the list and said something like: redis1> 1) "myqueue" 2) "42" (26.87s) that rules!
Retrieving part of the bookmarks tree
var rootnode = result.root; rootnode.containeropen = true; // iterate over the im
mediate children of this folder and dump to console for (var i = 0; i < rootnode.childcount; i ++) { var node = rootnode.getchild(i); dump("child: " + node.title + "\n"); } // close a container after using it!
...ervice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var toolbarfolder = bookmarksservice.toolbarfolder; query.setfolders([toolbarfolder], 1); var result = historyservice.executequery(query, options); var rootnode = result.root; rootnode.containeropen = true; // iterate over the im
mediate children of this folder and dump to console for (var i = 0; i < rootnode.childcount; i ++) { var node = rootnode.getchild(i); dump("child: " + node.title + "\n"); } // close a container after using it!
nsIMemory
method overview voidptr alloc(in size_t size); violates the xpcom interface guidelines void free(in voidptr ptr); violates the xpcom interface guidelines void heapminimize(in boolean im
mediate); boolean islowmemory(); deprecated since gecko 2.0 voidptr realloc(in voidptr ptr, in size_t newsize); violates the xpcom interface guidelines methods alloc allocates a block of memory of a particular size.
... void heapminimize( in boolean im
mediate ); parameters im
mediate if true, heap minimization will occur im
mediately if the call was made on the main thread.
nsIProtocolProxyService
proxy auto config (pac) may perform a synchronous dns query, which may not return im
mediately.
...this method is intended as a substitute for resolve when the result is not needed im
mediately.
nsIRequest
inhibit_persistent_caching 1 << 8 this flag prevents caching on disk (or other persistent
media), which may be needed to preserve privacy.
... note: some implementations are unable to im
mediately suspend, and may continue to deliver events already posted to an event queue.
nsISessionStore
note: calling setbrowserstate im
mediately replaces the current session, restoring the state of the entire application to the state passed in the astate parameter.
...this outermost or root window can also be obtained from the list returned by nsiwindow
mediator; see example #3 in working_with_windows_in_chrome_code.
nsIStyleSheetService
sheets added via this api take effect on all documents, including already-loaded ones, im
mediately.
...the removal takes effect im
mediately, even for already-loaded documents.
nsIWebNavigation
load_flags_bypass_cache 256 this flag specifies that the local web cache should be bypassed, but an inter
mediate proxy cache could still be used to satisfy the load.
... load_flags_bypass_proxy 512 this flag specifies that any inter
mediate proxy caches should be bypassed (that is, that the content should be loaded from the origin server).
XPCOM Interface Reference
listenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtml
mediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorag...
...iwebbrowserchromefocusnsiwebbrowserfindnsiwebbrowserfindinframesnsiwebbrowserpersistnsiwebcontenthandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindow
mediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionn...
XPCOM Interface Reference by grouping
idomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtml
mediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommouses...
...info nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome nsisearchengine nsisearchsubmission nsiwebbrowserchrome nsiwindowcreator nsiwindow
mediator nsiwindowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner core action nsitransactionmanager process nsiprocess ...
Dominators - Firefox Developer Tools
if node b dominates node a, but does not dominate any of a's other dominators, then b is the im
mediate dominator of a: one slight subtlety here is that if an object a is referenced by two other objects b and c, then neither object is its dominator, because you could remove either b or c from the graph, and a would still be retained by its other referrer.
... instead, the im
mediate dominator of a would be its first common ancestor: see also dominators in graph theory.
Dominators view - Firefox Developer Tools
im
mediately underneath that is an entry for: every gc root node.
... im
mediately under each gc root, you'll see all the nodes for which this root is the im
mediate dominator.
Validators - Firefox Developer Tools
tune-up wizard links back to devedge if you're writing new code that isn't validating im
mediately, see the available standards-compliant authoring and development tools.
... applications and services devedge web tune-up wizard this interface to w3c services guides beginning-to-inter
mediate web authors through the process of updating content to support netscape 7.x, mozilla and other browsers that support w3c standards.
Console messages - Firefox Developer Tools
synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser window is resized or some javascript modifies an element's css — the layout is not recalculated im
mediately.
...for example, code like this will cause an im
mediate, synchronous, reflow, when it calls window.getcomputedstyle(thing).height: var thing = document.getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight = window.getcomputedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read back a style that ha...
AnalyserNode.getFloatFrequencyData() - Web APIs
context(); const analyser = audioctx.createanalyser(); // float32array should be the same length as the frequencybincount const mydataarray = new float32array(analyser.frequencybincount); // fill the float32array with data returned from getfloatfrequencydata() analyser.getfloatfrequencydata(mydataarray); drawing a spectrum the following example shows basic usage of an audiocontext to connect a
mediaelementaudiosourcenode to an analysernode.
...microphone input const audioele = new audio(); audioele.src = 'my-audio.mp3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.create
mediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('c...
Animation - Web APIs
consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion
media query to create a complimentary experience for users who have expressed a preference for no animated experiences.
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion
media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment web animationsthe definition of 'animation' in that specification.
AudioNode - Web APIs
an html <audio> or <video> element, an oscillatornode, etc.), the audio destination, inter
mediate processing module (e.g.
...for example, a volume control (gainnode) should be the last node so that volume changes take im
mediate effect.
AudioParam.exponentialRampToValueAtTime() - Web APIs
examples in this example, we have a
media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, exponentialramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively.
...ebkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var exprampplus = document.queryselector('.exp-ramp-plus'); var exprampminus = document.queryselector('.exp-ramp-minus'); // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a gain node and set its gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(a...
AudioParam.linearRampToValueAtTime() - Web APIs
example in this example, we have a
media source with two control buttons (see the audio-param repo for the source code, or view the example live.) when these buttons are pressed, linearramptovalueattime() is used to fade the gain value up to 1.0, and down to 0, respectively.
...ntext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var linearrampplus = document.queryselector('.linear-ramp-plus'); var linearrampminus = document.queryselector('.linear-ramp-minus'); // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(...
AudioParam.setValueAtTime() - Web APIs
examples this simple example features a
media element source with two control buttons (see our webaudio-examples repo for the source code, or view the example live).
...x = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus = document.queryselector('.set-target-at-time-plus'); var targetattimeminus = document.queryselector('.set-target-at-time-minus'); // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.
AudioParam.setValueCurveAtTime() - Web APIs
examples in this example, we have a
media source with a single button (see the webaudio-examples repo for the source code, or view the example live.) when this button is pressed, setvaluecurveattime() is used to change the gain value between the values contained in the wavearray array: // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables f...
...or example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var valuecurve = document.queryselector('.value-curve'); // create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set button to do something onclick var wavearray = new float32array(9); wavearray[0] = 0.5; wavearray[1] = 1...
AudioScheduledSourceNode.start() - Web APIs
if no time is specified, then the sound begins playing im
mediately.
...a value of 0 (or omitting the when parameter entirely) causes the sound to start playback im
mediately.
AudioScheduledSourceNode.stop() - Web APIs
if no time is specified, then the sound stops playing im
mediately.
...omitting this parameter, specifying a value of 0, or passing a negative value causes the sound to stop playback im
mediately.
AudioTrack.sourceBuffer - Web APIs
the read-only audiotrack property sourcebuffer returns the sourcebuffer that created the track, or null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the
mediasource.sourcebuffers attribute of its parent
media source.
... specifications specification status comment
media source extensionsthe definition of 'audiotrack: sourcebuffer' in that specification.
AudioTrackList.getTrackById() - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the
media resource itself, or, if the resource doesn't define an order, the relative order in which the tracks are declared by the
media resource.
... function disablecharacter(videoelem, charactername) { videoelem.audiotracks.gettrackbyid(charactername).enabled = false; } this short function gets the audiotracklist containing the video's audio tracks using html
mediaelement.audiotracks, then calls gettrackbyid() on it, specifying the character's name.
AudioTrackList.onchange - Web APIs
to determine the new state of
media's tracks, you'll have to look at their audiotrack.enabled flags.
... syntax audiotracklist.onchange = eventhandler; value set onchange to a function that should be called whenever tracks are enabled or disabled on the
media element.
Background Tasks API - Web APIs
since we don't know at the time log() is called whether or not it's safe to im
mediately touch the dom, we will cache the log text until it's safe to update.
...this element is a pseudo-dom into which we can insert elements without im
mediately changing the main dom itself.
BlobEvent - Web APIs
these blobs are typically, but not necessarily, associated with
media content.
... specifications specification status comment
mediastream recordingthe definition of 'blobevent' in that specification.
CSSGroupingRule - Web APIs
objects deriving from it : cssconditionrule and its children: css
mediarule, csssupportsrule, and cssdocumentrule.
...it has one specific property: cssgroupingrule.cssrules read only returns a cssrulelist of the css rules in the
media rule.
CSSRule - Web APIs
if this rule is a style rule inside an @
media block, the parent rule would be that css
mediarule.
...(until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.
media_rule 4 css
mediarule cssrule.font_face_rule 5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule 7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profiles in the future cssrule.namespace_rule ...
CSS Object Model (CSSOM) - Web APIs
reference animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule css
mediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle
medialist
mediaquerylist
mediaquerylistevent
mediaquerylistlistener screen stylesheet stylesheetlist transitionevent seve...
... css object model (cssom) view module working draft defined the screen and
mediaquerylist interfaces and the
mediaquerylistevent event and
mediaquerylistlistener event listener.
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(
media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="
media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="9...
... processor.timercallback = function timercallback() { if (this.video.paused || this.video.ended) { return; } this.computeframe(); let self = this; settimeout(function() { self.timercallback(); }, 0); }, the first thing the callback does is check to see if the video is even playing; if it's not, the callback returns im
mediately without doing anything.
Drawing shapes with canvas - Web APIs
unlike the path functions we'll see in the next section, all three rectangle functions draw im
mediately to the canvas.
... note: when the current path is empty, such as im
mediately after calling beginpath(), or on a newly created canvas, the first path construction command is always treated as a moveto(), regardless of what it actually is.
CharacterData - Web APIs
nondocumenttypechildnode.nextelementsibling read only returns the element im
mediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
... nondocumenttypechildnode.previouselementsibling read only returns the element im
mediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.
ContentIndex.add() - Web APIs
// our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/
media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) {...
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/
media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification.
CredentialsContainer.get() - Web APIs
mediation: a string indicating whether the user will be required to log on for every visit to the website.
... un
mediated: a boolean indicating the returned credential instance should not require user
mediation.
DOMMatrixReadOnly - Web APIs
if no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element im
mediately above and to its left: m33 and m34.
...if no matrix is specified, the matrix is initialized with every element set to 0 except the bottom-right corner and the element im
mediately above and to its left: m33 and m34.
DirectoryEntrySync - Web APIs
you cannot create a file whose im
mediate parent does not exist.
...you cannot create a file whose im
mediate parent does not exist.
Document: dragenter event - Web APIs
the target object is the im
mediate user selection (the element directly indicated by the user as the drop target), or the <body> element.
... bubbles yes cancelable yes default action reject im
mediate user selection as potential target element.
Element - Web APIs
nondocumenttypechildnode.nextelementsibling read only is an element, the element im
mediately following the given one in the tree, or null if there's no sibling node.
... nondocumenttypechildnode.previouselementsibling read only is a element, the element im
mediately preceding the given one in the tree, or null if there is no sibling element.
Event - Web APIs
cessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent
mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitioneven...
... event.stopim
mediatepropagation() for this particular event, prevent all other listeners from being called.
Using Fetch - Web APIs
a headers object is a simple multi-map of names to values: const content = 'hello world'; const myheaders = new headers(); myheaders.append('content-type', 'text/plain'); myheaders.append('content-length', content.length.tostring()); myheaders.append('x-custom-header', 'processthisim
mediately'); the same can be achieved by passing an array of arrays or an object literal to the constructor: const myheaders = new headers({ 'content-type': 'text/plain', 'content-length': content.length.tostring(), 'x-custom-header': 'processthisim
mediately' }); the contents can be queried and retrieved: console.log(myheaders.has('content-type')); // true console.log(myheaders.has('set-coo...
...kie')); // false myheaders.set('content-type', 'text/html'); myheaders.append('x-custom-header', 'anothervalue'); console.log(myheaders.get('content-length')); // 11 console.log(myheaders.get('x-custom-header')); // ['processthisim
mediately', 'anothervalue'] myheaders.delete('x-custom-header'); console.log(myheaders.get('x-custom-header')); // [ ] some of these operations are only useful in serviceworkers, but they provide a much nicer api for manipulating headers.
File.getAsText() - Web APIs
example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed
media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.
mediatype) > -1) { // file is of type text, which we accept // make sure it's encoded as...
... utf-8 var data = file.getastext("utf-8"); // modify data with string methods } else if (accept.binary.indexof(file.
mediatype) > -1) { // binary } } } specification not part of any specification.
File.type - Web APIs
returns the
media type (mime) of the file represented by a file object.
... syntax var name = file.type; value a string, containing the
media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its
media type.
FileSystemDirectoryEntry.removeRecursively() - Web APIs
x for androidopera for androidsafari on iossamsung internetremoverecursively deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it im
mediately called the error callback with ns_error_dom_security_err.ie no support noopera no support nosafari no support nowebview android full support ≤37chrome android full support ...
... 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it im
mediately called the error callback with ns_error_dom_security_err.opera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportnon-standard.
FileSystemDirectoryEntry - Web APIs
full support yesremoverecursively deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it im
mediately called the error callback with ns_error_dom_security_err.ie no support noopera no support nosafari no support nowebview android full support ≤37chrome android full support ...
... 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it im
mediately called the error callback with ns_error_dom_security_err.opera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemFileEntry.createWriter() - Web APIs
roidfirefox for androidopera for androidsafari on iossamsung internetcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it im
mediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support nowebview android full support ≤37chrome android full support ...
... 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it im
mediately called errorcallback with the ns_error_dom_security_err error.opera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportnon-standard.
FileSystemFileEntry - Web APIs
yesprefixed prefixed implemented with the vendor prefix: webkitcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it im
mediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support nowebview android full support ≤37chrome android full support ...
... 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it im
mediately called errorcallback with the ns_error_dom_security_err error.opera android no support nosafari ios no support nosamsung internet android full support yesfilechrome full support 8edge full support 79firefox full support 50ie no support noopera no support ...
Using FormData Objects - Web APIs
creating a formdata object from scratch you can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 123456); // number 123456 is im
mediately converted to a string "123456" // html file input, chosen by user formdata.append("userfile", fileinputelement.files[0]); // javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
...the number assigned to the field "accountnum" is im
mediately converted into a string by the formdata.append() method (the field's value can be a blob, file, or a string: if the value is neither a blob nor a file, the value is converted to a string).
msAudioDeviceType - Web APIs
for real-time communications, you can use the msaudiodevicetype property with the value console, multi
media, or communications to specify where the current audio should output.
... multi
media specifies that the audio output will be sent to the multi
media device.
HTMLCanvasElement - Web APIs
htmlcanvaselement.capturestream() returns a canvascapture
mediastream that is a real-time video capture of the surface of the canvas.
...
media capture from dom elementsthe definition of 'htmlcanvaselement' in that specification.
HTMLImageElement - Web APIs
this may change as the image is adjusted due to changing conditions, as directed by any
media queries which are in place.
... htmlimageelement.loading a domstring providing a hint to the browser used to optimize loading the document by determining whether to load the image im
mediately (eager) or on an as-needed basis (lazy).
HTMLTrackElement: cuechange event - Web APIs
this happens even if the track isn't associated with a
media element.
... if the track is associated with a
media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement.
IDBDatabase - Web APIs
methods inherits from: eventtarget idbdatabase.close() returns im
mediately and closes the connection to a database in a separate thread.
... idbdatabase.transaction() im
mediately returns a transaction object (idbtransaction) containing the idbtransaction.objectstore method, which you can use to access your object store.
ImageCapture.grabFrame() - Web APIs
the grabframe() method of the imagecapture interface takes a snapshot of the live video in a
mediastreamtrack and returns a promise that resolves with a imagebitmap containing the snapshot.
...ion(imagebitmap) { console.log('grabbed frame:', imagebitmap); canvas.width = imagebitmap.width; canvas.height = imagebitmap.height; canvas.getcontext('2d').drawimage(imagebitmap, 0, 0); canvas.classlist.remove('hidden'); }) .catch(function(error) { console.log('grabframe() error: ', error); }); } specifications specification status comment
mediastream image capturethe definition of 'grabframe()' in that specification.
ImageCapture.takePhoto() - Web APIs
the takephoto() method of the imagecapture interface takes a single exposure using the video capture device sourcing a
mediastreamtrack and returns a promise that resolves with a blob containing the data.
...elector('canvas'); takephotobutton.onclick = takephoto; function takephoto() { imagecapture.takephoto().then(function(blob) { console.log('took photo:', blob); img.classlist.remove('hidden'); img.src = url.createobjecturl(blob); }).catch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status comment
mediastream image capturethe definition of 'takephoto()' in that specification.
MSGraphicsTrust - Web APIs
syntax var trustobject =
media.msgraphicstruststatus; parameters constrictionactive a read-only property which returns true when protected
media is forced to play in a lower resolution.
... example var trustobject =
media.msgraphicstruststatus; ...
message - Web APIs
the
mediakeymessageevent.message read-only property returns an arraybuffer with a message from the content decryption module.
... syntax var messagetype =
mediakeymessageevent.messagetype; specifications specification status comment encrypted
media extensionsthe definition of 'message' in that specification.
expiration - Web APIs
the
mediakeysession.expiration read-only property returns 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.
... syntax var expirationtime =
mediakeysessionobj.expiration; specifications specification status comment encrypted
media extensionsthe definition of 'expiration' in that specification.
keyStatuses - Web APIs
the
mediakeysession.keystatuses read-only property returns a reference to a read-only
mediakeystatusmap of the current session's keys and their statuses.
... syntax var
mediakeystatusmapobj =
mediakeysessionobj.keystatuses; specifications specification status comment encrypted
media extensionsthe definition of 'keystatuses' in that specification.
remove() - Web APIs
the
mediakeysession.remove() method returns a promise after removing any session data associated with the current object.
... specifications specification status comment encrypted
media extensionsthe definition of 'remove()' in that specification.
sessionId - Web APIs
the
mediakeysession.sessionid read-only property contains a unique string generated by the cdm for the current
media object and its associated keys or licenses.
... syntax var sessionid =
mediakeysessionobj.sessionid; specifications specification status comment encrypted
media extensionsthe definition of 'sessionid' in that specification.
getConfiguration() - Web APIs
the
mediakeysystemaccess.getconfiguration() method returns a
mediakeysystemconfiguration object with the supported combination of configuration options.
... syntax var
mediakeysystemconfiguration =
mediakeysystemaccess.getconfiguration(); specifications specification status comment encrypted
media extensionsthe definition of 'getconfiguration()' in that specification.
keySystem - Web APIs
the
mediakeysystemaccess.keysystem read-only property returns a domstring identifying the key system being used.
... syntax var keysystem =
mediakeysystemaccess.keysystem; specifications specification status comment encrypted
media extensionsthe definition of 'keysystem' in that specification.
audioCapabilities - Web APIs
the
mediakeysystemconfiguration.audiocapabilities read-only property returns an array of supported audio type and capability pairs.
... syntax var audiocapabilities[ {contenttype: 'contenttype', robustness:'robustness'}] =
mediasystemconfiguration.audiocapabilities; specifications specification status comment encrypted
media extensionsthe definition of 'audiocapabilities' in that specification.
distinctiveIdentifier - Web APIs
the
mediakeysystemconfiguration.distinctiveidentifier read-only property indicates whether a persistent distinctive identifier is required.
... syntax var distinctiveidentifier =
mediasystemconfiguration.distinctiveidentifier; specifications specification status comment encrypted
media extensionsthe definition of 'distinctiveidentifier' in that specification.
initDataTypes - Web APIs
the
mediakeysystemconfiguration.initdatatypes read-only property returns a list of supported initialization data type names.
... syntax var datatypes[] =
mediasystemconfiguration.initdatatypes; specifications specification status comment encrypted
media extensionsthe definition of 'initdatatypes' in that specification.
persistentState - Web APIs
the
mediakeysystemconfiguration.persistentstate read-only property indicates whether the ability to persist state is required.
... syntax var persistentstate =
mediasystemconfiguration.persistentstate; specifications specification status comment encrypted
media extensionsthe definition of 'persistentstate' in that specification.
videoCapabilities - Web APIs
the
mediakeysystemconfiguration.videocapabilities read-only property returns an array of supported video type and capability pairs.
... syntax var videocapabilities[{contenttype: 'contenttype', robustness:'robustness'}] =
mediasystemconfiguration.videocapabilities; specifications specification status comment encrypted
media extensionsthe definition of 'videocapabilities' in that specification.
createSession() - Web APIs
the
mediakeys.createsession() method returns a new
mediakeysession object, which represents a context for message exchange with a content decryption module (cdm).
... syntax var
mediakeysessionobject =
mediakeys.createsession([
mediakeysessiontype]); specifications specification status comment encrypted
media extensionsthe definition of 'createsession()' in that specification.
Microsoft API extensions - Web APIs
touch apis element.mszoomto() mscontentzoom msmanipulationevent msmanipulationstatechanged msmanipulationviewsenabled mspointerhover
media apis htmlvideoelement.msframestep() htmlvideoelement.mshorizontalmirror htmlvideoelement.msinsertvideoeffect() htmlvideoelement.msislayoutoptimalforplayback htmlvideoelement.msisstereo3d htmlvideoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype html
mediaelement.mscleareffects() html
mediaelement.msinsertaudioeffect()
mediaerror.msextendedcode msgrap...
...hicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime msset
mediaprotectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
MutationObserver.takeRecords() - Web APIs
the most common use case for this is to im
mediately fetch all pending mutation records im
mediately prior to disconnecting the observer, so that any pending mutations can be processed when stopping down the observer.
...this is done im
mediately prior to calling disconnect() to stop observing the dom.
NDEFReader.scan() - Web APIs
mediatype -- the match pattern for matching each ndefrecord.
mediatype.
... return value a promise that resolves with undefined im
mediatelly after scheduling read operations for the nfc adapter.
NonDocumentTypeChildNode - Web APIs
nondocumenttypechildnode.previouselementsibling read only returns the element im
mediately prior to this node in its parent's children list, or null if there is no element in the list prior to this node.
... nondocumenttypechildnode.nextelementsibling read only returns the element im
mediately following this node in its parent's children list, or null if there is no element in the list following this node.
Using the Payment Request API - Web APIs
for this demo, simulate im
mediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }) this object provides the developer with access to details they can use to complete the logical steps required after the payment completes, such as an email address to contact the customer, a shipping address for ...
...for this demo, simulate im
mediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kind...
PerformanceNavigationTiming.domComplete - Web APIs
the domcomplete read-only property returns a timestamp representing the time value equal to the time im
mediately before the user agent sets the current document readiness of the current document to complete.
... syntax perfentry.domcomplete; return value a timestamp representing a time value equal to the time im
mediately before the user agent sets the current document readiness of the current document to complete.
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
the domcontentloadedeventend read-only property returns a timestamp representing the time value equal to the time im
mediately after the current document's domcontentloaded event completes.
... syntax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time im
mediately after the current document's domcontentloaded event completes.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
the domcontentloadedeventstart read-only property returns a timestamp representing the time value equal to the time im
mediately before the user agent fires the domcontentloaded event at the current document.
... syntax perfentry.domcontentloadedeventstart; return value a timestamp representing the time value equal to the time im
mediately before the user agent fires the domcontentloaded event at the current document.
PerformanceNavigationTiming.domInteractive - Web APIs
the dominteractive read-only property returns a timestamp representing the time value equal to the time im
mediately before the user agent sets the current document readiness of the current document to interactive.
... syntax perfentry.dominteractive; return value a timestamp representing the time value equal to the time im
mediately before the user agent sets the current document readiness of the current document to interactive.
PerformanceNavigationTiming.loadEventStart - Web APIs
the loadeventstart read-only property returns a timestamp representing the time value equal to the time im
mediately before the load event of the current document is fired.
... syntax perfentry.loadeventstart; return value a timestamp representing a time value equal to the time im
mediately before the load event of the current document is fired.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
the unloadeventend read-only property returns a timestamp representing the time value equal to the time im
mediately after the user agent finishes the unload event of the previous document.
... syntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time im
mediately after the user agent finishes the unload event of the previous document.
PerformanceNavigationTiming.unloadEventStart - Web APIs
the unloadeventstart read-only property returns a timestamp representing the time value equal to the time im
mediately before the user agent starts the unload event of the previous document.
... syntax perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time im
mediately before the user agent starts the unload event of the previous document.
PerformanceResourceTiming.connectStart - Web APIs
the connectstart read-only property returns the timestamp im
mediately before the user agent starts establishing the connection to the server to retrieve the resource.
... syntax resource.connectstart; return value a domhighrestimestamp im
mediately before the browser starts to establish the connection to the server to retrieve the resource.
PerformanceResourceTiming.domainLookupEnd - Web APIs
the domainlookupend read-only property returns the timestamp im
mediately after the browser finishes the domain name lookup for the resource.
... syntax resource.domainlookupend; return value a domhighrestimestamp representing the time im
mediately after the browser finishes the domain name lookup for the resource.
PerformanceResourceTiming.domainLookupStart - Web APIs
the domainlookupstart read-only property returns the timestamp im
mediately before the browser starts the domain name lookup for the resource.
... syntax resource.domainlookupstart; return value a domhighrestimestamp im
mediately before the browser starts the domain name lookup for the resource.
PerformanceResourceTiming.requestStart - Web APIs
the requeststart read-only property returns a timestamp of the time im
mediately before the browser starts requesting the resource from the server, cache, or local resource.
... syntax resource.requeststart; return value a domhighrestimestamp representing the time im
mediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
PerformanceResourceTiming.responseEnd - Web APIs
the responseend read-only property returns a timestamp im
mediately after the browser receives the last byte of the resource or im
mediately before the transport connection is closed, whichever comes first.
... syntax resource.responseend; return value a domhighrestimestamp im
mediately after the browser receives the last byte of the resource or im
mediately before the transport connection is closed, whichever comes first.
PerformanceResourceTiming.responseStart - Web APIs
the responsestart read-only property returns a timestamp im
mediately after the browser receives the first byte of the response from the server, cache, or local resource.
... syntax resource.responsestart; return value a domhighrestimestamp im
mediately after the browser receives the first byte of the response from the server.
PerformanceResourceTiming.secureConnectionStart - Web APIs
the secureconnectionstart read-only property returns a timestamp im
mediately before the browser starts the handshake process to secure the current connection.
... syntax resource.secureconnectionstart; return value if the resource is fetched over a secure connection, a domhighrestimestamp im
mediately before the browser starts the handshake process to secure the current connection.
RTCDataChannel.send() - Web APIs
exceptions invalidstateerror since the data channel uses a separate transport channel from the
media content, it must establish its own connection; if it hasn't finished doing so (that is, its readystate is "connecting"), this error occurs without sending or buffering the data.
...in this scenario, the underlying transport is im
mediately closed.
RTCIceCandidate.sdpMLineIndex - Web APIs
the read-only sdpmlineindex property on the rtcicecandidate interface is a zero-based index of the m-line describing the
media associated with the candidate.
... syntax var sdpmlineindex = rtcicecandidate.sdpmlineindex; value a number containing a 0-based index into the set of m-lines providing
media descriptions, indicating which
media source is associated with the candidate, or null if no such association is available.
RTCIceCandidate.sdpMid - Web APIs
the read-only property sdpmid on the rtcicecandidate interface returns a domstring specifying the
media stream identification tag of the
media component with which the candidate is associated.
... syntax var sdpmid = rtcicecandidate.sdpmid; value a domstring which uniquely identifies the source
media component from which the candidate draws data, or null if no such association exists for the candidate.
RTCIceCandidate - Web APIs
sdpmid read only a domstring specifying the candidate's
media stream identification tag which uniquely identifies the
media stream within the component with which the candidate is associated, or null if no such association exists.
... sdpmlineindex read only if not null, sdpmlineindex indicates the zero-based index number of the
media description (as defined in rfc 4566) in the sdp with which the candidate is associated.
RTCIceCandidateInit - Web APIs
sdpmid optional the identification tag of the
media stream with which the candidate is associated, or null if there is no associated
media stream.
... sdpmlineindex optional the zero-based index of the m-line within the sdp of the
media description with which the candidate is associated, or null if no such associated exists.
RTCInboundRtpStreamStats.qpSum - Web APIs
note: this value is only available for video
media.
...you can, for example, use the value of rtcreceivedrtpstreamstats.framesdecoded if receiving the
media or rtcsentrtpstreamstats.framesencoded if sending it to get the number of frames handled so far, and compute an average from there.
RTCInboundRtpStreamStats.sliCount - Web APIs
an sli packet is used by a decoder to let the encoder know that it's detected corruption of one or more consecutive macroblocks (in scan order) in the received
media.
... note: this value is only present for video
media.
RTCInboundRtpStreamStats.trackId - Web APIs
the trackid property of the rtcinboundrtpstreamstats dictionary indicates the id of the rtcreceiveraudiotrackattachmentstats or rtcreceivervideotrackattachmentstats object representing the
mediastreamtrack which is receiving the incoming
media.
... syntax var trackstatsid = rtcinboundrtpstreamstats.trackid; value a domstring containing the id of the rtcreceiveraudiotrackattachmentstats or rtcreceivervideotrackattachmentstats object representing the track which is receiving the
media from this rtp session.
RTCOutboundRtpStreamStats.firCount - Web APIs
available only on video
media.
... the higher fircount is, the more often frames were dropped, which may be an indication that the
media's bit rate is too high for the available bandwidth, or that the receiving device is overburdened and is therefore unable to process the incoming data.
RTCOutboundRtpStreamStats.sliCount - Web APIs
an sli packet is used by a decoder to let the encoder (the sender) know that it's detected corruption of one or more consecutive macroblocks, in scan order, in the received
media.in general, what's usually of interest is that the higher this number is, the more the stream data is becoming corrupted between the sender and the receiver, causing the receiver to request retransmits or to drop frames entirely.
... note: this value is only present for video
media.
RTCOutboundRtpStreamStats.trackId - Web APIs
the trackid property of the rtcoutboundrtpstreamstats dictionary indicates the id of the rtcsenderaudiotrackattachmentstats or rtcsendervideotrackattachmentstats object representing the
mediastreamtrack which is being sent on this stream.
... syntax var trackstatsid = rtcoutboundrtpstreamstats.trackid; value a domstring containing the id of the rtcsenderaudiotrackattachmentstats or rtcsendervideotrackattachmentstats object representing the track which is the source of the
media being sent on this stream.
RTCPeerConnection.addIceCandidate() - Web APIs
operationerror this can happen for a number of reasons: the value specified for sdpmid is non-null and doesn't match the
media description id of any
media description included within the remotedescription.
... the specified value of sdpmlineindex is greater than or equal to the number of
media descriptions included in the remote description.
RTCPeerConnection.createAnswer() - Web APIs
the answer contains information about any
media already attached to the session, codecs and options supported by the browser, and any ice candidates already gathered.
...}) .catch(handlegetuser
mediaerror); this asks rtcpeerconnection to create and return a new answer.
RTCPeerConnection.getStreamById() - Web APIs
the rtcpeerconnection.getstreambyid() method returns the
mediastream with the given id that is associated with local or remote end of the connection.
... syntax var
mediastream = pc.getstream(id); parameters id is a domstring corresponding to the stream to return.
RTCPeerConnection.ontrack - Web APIs
the function receives as input the event object, of type rtctrackevent; this event is sent when a new incoming
mediastreamtrack has been created and associated with an rtcrtpreceiver object which has been added to the set of receivers on connection.
...this information includes the
mediastreamtrack object representing the new track, the rtcrtpreceiver and rtcrtptransceiver, and a list of
mediastream objects which indicates which stream or streams the track is part of..
RTCPeerConnection: removestream event - Web APIs
the obsolete removestream event was sent to an rtcpeerconnection to inform it that a
mediastream had been removed from the connection.
... bubbles no cancelable no interface
mediastreamevent event handler property rtcpeerconnection.onremovestream important: this event has been removed from the webrtc specification in favor of the existing removetrack event on the remote
mediastream and the corresponding
mediastream.onremovetrack event handler property of the remote
mediastream.
RTCRtpCodecCapability - Web APIs
the webrtc api's rtcrtpcodeccapability dictionary provides information describing the capabilities of a single
media codec.
... mimetype a domstring indicating the codec's mime
media type and subtype.
RTCRtpContributingSource.rtpTimestamp - Web APIs
the read-only rtptimestamp property of the rtcrtpcontributingsource interface returns a domhighrestimestamp indicating the source-generated time at which the
media contained int he packet was first sampled or obtained.
... syntax let rtptimestamp = rtcrtpcontributingsource.rtptimestamp value an integer value specifiying a source-generated timestamp indicating the time at which the
media in this packet, scheduled for play out at the time indicated by timestamp, was initially sampled or generated.
RTCRtpContributingSource.source - Web APIs
x for androidopera for androidsafari on iossamsung internetsourcechrome full support 59edge full support ≤79firefox full support 59disabled full support 59disabled disabled from version 59: this feature is behind the
media.peerconnection.rtpsourcesapi.enable preference (needs to be set to true).
... webview android full support 59chrome android full support 59firefox android full support 59disabled full support 59disabled disabled from version 59: this feature is behind the
media.peerconnection.rtpsourcesapi.enable preference (needs to be set to true).
RTCRtpReceiver.track - Web APIs
the track read-only property of the rtcrtpreceiver interface returns the
mediastreamtrack associated with the current rtcrtpreceiver instance.
... syntax var
mediastreamtrack = rtcrtpreceiver.track value a
mediastreamtrack instance.
RTCRtpSender.setStreams() - Web APIs
the rtcrtpsender method setstreams() associates the sender's track with the specified
mediastream or array of
mediastream objects.
... syntax rtcrtpsender.setstreams(
mediastream); rtcrtpsender.setstreams([
mediastream...]); parameters
mediastream or [
mediastream...] optional an
mediastream object—or an array of multiple
mediastream objects—identifying the streams to which the rtcrtpsender's track belongs.
RTCRtpSender.track - Web APIs
the track read-only property of the rtcrtpsender interface returns the
mediastreamtrack which is being handled by the rtcrtpsender.
... syntax var
mediastreamtrack = rtcrtpsender.track value a
mediastreamtrack object representing the
media associated with the rtcrtpsender.
RTCRtpStreamStats.pliCount - Web APIs
this may trigger the sender to send a full frame in order to allow the receiver to re-synchronize, since lost data may be an irrecoverable situation for decoding
media.
... note: this value is only available on the receiver, and only for video
media.
RTCRtpStreamStats.qpSum - Web APIs
note: this value is only available for video
media.
...you can, for example, use the value of rtcreceivedrtpstreamstats.framesdecoded if receiving the
media or rtcsentrtpstreamstats.framesencoded if sending it to get the number of frames handled so far, and compute an average from there.
RTCRtpStreamStats.sliCount - Web APIs
an sli packet is used by a decoder to let the encoder know that it's detected corruption of one or more consecutive macroblocks in the received
media.
... note: this value is sent by the sender to the receiver and is only present for video
media.
RTCRtpTransceiver.receiver - Web APIs
the read-only receiver property of webrtc's rtcrtptransceiver interface indicates the rtcrtpreceiver responsible for receiving and decoding incoming
media data for the transceiver's stream.
... syntax var rtpreceiver = rtcrtptransceiver.receiver; value an rtcrtpreceiver object which is responsible for receiving and decoding incoming
media data whose
media id is the same as the current value of mid.
RTCRtpTransceiver.sender - Web APIs
the read-only sender property of webrtc's rtcrtptransceiver interface indicates the rtcrtpsender responsible for encoding and sending outgoing
media data for the transceiver's stream.
... syntax var rtpsender = rtcrtptransceiver.sender; value an rtcrtpsender object used to encode and send
media whose
media id matches the current value of mid.
RTCRtpTransceiver.stop() - Web APIs
usage notes when you call stop() on a transceiver, the sender im
mediately stops sending
media and each of its rtp streams are closed using the rtcp "bye" message.
... the receiver then stops receiving
media; the receiver's track is stopped, and the transceiver's direction is changed to stopped, and renegotiation is triggered by sending a negotiationneeded event to the rtcpeerconnection.
RTCRtpTransceiverInit - Web APIs
sendencodings optional a list of encodings to allow when sending rtp
media from the rtcrtpsender.
... streams optional a list of
mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
RTCTrackEvent.streams - Web APIs
the webrtc api interface rtctrackevent's read-only streams property specifies an array of
mediastream objects, one for each of the streams that comprise the track being added to the rtcpeerconnection.
... syntax var streams = trackevent.streams; value an array of
mediastream objects, one for each stream that make up the new track.
RTCTrackEvent.track - Web APIs
the webrtc api interface rtctrackevent's read-only track property specifies the
mediastreamtrack that has been added to the rtcpeerconnection.
... syntax var track = trackevent.track; value a
mediastreamtrack indicating the track which has been added to the rtcpeerconnection.
RTCTrackEventInit.streams - Web APIs
the rtctrackeventinit dictionary's optional streams property provides an array containing a
mediastream object for each of the streams associated with the event's track.
... syntax var trackeventinit = { receiver: rtpreceiver, track:
mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var streamlist = trackeventinit.streams; value an array of
mediastream objects, one for each stream which make up the track.
RTCTrackEventInit.track - Web APIs
the rtctrackeventinit dictionary's track property specifies the
mediastreamtrack associated with the track event.
... syntax var trackeventinit = { receiver: rtpreceiver, track:
mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var track = trackeventinit.track; value a
mediastreamtrack representing the track with which the event is associated.
ReportingObserver - Web APIs
ion(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of
mediadevices.getuser
media(): if(navigator.mozgetuser
media) { navigator.mozgetuser
media( constraints, success, failure); } else { navigator.getuser
media( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report detai...
... note: if you look at the complete source code, you'll notice that we actually call the deprecated getuser
media() method twice.
Reporting API - Web APIs
ion(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of
mediadevices.getuser
media(): if(navigator.mozgetuser
media) { navigator.mozgetuser
media( constraints, success, failure); } else { navigator.getuser
media( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report detai...
... note: if you look at the complete source code, you'll notice that we actually call the deprecated getuser
media() method twice.
Resource Timing API - Web APIs
the first property in the processing model is starttime which returns the timestamp im
mediately before the resource loading process begins.
...the next stages are connectstart and connectend which are the timestamps im
mediately before and after connecting to the server, respectively.
SVGSVGElement - Web APIs
in environments that do not support interactivity (e.g., print
media), then redraw shall not be suspended.
... svgsvgelement.forceredraw() in rendering environments supporting interactivity, forces the user agent to im
mediately redraw all regions of the viewport that require updating.
SVGTransformList - Web APIs
any changes made to the item are im
mediately reflected in the list.
...any changes made to the item are im
mediately reflected in the list.
ServiceWorkerGlobalScope.skipWaiting() - Web APIs
use this method with clients.claim() to ensure that updates to the underlying service worker take effect im
mediately for both the current client and all other active clients.
... syntax serviceworkerglobalscope.skipwaiting().then(function() { //do something }); returns a promise that im
mediately resolves with undefined.
SourceBuffer.appendStream() - Web APIs
the appendstream() method of the sourcebuffer interface appends
media segment data from a readablestream object to the sourcebuffer.
... syntax sourcebuffer.appendstream(stream, maxsize); parameters stream the readablestream that is the source of the
media segment data you want to append to the sourcebuffer.
SourceBuffer.removeAsync() - Web APIs
the removeasync() method of the sourcebuffer interface starts the process of asynchronously removing from the sourcebuffer
media segments found within a specific time range.
... specification status comment
media source extensions recommendation initial definition.
SourceBufferList - Web APIs
the source buffer list containing the sourcebuffers appended to a particular
mediasource can be retrieved using the
mediasource.sourcebuffers property.
... specifications specification status comment
media source extensionsthe definition of 'sourcebufferlist' in that specification.
SpeechSynthesis.cancel() - Web APIs
if an utterance is currently being spoken, speaking will stop im
mediately.
...this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.cancel(); // utterance1 stops being spoken im
mediately, and both are removed from the queue specifications specification status comment web speech apithe definition of 'cancel()' in that specification.
Storage Access API - Web APIs
design properties unique to firefox are summarized here: if the embedded origin tracker.example has already obtained first-party storage access on the top-level origin foo.example, and the user visits a page from foo.example embedding a page from tracker.example again in less than 30 days, the embedded origin will have storage access im
mediately when loading.
... if a page from top-level origin foo.example embeds more than one <iframe> from tracker.example, and one of those <iframe>s uses the storage access api in order to obtain storage access successfully, all other iframes from tracker.example on foo.example top-level origins will im
mediately gain storage access as well, without needing to call requeststorageaccess() separately.
Using writable streams - Web APIs
the first object can contain up to four members, all of which are optional: start(controller) — a method that is called once, im
mediately after the writablestream is constructed.
... when abort is called, any previously enqueued chunks are just thrown away im
mediately and then the stream is moved to an errored state.
TextTrack: cuechange event - Web APIs
this happens even if the track isn't associated with a
media element.
... if the track is associated with a
media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement.
TextTrack - Web APIs
the texttrack interface—part of the api for handling webvtt (text tracks on
media presentations)—describes and controls the text track associated with a particular <track> element.
...track cues are active if the current playback position of the
media is between the cues' start and end times.
TrackDefault - Web APIs
the trackdefault interface provides a sourcebuffer with kind, label, and language information for tracks that do not contain this information in the initialization segments of a
media chunk.
... properties trackdefault.type read only returns the type of track that this sourcebuffer's
media segment data relates to (i.e.
TrackEvent.track - Web APIs
the read-only track property of the trackevent interface specifies the
media track object to which the event applies.
... syntax track = trackevent.track; value an object which is one of the types audiotrack, videotrack, or texttrack, depending on the type of
media represented by the track.
VTTCue() - Web APIs
this is the time, given in seconds and fractions of a second, denoting the beginning of the range of the
media data to which this cue applies.
... for example, if a cue is to be visible from 50 seconds to a one minute, five and a half seconds in the
media's playback, starttime will be 50.0.
VideoTrack.sourceBuffer - Web APIs
the read-only videotrack property sourcebuffer returns the sourcebuffer that created the track, or null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the
mediasource.sourcebuffers attribute of its parent
media source.
... specifications specification status comment
media source extensionsthe definition of 'videotrack: sourcebuffer' in that specification.
Using textures in WebGL - Web APIs
// until then put a single pixel in the texture so we can // use it im
mediately.
...this makes the texture im
mediately usable as a solid blue color even though it may take a few moments for our image to download.
A simple RTCDataChannel sample - Web APIs
the user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can im
mediately begin to type, enabling the "send" and "disconnect" buttons, now that they're usable, and disabling the "connect" button, since it is not needed when the conneciton is open.
...the rest of this method is just some user experience sugar -- the input box is emptied and re-focused so the user can im
mediately begin typing another message.
Using WebRTC data channels - Web APIs
once you've established a webrtc peer connection using the rtcpeerconnection interface, you're able to send and receive
media data between the two peers on the connection.
... the rtcdatachannel object is returned im
mediately by createdatachannel(); you can tell when the connection has been made successfully by watching for the open event to be sent to the rtcdatachannel.
Writing WebSocket servers - Web APIs
if any header is not understood or has an incorrect value, the server should send a 400 ("bad request")} response and im
mediately close the socket.
...fin and opcode details are shown only for the client: client: fin=1, opcode=0x1, msg="hello" server: (process complete message im
mediately) hi.
Using the Web Animations API - Web APIs
we’ll talk more about alice’s animation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will im
mediately run after it is called.
... to prevent the cake from eating itself up before the user has had the chance to click on it, we call animation.pause() on it im
mediately after it is defined, like so: nommingcake.pause(); we can now use the animation.play() method to run it whenever we’re ready: nommingcake.play(); specifically, we want to link it to alice’s animation, so she gets bigger as the cupcake gets eaten.
Window.openDialog() - Web APIs
the call to opendialog() returns im
mediately.
... inside the dialog code, you can set the properties as follows: var retvals = window.arguments[2]; retvals.address = enteredaddress; retvals.delivery = "im
mediate"; specification this is not part of any specification.
Worker.terminate() - Web APIs
the terminate() method of the worker interface im
mediately terminates the worker.
... example the following code snippet shows creation of a worker object using the worker() constructor, which is then im
mediately terminated.
XRSession - Web APIs
the select event is sent after the selectstart event is sent and im
mediately before the selectend event is sent.
...it is sent im
mediately before the squeezeend event is sent to indicate that the squeeze action is over.
Using the alertdialog role - Accessibility
the alertdialog role is used to notify the user of urgent information that demands the user's im
mediate attention.
...in other words, when a dialog's information and controls require the user's im
mediate attention alertdialog should be used instead of dialog.
ARIA Test Cases - Accessibility
when the user changes the state, the new state should be spoken im
mediately.
... as expandable items are opened and closed, the state change should be announced im
mediately.
ARIA: alert role - Accessibility
it is perfect for situations such as when a user fills out a form and javascript is used to add an error message - the alert would im
mediately read out the message.
... <button type="button" onclick="triggeralert">trigger alert</button> <p class="alert">the alert will trigger when the button is pressed.</p> function triggeralert() { var alertel = document.queryselector('.alert'); alertel.addattribute("role", "alert"); } accessibility concerns the alert role should read out content that has changed, or bring the user's attention to it im
mediately, so it should not be used for static content or used regularly.
ARIA: contentinfo role - Accessibility
one contentinfo landmark per page the <body> element there should be only one contentinfo landmark per document, used as the im
mediate descendant of the <body> element.
... best practices prefer html when it is an im
mediate descendant of the <body> element, using the <footer> element will automatically communicate a section has a role of contentinfo (save for a known issue in voiceover).
Cognitive accessibility - Accessibility
timed content should also be avoided, with exceptions for non-interactive synchronized
media and real-time events.
... pronunciation there are multiple techniques that can help teach people how to pronounce words: provide the pronunciation im
mediately following the word.
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
syntax values auto use "regular" scrolling, where the content im
mediately ceases to scroll when you remove your finger from the touchscreen.
... </p> </div> css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-scrolling: auto; /* stops scrolling im
mediately */ } results specifications not part of any standard.
::backdrop - CSS: Cascading Style Sheets
the ::backdrop css pseudo-element is a box the size of the viewport which is rendered im
mediately beneath any element being presented in full-screen mode.
... when multiple elements have been placed into full-screen mode, the backdrop is drawn im
mediately beneath the frontmost such element, and on top of the older full-screen elements.
::cue-region - CSS: Cascading Style Sheets
this can be used to style captions and other cues in
media with vtt tracks.
...the only exception is that background and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the
media.
::cue - CSS: Cascading Style Sheets
this can be used to style captions and other cues in
media with vtt tracks.
...the only exception is that background and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the
media.
@keyframes - CSS: Cascading Style Sheets
the @keyframes css at-rule controls the inter
mediate steps in a css animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
... this gives more control over the inter
mediate steps of the animation sequence than transitions.
any-hover - CSS: Cascading Style Sheets
the any-hover css
media feature can be used to test whether any available input mechanism can hover over elements.
... examples testing whether input methods can hover html <a href="#">try hovering over me!</a> css @
media (any-hover: hover) { a:hover { background: yellow; } } result specifications specification status comment
media queries level 4the definition of 'any-hover' in that specification.
color-gamut - CSS: Cascading Style Sheets
the color-gamut css
media feature can be used to test the approximate range of colors that are supported by the user agent and the output device.
... examples html <p>this is a test.</p> css @
media (color-gamut: srgb) { p { background: #f4ae8a; } } result specifications specification status comment
media queries level 4the definition of 'color-gamut' in that specification.
display-mode - CSS: Cascading Style Sheets
the display-mode css
media feature can be used to test the display mode of an application.
... (none) examples @
media all and (display-mode: fullscreen) { body { margin: 0; border: 5px solid black; } } specifications specification status comment web app manifestthe definition of 'display-mode' in that specification.
hover - CSS: Cascading Style Sheets
the hover css
media feature can be used to test whether the user's primary input mechanism can hover over elements.
... examples html <a href="#">try hovering over me!</a> css @
media (hover: hover) { a:hover { background: yellow; } } result specifications specification status comment
media queries level 4the definition of 'hover' in that specification.
inverted-colors - CSS: Cascading Style Sheets
the inverted-colors css
media feature can be used to test whether the user agent or underlying os is inverting colors.
...if you're not, it should be red on light gray.</p> <p>if the text is gray, your browser doesn't support the `inverted-colors`
media feature.</p> css p { color: gray; } @
media (inverted-colors: inverted) { p { background: black; color: yellow; } } @
media (inverted-colors: none) { p { background: #eee; color: red; } } result specifications specification status comment
media queries level 5the definition of 'inverted-colors' in that specification.
light-level - CSS: Cascading Style Sheets
the light-level css
media feature can be used to test the ambient light level.
... @
media (light-level: normal) { p { background: url("texture.jpg"); color: #333; } } @
media (light-level: dim) { p { background: #222; color: #ccc; } } @
media (light-level: washed) { p { background: white; color: black; font-size: 2em; } } specifications specification status comment
media queries level 5the definition of 'light-level...
overflow-block - CSS: Cascading Style Sheets
the overflow-block css
media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.
...sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css @
media (overflow-block: scroll) { p { color: red; } } result specifications specification status comment
media queries level 4the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
the overflow-inline css
media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis.
...sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css p { white-space: nowrap; } @
media (overflow-inline: scroll) { p { color: red; } } result specifications specification status comment
media queries level 4the definition of 'overflow-inline' in that specification.
pointer - CSS: Cascading Style Sheets
the pointer css
media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.
... html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @
media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @
media (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status comment
media queries level 4the definition of '...
prefers-contrast - CSS: Cascading Style Sheets
the prefers-contrast css
media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast.
... html <div class="contrast">low contrast box</div> css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @
media (prefers-contrast: high) { .contrast { outline: 2px solid black; } } result specifications specification status comment
media queries level 5the definition of 'prefers-contrast' in that specification.
resolution - CSS: Cascading Style Sheets
the resolution css
media feature can be used to test the pixel density of the output device.
... examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @
media (resolution: 150dpi) { p { color: red; } } /* minimum resolution */ @
media (min-resolution: 72dpi) { p { text-decoration: underline; } } /* maximum resolution */ @
media (max-resolution: 300dpi) { p { background: yellow; } } result specifications specification status comment
media queriesthe definition of 'resolution' in that specification.
scripting - CSS: Cascading Style Sheets
the scripting css
media feature can be used to test whether scripting (such as javascript) is available.
...:-)</p> css p { color: lightgray; } @
media (scripting: none) { .script-none { color: red; } } @
media (scripting: initial-only) { .script-initial-only { color: red; } } @
media (scripting: enabled) { .script-enabled { color: red; } } result specifications specification status comment
media queries level 5the definition of 'scripting' in that specification.
update - CSS: Cascading Style Sheets
the update css
media feature can be used to test how frequently (if at all) the output device is able to modify the appearance of content.
... examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @
media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment
media queries level 4the definition of 'update' in that specification.
Adjacent sibling combinator - CSS: Cascading Style Sheets
the adjacent sibling combinator (+) separates two selectors and matches the second element only if it im
mediately follows the first element, and both are children of the same parent element.
... /* paragraphs that come im
mediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification.
Using CSS animations - CSS: Cascading Style Sheets
animations consist of two components, a style describing the css animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible inter
mediate waypoints.
... you can optionally include additional keyframes that describe inter
mediate steps between the start and end of the animation.
Border-image generator - CSS: Cascading Style Sheets
d-color: #eee; float: left; } /* * controls */ #controls { color: #444; margin: 10px 0 0 0; } #controls .category { height: 190px; min-width: 260px; margin: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 3px; float: left; box-shadow: 0 0 3px 0 #bababa; transition: all 0.25s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @
media (min-width: 880px) { #controls .category { width: 30%; margin-left: 1.66%; margin-right: 1.66%; } } @
media (max-width: 879px) { #controls .category { width: 37%; margin-left: 6.5%; margin-right: 6.5%; } } #controls .category .title { width: 100%; height: 30px; margin: 0 0 10px 0; line-height: 25px; text-align: center; color: #aaa; } #controls .category:hover .title { co...
...; } #unit-settings[data-active='true'] { opacity: 1; } #unit-settings[data-active='false'] { opacity: 0; top: -100px !important; } /* * css output code */ #output { padding: 10px; border: 2px dashed #888 !important; box-shadow: none !important; border-radius: 3px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } @
media (min-width: 880px) { #output { width: 63.33% !important; } } @
media (max-width: 879px) { #output { width: 87% !important; } } #output .title { width: 100%; height: 30px; margin: 0 0 10px 0; line-height: 25px; text-align: center; color: #aaa; } #output .css-property { width: 100%; margin: 0; color: #555; font-size: 14px; line-height: 18px; float: left; } #output .css-prop...
Box-shadow generator - CSS: Cascading Style Sheets
lock; position: absolute; z-index: -1; } /******************************************************************************/ /******************************************************************************/ /** * controls */ .wrap-left { float: left; overflow: hidden; } .wrap-right { float: right; overflow: hidden; } .wrap-left > * { float: left; } .wrap-right > * { float: right; } @
media (min-width: 960px) { .wrap-left { width: 45%; } .wrap-right { width: 55%; } } @
media (max-width: 959px) { .wrap-left { width: 30%; } .wrap-right { width: 70%; } } #controls { color: #444; margin: 10px 0 0 0; } #controls .category { width: 500px; margin: 0 auto 20px; padding: 0; } #controls .category .title { width: 100%; height: 1.5em; line-height: 1.5em; colo...
...r: #aaa; text-align: right; } #controls .category > .group { border: 1px solid #ccc; border-radius: 3px; } /** * color picker */ @
media (min-width: 960px) { #controls .colorpicker { width: 420px; } } @
media (max-width: 959px) { #controls .colorpicker { width: 210px; } } #colorpicker { width: 100%; margin: 0 auto; } #colorpicker .gradient { width: 200px; height: 200px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color:...
Using feature queries - CSS: Cascading Style Sheets
syntax css feature queries are part of the css conditional rules module, which also contains the
media query @
media rule; when you use feature queries, you will find they behave in a similar way to
media queries.
... the difference is that with a
media query you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for css features.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
the order property and grid placement do not affect ordering in non-visual
media (such as speech).
... create a responsive, and responsible grid with a solid document you can begin to add your layout, it is likely you will be using
media queries to create additional columns and make changes for different screen sizes and devices.
CSS selectors - CSS: Cascading Style Sheets
this means that the second element follows the first (though not necessarily im
mediately), and both share the same parent.
... syntax: a ~ b example: p ~ span will match all <span> elements that follow a <p>, im
mediately or not.
Layout and the containing block - CSS: Cascading Style Sheets
if the position property is fixed, the containing block is established by the viewport (in the case of continuous
media) or the page area (in the case of paged
media).
...it has the dimensions of the viewport (for continuous
media) or the page area (for paged
media).
Syntax - CSS: Cascading Style Sheets
they are used to convey meta-data information (like @charset or @import), conditional information (like @
media or @document), or descriptive information (like @font-face).
...these statements only apply if a specific condition is matched: the @
media at-rule content is applied only if the device on which the browser runs matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on.
animation - CSS: Cascading Style Sheets
consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion
media query to create a complimentary experience for users who have expressed a preference for no animated experiences.
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion
media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimation-duration: 0sanimation-timing-function: easeanimation-delay: 0sanimation-iteration-count: 1animation-direction: normalanimation-fill-mode: noneanimation-play-state: runningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:animation-name: as specifiedanimation-duration: as specifiedanimation-timing-function: as sp...
<blend-mode> - CSS: Cascading Style Sheets
any change occurs im
mediately.
...on> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://
media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specific...
<color> - CSS: Cascading Style Sheets
system colors in forced colors mode (detectable with the forced-colors
media query), most colors are restricted into a user- and browser-defined palette.
... -moz-win-
mediatext should be used for text in objects with -moz-appearance: -moz-win-
media-toolbox.
content - CSS: Cascading Style Sheets
html <a href="http://www.mozilla.org/">mozilla home page</a> css a::before { content: url("https://mozorg.cdn.mozilla.net/
media/img/favicon.ico") / " mozilla: "; font: x-small arial, sans-serif; color: gray; } result targeting classes this example inserts additional text after special items in a list.
... html <ul> <li><a id="moz" href="http://www.mozilla.org/"> mozilla home page</a></li> <li><a id="mdn" href="https://developer.mozilla.org/"> mozilla developer network</a></li> </ul> css a { text-decoration: none; border-bottom: 3px dotted navy; } a::after { content: " (" attr(id) ")"; } #moz::before { content: url("https://mozorg.cdn.mozilla.net/
media/img/favicon.ico"); } #mdn::before { content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png"); } li { margin: 1em; } result element replacement this example replaces an element's content with an image.
<dimension> - CSS: Cascading Style Sheets
syntax the syntax of <dimension> is a <number> im
mediately followed by a unit which is an identifier.
... examples valid dimensions 12px 12 pixels 1rem 1 rem 1.2pt 1.2 points 2200ms 2200 milliseconds 5s 5 seconds 200hz 200 hertz 200hz 200 hertz (values are case insensitive) invalid dimensions 12 px the unit must come im
mediately after the number.
transition-delay - CSS: Cascading Style Sheets
the delay may be zero, positive, or negative: a value of 0s (or 0ms) will begin the transition effect im
mediately.
... a negative value will begin the transition effect im
mediately, and partway through the effect.
transition-timing-function - CSS: Cascading Style Sheets
the transition-timing-function css property sets how inter
mediate values are calculated for css properties being affected by a transition effect.
... consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion
media query to create a complimentary experience for users who have expressed a preference for no animated experiences.
CSS: Cascading Style Sheets
css describes how elements should be rendered on screen, on paper, in speech, or on other
media.
... css key concepts: the syntax and forms of the language specificity, inheritance and the cascade css units and values box model and margin collapse the containing block stacking and block-formatting contexts initial, computed, used, and actual values css shorthand properties css flexible box layout css grid layout
media queries animation cookbook the css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites.
WAI ARIA Live Regions/API Support - Developer guides
t about to go away) object shown or inserted children_changed::add (fired on the parent, with event data pointing to the child index of the inserted accessible object) event_object_show* (fired on the actual new accessible object) object replaced with different object (this happens especially if an object's interfaces or role changes) children_changed::remove followed im
mediately by children_change::add event_object_hide followed im
mediately by event_object_show text removed text_changed::delete ia2_event_text_removed (use iaccessibletext::get_oldtext to retrieve the offsets and removed text) text inserted text_changed::insert ia2_event_text_inserted (use iaccessibletext::get_newtext to retrieve the offsets and inserted text) ...
...text replaced text_changed::delete followed im
mediately by text_changed::insert ia2_event_text_removed followed im
mediately by ia2_event_text_inserted * we do not use msaa's create/destroy at the request of screen reader vendors, who avoid those events because they cause crashes on some important system -- show/hide are the equivalent of those events.
Overview of events and handlers - Developer guides
events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as
media stream playback or animation timing.
... the window object, such as due to resizing the browser, the window.screen object, such as due to changes in device orientation, the document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the
media objects such as audio and video, when the
media stream players change state.
HTML5 Parser - Developer guides
the syntax <foo/> opens and im
mediately closes the foo element if it is a mathml or svg element (i.e.
... to deal with legacy pages where authors have pasted partial svg fragments into html (who knows why) or used a <math> tag for non-mathml purposes, attempts to nest various common html elements as children of svg elements (without foreignobject) will im
mediately break out of svg or mathml context.
Mobile Web Development - Developer guides
it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window size changes the use of
media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.
... you can use the pointer or any-pointer
media query to load different css on a touch-enabled device.
Developer guides
audio and video delivery we can deliver audio and video on the web in several 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.
<a>: The Anchor element - HTML: Hypertext Markup Language
can be used with or without a value: without a value, the browser will suggest a filename/extension, generated from various sources: the content-disposition http header the final segment in the url path the
media type (from the (content-type header, the start of a data: url, or blob.type for a blob: url) defining a value suggests it as the filename.
...links are not restricted to http-based urls — they can use any url scheme supported by browsers: sections of a page with fragment urls pieces of
media files with
media fragments telephone numbers with tel: urls email addresses with mailto: urls while web browsers may not support other url schemes, web sites can with registerprotocolhandler() hreflang hints at the human language of the linked url.
<dt>: The Description Term element - HTML: Hypertext Markup Language
it is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the im
mediate next <dd> element.
...the end tag may be omitted if this element is im
mediately followed by another <dt> or a <dd> element, or if there is no more content in the parent element.
<p>: The Paragraph element - HTML: Hypertext Markup Language
paragraphs are usually represented in visual
media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but html paragraphs can be any structural grouping of related content, such as images or form fields.
...the end tag may be omitted if the <p> element is im
mediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
<script>: The Script element - HTML: Hypertext Markup Language
to allow error logging for sites which use a separate domain for static
media, use this attribute.
... notes scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed im
mediately, before the browser continues to parse the page.
Link types - HTML: Hypertext Markup Language
otherwise, the link defines an alternative page, of one of these types: for another medium, like a handheld device (if the
media attribute is set) in another language (if the hreflang attribute is set), in another format, such as a pdf (if the type attribute is set) a combination of these <a>, <area>, <link> <form> archives defines a hyperlink to a document that contains an archive link to this one.
... if there are multiple <link rel="icon">s, the browser uses their
media, type, and sizes attributes to select the most appropriate icon.
Using the application cache - HTML: Hypertext Markup Language
files listed under the cache: section header (or im
mediately after the cache manifest line) are explicitly cached after they're downloaded for the first time.
... it's a good idea to set expires headers on your web server for *.appcache files to expire im
mediately.
HTML: Hypertext Markup Language
multi
media and embedding this module explores how to use html to include multi
media in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
... guide to
media types and formats on the web the <audio> and <video> elements allow you to play audio and video
media natively within your content without the need for external software support.
Data URLs - HTTP
syntax data urls are composed of four parts: a prefix (data:), a mime type indicating the type of data, an optional base64 token if non-textual, and the data itself: data:[<
mediatype>][;base64],<data> the
mediatype is a mime type string, such as 'image/jpeg' for a jpeg image file.
... lack of error handling invalid parameters in
media, or typos when specifying 'base64', are ignored, but no error is provided.
Feature Policy - HTTP
the features include: layout-inducing animations legacy image formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized
media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused.
... the features include (see features list): accelerometer ambient light sensor autoplay camera encrypted
media fullscreen geolocation gyroscope magnetometer microphone midi paymentrequest picture-in-picture usb vr / xr examples using feature policy see feature policy demos for example usage of many policies.
Accept-Patch - HTTP
the accept-patch response http header advertises which
media-type the server is able to understand.
...two common cases lead to this: a server receiving a patch request with an unsupported
media type could reply with 415 unsupported
media type and an accept-patch header referencing one or more supported
media types.
Content-Encoding - HTTP
the content-encoding entity header is used to compress the
media-type.
...it lets the client know how to decode in order to obtain the
media-type referenced by the content-type header.
CSP: script-src - HTTP
mediastream: allows
mediastream: uris to be used as a content source.
...if 'unsafe-eval' isn't specified with the script-src directive, the following methods are blocked and won't have any effect: eval() function() when passing a string literal like to methods like: window.settimeout("alert(\"hello world!\");", 500); window.settimeout window.setinterval window.setim
mediate window.execscript (ie < 11 only) strict-dynamic the 'strict-dynamic' source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
Content-Security-Policy - HTTP
media-src specifies valid sources for loading
media using the <audio> , <video> and <track> elements.
... content security policy 1.0 obsolete defines connect-src, default-src, font-src, frame-src, img-src,
media-src, object-src, report-uri, sandbox, script-src, and style-src.
Content-Type - HTTP
the content-type entity header is used to indicate the
media type of the resource.
... syntax content-type: text/html; charset=utf-8 content-type: multipart/form-data; boundary=something directives
media-type the mime type of the resource or the data.
Feature-Policy: display-capture - HTTP
the http feature-policy header display-capture directive controls whether or not the document is permitted to use screen capture api, i.e.,getdisplay
media() to capture the screen's contents.
... if display-capture is disabled in a document, the document will not be able to initiate screen capture via getdisplay
media().
HTTP headers - HTTP
inter
mediate proxies must retransmit these headers unmodified and caches must store them.
... content-type indicates the
media type of the resource.
Closures - JavaScript
notice that i defined an anonymous function that creates a counter, and then i call it im
mediately and assign the result to the counter variable.
...ar helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { (function() { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } })(); // im
mediate event listener attachment with the current value of item (preserved until iteration).
Grammar and types - JavaScript
the scope of x is not limited to the im
mediate if statement block.
...the first element of the car object defines a property, mycar, and assigns to it a new string, "saturn"; the second element, the getcar property, is im
mediately assigned the result of invoking the function (cartypes("honda")); the third element, the special property, uses an existing variable (sales).
Assertions - JavaScript
if the multiline flag is set to true, also matches im
mediately after a line break character.
...if the multiline flag is set to true, also matches im
mediately before a line break character.
Using Promises - JavaScript
result3) */ timing to avoid surprises, functions passed to then() will never be called synchronously, even with an already-resolved promise: promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2 instead of running im
mediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the javascript event loop, i.e.
... a good rule-of-thumb is to always either return or terminate promise chains, and as soon as you get a new promise, return it im
mediately, to flatten things: dosomething() .then(function(result) { return dosomethingelse(result); }) .then(newresult => dothirdthing(newresult)) .then(() => dofourththing()) .catch(error => console.error(error)); note that () => x is short for () => { return x; }.
JavaScript error reference - JavaScript
these errors can be a helpful debugging aid, but the reported problem isn't always im
mediately clear.
...use //# insteadsyntaxerror: a declaration in the head of a for-of loop can't have an initializersyntaxerror: applying the "delete" operator to an unqualified name is deprecatedsyntaxerror: for-in loop head declarations may not have initializerssyntaxerror: function statement requires a namesyntaxerror: identifier starts im
mediately after numeric literalsyntaxerror: illegal charactersyntaxerror: invalid regular expression flag "x"syntaxerror: missing ) after argument listsyntaxerror: missing ) after conditionsyntaxerror: missing : after property idsyntaxerror: missing ; before statementsyntaxerror: missing = in const declarationsyntaxerror: missing ] after element listsyntaxerror: missing formal parametersyntaxerror: mis...
Array.from() - JavaScript
more clearly, array.from(obj, mapfn, thisarg) has the same result as array.from(obj).map(mapfn, thisarg), except that it does not create an inter
mediate array.
... this is especially important for certain array subclasses, like typed arrays, since the inter
mediate array would necessarily have values truncated to fit into the appropriate type.
Function expression - JavaScript
a function expression can be used as an iife (im
mediately invoked function expression) which runs as soon as it is defined.
...the function returns the square of its argument: var x = function(y) { return y * y; }; using a function as a callback more commonly it is used as a callback: button.addeventlistener('click', function(event) { console.log('button is clicked!') }) using an im
mediately executed function expression an anonymous function is created and called: (function() { console.log('code runs!') })(); specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
this - JavaScript
similarly, the this binding is only affected by the most im
mediate member reference.
...the fact that the object is itself a member of o has no consequence; the most im
mediate reference is all that matters.
icons - Web app manifests
type a hint as to the
media type of the image.
... the purpose of this member is to allow a user agent to quickly ignore images with
media types it does not support.
Authoring MathML - MathML
cons: this may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc the interface is not user-friendly: only code editor without im
mediate display of the mathematical expression.
...instiki and
mediawiki are two wiki engines that support latex-to-mathml conversion.
CSS and JavaScript animation performance - Web Performance
even if an element is in the middle of a transition, the new transition starts from the current style im
mediately instead of jumping to the end css state.
...css animations consist of two components: a style describing the css animation, and a set of key frames that indicate the start and end states of the animation's style, as well as possible inter
mediate points.
Understanding latency - Web Performance
but websites generally involve multiple requests: the html includes requests for multiple css, scripts, and
media files.
... on a connection with low latency, requested resources will appear almost im
mediately.
Progressive web app structure - Progressive web apps (PWAs)
that way, the next time someone visits the app from the device, the ui loads from the cache im
mediately and any new content is requested from the server (if it isn’t available in the cache already).
...there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like viewport meta tag, css
media queries, flexbox, and css grid.
Progressive loading - Progressive web apps (PWAs)
this is all about deferring loading of as many resources as possible (html, css, javascript), and only loading those im
mediately that are really needed for the very first experience.
...we can also split css files and add
media types to them: <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css"
media="print"> this will tell the browser to load them only when the condition is met.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification im
mediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using th...
...*/ }); the data can be retrieved and then shown as a notification to the user im
mediately.
Structural overview of progressive web apps - Progressive web apps (PWAs)
that way, the next time someone visits the app from the device, the ui loads from the cache im
mediately and any new content is requested from the server (if it isn’t available in the cache already).
...there are so many varied devices with browsers — it's important to prepare your website so it works on different screen sizes, viewports or pixel densities, using technologies like the viewport meta tag, css
media queries, flexbox, and css grid.
arabic-form - SVG: Scalable Vector Graphics
only one element is using this attribute: <glyph> context notes value initial |
medial | terminal | isolated default value isolated animatable no initial this value indicates that the glyph represents the initial form.
...
medial this value indicates that the glyph represents the
medial form.
contentScriptType - SVG: Scalable Vector Graphics
the value specifies a
media type, per mime part two:
media types [rfc2046].
... usage notes value one of the content types specified in the
media types default value application/ecmascript animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'contentscripttype' in that specification.
contentStyleType - SVG: Scalable Vector Graphics
the value specifies a
media type, per mime part two:
media types [rfc2046].
... usage notes value one of the content types specified in the
media types default value text/css animatable no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyletype is ommitted, the attribute is not well supported in user agents.
href - SVG: Scalable Vector Graphics
if the href attribute or the deprecated xlink:href attribute is not provided, then the target element will be the im
mediate parent element of the current animation element.
... if the href attribute is not provided, then the target element will be the im
mediate parent element of the <discard> element.
kernelUnitLength - SVG: Scalable Vector Graphics
if the attribute is not specified, the x and y values represent very small deltas relative to a given position, which might be implemented in some cases as one pixel in the inter
mediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.
...if the attribute is not specified, the x and y values represent very small deltas relative to a given position, which might be implemented in some cases as one pixel in the inter
mediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.
<animate> - SVG: Scalable Vector Graphics
consider providing a mechanism for pausing or disabling animation, as well as using the reduced motion
media query to create a complimentary experience for users who have expressed a preference for no animated experiences.
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion
media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment svg animations level 2the definition of '<animate>' in that specification.
<style> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a
media type string.
... value type: <string>; default value: text/css; animatable: no
media this attribute defines to which
media the style applies.
Referer header: privacy and security concerns - Web security
for example, consider a "reset password" page with a social
media link in a footer.
... if the link was followed, depending on how information was shared the social
media site may receive the reset password url and may still be able to use the shared information, potentially compromising a user's security.
Features restricted to secure contexts - Web security
encrypted
media extensions restricted to secure contexts in 58 planned.
... getuser
media() restricted to secure contexts in chrome 47 temporary access available only (users cannot choose "remember this decision" in the permission request dialog).
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:output method="xml" | "html" | "text" version=string encoding=string omit-xml-declaration="yes" | "no" standalone="yes" | "no" doctype-public=string doctype-system=string cdata-section-elements=list-of-names indent="yes" | "no"
media-type=string /> required attributes none.
...
media-type (not supported.) specifies the output document mime type.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
http://www.amazon.com/xslt-programme.../dp/0764543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly
media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
...ray length: 432 pages publisher: o'reilly
media; 2 edition (september 22, 2003) isbn: 0596004206 as the title indicates, this is an overview of xml generally.
Modules - Archive of obsolete content
objects living in one compartment cannot be accessed directly from another compartment: they need to be accessed through an inter
mediate object, known as a wrapper.
content/loader - Archive of obsolete content
this may take one of the following values: "start": load content scripts im
mediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions r...
Creating annotations - Archive of obsolete content
annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css"
media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html.
Displaying annotations - Archive of obsolete content
annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style
media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
Display a Popup - Archive of obsolete content
self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css"
media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" is saved...
Listening for Load and Unload - Archive of obsolete content
if your add-on exports a function called main(), that function will be called im
mediately after the overall main.js is evaluated, and after all top-level require() statements have run (so generally after all dependent modules have been loaded).
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asynchronous, so you don't im
mediately get back a tab object which you can examine.
File I/O - Archive of obsolete content
there might be races between different processes and/or threads, e.g., a file could be im
mediately created or deleted after you check the existence but before you can perform any other actions such as opening the file for reading or writing.
Jetpack Processes - Archive of obsolete content
to prevent such memory leaks, a process can either invalidate a handle, im
mediately preventing it from being passed as a message argument, or it can unroot the handle, allowing it to be passed as a message argument until all references to it are removed, at which point it is garbage collected.
Adding windows and dialogs - Archive of obsolete content
let somevalue = 2; let returnvalue = { accepted : false , result : "" }; window.opendialog( "chrome://xulschoolhello/content/so
medialog.xul", "xulschoolhello-some-dialog", "chrome,centerscreen", somevalue, returnvalue); // you can send as many extra parameters as you need.
menupopup - Archive of obsolete content
amenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup im
mediately.
panel - Archive of obsolete content
amenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup im
mediately.
tooltip - Archive of obsolete content
samenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup im
mediately.
Deploying XULRunner - Archive of obsolete content
this should be fixed with xulrunner 11.0 with xulrunner 11.0 you may need to copy "gk
medias.dll" from the xulrunner directory to the root directory mac os x on mac os x, the exact layout of your application bundle depends on which version of xulrunner you're using.
MacFAQ - Archive of obsolete content
logstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var singletonwindowtype = nspreferences.copyunicharpref("toolkit.singletonwindowtype"); var window
mediator = components.classes["@mozilla.org/appshell/window-
mediator;1"] .getservice(components.interfaces.nsiwindow
mediator); var win = window
mediator.getmostrecentwindow(singletonwindowtype); if (win) { window.close(); win.focus(); } } if (window.arguments && window.arguments[0]){ try { var cmdline = window.argume...
XULRunner tips - Archive of obsolete content
var windowds = components.classes["@mozilla.org/rdf/datasource;1?name=window-
mediator"] .getservice(components.interfaces.nsiwindowdatasource); var tmpnamespace = {}; var sl = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .createinstance(components.interfaces.mozijssubscriptloader); sl.loadsubscript("chrome://inspector/content/hooks.js", tmpnamespace); tmpnamespace.inspectdomdocument(document); } now create a hook...
Mozilla release FAQ - Archive of obsolete content
it is very difficult to determine what components of the webpage actually needs -- certain images may be shared between several pages, the user may have images turned off or lack capabilities to use a certain type of
media.
NPFullPrint - Archive of obsolete content
if you want an embedded plug-in to simply render its area of the page, set pluginprinted to false and return im
mediately; the browser calls npp_print again with the npembedprint substructure of npprint.
WebDAV - MDN Web Docs Glossary: Definitions of Web-related terms
author or creation date) link pages of any
media type to related pages create sets of documents and retrieve hierarchical list copy and move webpages lock a document from being edited by more than one person at a time learn more general knowledge webdav on wikipedia technical reference rfc 2518 rfc 3253 rfc 3744 ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
if (accept) { request.setrequestheader('accept', accept); } if (acceptlanguage) { request.setrequestheader('accept-language', acceptlanguage); } switch (parse) { case 'text': // priority should be on
media type: var contenttype = request.getresponseheader('content-type'); //text/xml; charset="utf-8" // send to get headers first?
Accessibility - Learn web development
accessible multi
media another category of content that can create accessibility problems is multi
media — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users.
Debugging CSS - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Handling different text directions - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Overflowing content - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Type, class, and ID selectors - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
CSS selectors - Learn web development
sibling general sibling combinator h1 ~ p general sibling 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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Sizing items in CSS - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Styling tables - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
The box model - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
CSS values and units - Learn web development
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 handling different text directions overflowing content values and units sizing items in css images,
media, and form elements styling tables debugging css organizing your css ...
Flexbox - Learn web development
previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Introduction to CSS layout - Learn web development
overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Normal Flow - Learn web development
previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Supporting older browsers - Learn web development
cascading web design with feature queries using feature queries (video) previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to
media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
How CSS works - Learn web development
based on the selectors it finds, it works out which rules should be applied to which nodes in the dom, and attaches style to them as required (this inter
mediate step is called a render tree).
What is a URL? - Learn web development
the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its related resources through various elements such as <link> or <script>; to display
media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element.
Basic native form controls - Learn web development
the associated <label> is generally placed im
mediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>.
Promise
new promise(executor); parameters executor this function is invoked im
mediately with the resolving functions as its two arguments: executor(resolve, reject); the constructor will not return until the executor has completed.
Services.jsm
g bundle service sysinfo nsipropertybag2 system info service telemetry nsitelemetry telemetry service tm nsithreadmanager thread manager service urifixup nsiurifixup uri fixup service urlformatter nsiurlformatter url formatter service vc nsiversioncomparator version comparator service wm nsiwindow
mediator window
mediator service ww nsiwindowwatcher window watcher service 1 mobile only 2 windows only 3 main process only 4 child process only ...
Task.jsm
function async( atask ); async() is similar to spawn(), except that: it doesn't im
mediately start the task, rather it returns an "async function" that starts the task when the function is called; it binds the task to the async function's this object and arguments; it requires the task to be a function.
Using workers in JavaScript code modules
to create a chromeworker for this purpose, you need to use the nsiworkerfactory interface: var workerfactory = components.classes['@mozilla.org/threads/workerfactory;1'] .createinstance(components.interfaces.nsiworkerfactory); var worker = workerfactory.newchromeworker('script_url.js'); this will create a new chrome worker that will im
mediately begin to run the script at the specified url (in this case, "script_url.js").
WebRequest.jsm
headers.addlistener(redirect, { urls: pattern, types: ["image"] }, ["blocking"]); function redirect(e) { console.log("redirecting: " + e.url); return {redirecturl: "https://38.
media.tumblr.com/tumblr_ldbj01lzip1qe0eclo1_500.gif"}; } modifying headers this code changes the user agent header so the browser identifies itself as ie 11, but only when visiting pages under "http://useragentstring.com/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("http://useragent...
Index
with that document, users can see im
mediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation.
Using the viewport meta tag to control layout on mobile browsers
enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using
media queries — if the virtual viewport is 980px for example,
media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.
Mozilla Web Developer FAQ
also, html was designed to adapt to different presentation
media, so different presentations of the same document are to be expected.
Mozilla Web Services Security Model
type="soapv"/> <allow type="soap"/> </webscriptaccess> good examples (needed.) references new security model for web services, the original proposal for the web-scripts-access.xml file format web services roadmap, documenting when web services features, including the security model, were first supported additional reading documentation of crossdomain.xml, a similar format used by macro
media flash player ...
Mozilla Development Strategies
you'll need this one for regressions that require your im
mediate attention (a new crasher, a blocker, or problem in your area, for example).
Gecko Profiler FAQ
and when you get to the platform specific parts of the browser stack (such as graphics,
media, etc.) then profiling on windows would be certainly a lot more valuable than on other platforms.
NSS 3.35 release notes
b:64:5d:d1:75:49:b2:16:c8:24:40:ce cn = dst aces ca x6 sha-256 fingerprint: 76:7c:95:5a:76:41:2c:89:af:68:8e:90:a1:c7:0f:55:6c:fd:6b:60:25:db:ea:10:41:6d:7e:b6:83:1f:8c:40 subject cn = verisign class 3 secure server ca - g2 sha-256 fingerprint: 0a:41:51:d5:e5:8b:84:b8:ac:e5:3a:5c:12:12:2a:c9:59:cd:69:91:fb:b3:8e:99:b5:76:c0:ab:da:c3:58:14 this inter
mediate cert had been directly included to help with transition from 1024-bit roots per bug #1045189.
NSS API Guidelines
these rules are here to help us all im
mediately achieve more consistent and usable code, but some existing code won't follow all these rules.
NSS tools : certutil
the -o prints the full chain of a certificate, going from the initial ca (the root ca) through ever inter
mediary ca to the actual certificate.
sslintro.html
use ssl_forcehandshake when the socket has been prepared for a handshake but neither end has anything to say im
mediately.
TLS Cipher Suite Discovery
when a new version of a tls implementation is made available for use by applications, those applications may wish to im
mediately use the newly supported cipher suites found in the new version, without the application needing to be modified and re-released to know about these new cipher suites.
certutil
the -o prints the full chain of a certificate, going from the initial ca (the root ca) through ever inter
mediary ca to the actual certificate.
Necko Architecture
in order to get a channel from a uri an inter
mediary layer was introduced.
Pork Tools
then nuke the declaration // nsresult rv; // move outparam to lhs var = getter(); // detect ns_ensure_success im
mediately following // and change it to an equivalent ns_ensure_true ns_ensure_true(var, ns_error_failure); // case 2 var = getter(); // case 3, eliminate rv2 decl given that it's not used elsewhere var = getter(); ns_ensure_true(var, ns_error_failure) } outparamdel also support rewriting getters such that they return already_addrefed<nsifoo>.
GC Rooting Guide
these do not need to be wrapped in any of rooting classes, but they should be im
mediately used to initialize a js::rooted<t> if there is any code that could gc before the end of the containing function; a raw pointer must never be stored on the stack during a gc.
Hacking Tips
for (; iter != current->end(); iter++) { ionspew(ionspew_codegen, "instruction %s", iter->opname()); […] masm.store16(imm32(iter->id()), address(stackpointer, -8)); // added if (!iter->accept(this)) return false; […] } this modification will add an instruction which abuse the stack pointer to store an im
mediate value (the lir id) to a location which would never be generated by any sane compiler.
64-bit Compatibility
lir safety it is not im
mediately clear from reading lir which opcodes should be used for 64-bit safety.
SpiderMonkey Internals
atoms play three roles: as literals referred to by unaligned 16-bit im
mediate bytecode operands, as unique string descriptors for efficient property name hashing, and as members of the root gc set for exact gc.
JSAPI User Guide
for example, a custom js object that provides direct service might be one that handles all of an application's network access, or might serve as an inter
mediary broker of database services.
JS::CompileOptions
for example, js::compileoffthread needs to save compilation options where a worker thread can find them, and then return im
mediately.
JS::SetOutOfMemoryCallback
added in spidermonkey 38 description unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycallback is called im
mediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed.
JS_ForgetLocalRoot
calling it successively on other than the most recently allocated gc-thing will tend to average the time inefficiency, and may risk o(n2) growth rate, but in any event, you shouldn't allocate too many local roots if you can root as you go (build a tree of objects from the top down, forgetting each latest-allocated gc-thing im
mediately upon linking it to its parent).
JS_NewGlobalObject
this api provides a way for consumers to set slots atomically (im
mediately after the global is created), before any debugger hooks are fired.
JS_NewScriptObject
once you have created a script, you should im
mediately ensure that its script object is reachable (perhaps by using js_addroot or js_enterlocalrootscope).
JS_SetNativeStackQuota
this function may only be called im
mediately after the runtime is initialized and before any code is executed and/or interrupts requested.
JS_YieldRequest
the effect is the same as a call to js_suspendrequest im
mediately followed by a call to js_resumerequest.
Profiling SpiderMonkey
here are some instrumented tests to work from:
media:profiling-ammo.zip 3.) once you have some changes you'd like to try, you can just rebuild the js/src directory, since it produces its own shared library, even in libxul and static builds.
Shell global objects
functions available only if spidermonkey_promise is defined settlepromisenow(promise) 'settle' a promise im
mediately.
TPS Bookmark Lists
within each folder, the second item in the list is assumed to be im
mediately after the first item, and so forth.
Thread Sanitizer
the default way of symbolizing the traces is much slower than using llvm-symbolizer for that purpose: llvm ships with a symbolizer binary that tsan will readily use to im
mediately output symbolized traces much faster.
Secure Development Guidelines
ution: dynamically allocate fd_set structs int main(void) { int i, fd; fd_set fdset; for( i = 0; i < 2000; i++) { fd = open("/dev/null", o_rdwr); } fd_set(fd, &fdset); } file i/o: race conditions operating on files can often lead to race conditions since the file system is shared with other processes you check the state of a file at one point in time and im
mediately after the state might have changed most file name operations suffer from these race conditions, but not when performed on file descriptors file i/o: race conditions consider the following example int main(int argc, char **argv) { char *file = argv[1]; int fd; struct stat statbuf; stat(file, &statbuf); if (s_islink(statbuf.st_mode)) { bailout(“symbolic li...
AT APIs Support
open komodo - platform for building developer environments miro - a free, open source internet tv and video player any xulrunner application (songbird
media player, etc.) extensions to other xul apps (e.g.
XPCOM array guide
for example, here is its use in a class: class
medialist { public: void addmedium(const nsstring& amedium); private: nstarray<nsstring> m
media; }; // typesafety of m
media ensures that we only append an nsstring void nodecontainer::addmedium(const nsstring& amedium) { m
media.appendelement(amedium); } nstarray<t> can also be declared on the stack to collect a temporary list of objects and manipulate them.
nsISupports proxies
calls on object created with this flag will return im
mediately and you will lose all return information.
nsITaskbarPreviewController
the specified context is attached to a surface with the controller's width and height, the values of which are obtained im
mediately prior to calling this method.
nsITextInputProcessor
if you call this when there is no composition, this starts composition automatically and commits the composition with specified string im
mediately.
nsIThread
if false, this method returns im
mediately if the queue is empty.
nsITimer
if the callback takes a long time, then the next callback will be scheduled im
mediately afterward, but only once, unlike type_repeating_precise.
nsITransaction
if the transient state is true, the transaction manager returns im
mediately after the transaction's dotransaction() method is called, no references to the transaction are maintained.
nsITransactionManager
a value of zero means the transaction manager will execute each transaction, then im
mediately release all references it has to the transaction without pushing it on the undo stack.
nsIUpdateChecker
this is used by any user interface that offers the user the opportunity to check for updates im
mediately.
nsIZipReader
neither of the patterns foo or bar may use the 'pat~pat2' syntax described im
mediately above.
Performance
the asynchronous writes discussed below removes most of the im
mediate penalty of a commit, so you will not notice the problem as much.
Storage
the latter takes one of three constants to describe the type of transaction: mozistorageconnection.transaction_deferred mozistorageconnection.transaction_im
mediate mozistorageconnection.transaction_exclusive mozistorageconnection.begintransaction() is equivalent to calling mozistorageconnection.begintransactionas() and passing mozistorageconnection.transaction_deferred.
Using nsIDirectoryService
if you are registering it yourself it is very important to register it im
mediately after calling ns_initxpcom.
XUL Overlays
the installation of a
media plug-in, for example, may add new icons and menu items to the interface: in the navigatoroverlay.xul file or in a separate navigatorsspoverlay.xul file (where navigator.xul defines the basic ui for the navigator package), these new plug-in elements would be defined as a collection of elements or subtrees: <menuitem name="super stream player"/> <menupopup name="ss favorites"> <menuitem name="wa...
Address Book examples
for local (mork) address books: window.opendialog( "chrome://messenger/content/addressbook/abaddressbookna
medialog.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); for ldap address books: window.opendialog("chrome://messenger/content/addressbook/pref-directory-add.xul", "", "chrome,modal=yes,resizable=no,centerscreen", null); note: there is no new address book dialog for the os x address book.
Using the Multiple Accounts API
preference: mail.server.server.max_cached_connections - integer, max number of connections left open to the server preference: mail.server.server.empty_trash_threshhold integer, (should not be imap-specific) max k of wasted diskspace before we purge a folder preference: mail.server.server.delete_model - integer, delete model (move to trash, imap delete, purge im
mediately, not sure of values) preference: mail.server.server.timeout - integer, number of minutes a connection is idle before we drop it preference: mail.server.server.capability - list of capabilities of this server preference: mail.server.server.namespace.public - the server's namespace for public folders preference: mail.server.server.namespace.personal - the server's namespace for ...
Using popup notifications
popup notifications, also known as "doorhanger notifications", are presented to notify the user of something that's important but may not need im
mediate attention.
Zombie compartments
compartment(http://techcrunch.com/) compartment(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://platform.twitter.com/widgets/...utton.html?...) compartment(http://cdn.at.atwola.com/_
media/uac/tcode3.html) compartment(https://s-static.ak.fbcdn.net/connec..._proxy.php?...) compartment(http://ads.tw.adsonar.com/adserving/getads.jsp?...) (some of those compartment urls are long and have been truncated.) another thing to beware is each compartment is created for an origin (e.g.
Add to iPhoto
if this is null or undefined, we im
mediately return null, indicating there is no node associated with the context menu.
Working with data
creating uninitialized cdata objects there are three forms of the syntax for creating cdata objects without im
mediately assigning them a value: var mycdataobj = new type; var mycdataobj = new type(); var mycdataobj = type(); these all do the same thing: they return a new cdata object of the specified type, whose data buffer has been populated entirely with zeroes.
Using js-ctypes
ecfstr('we just called the equivalent of the "standardalert carbon function" for 64bit osx from javascript!') }; var rez = cfusernotificationdisplaynotice(0, kcfusernotificationcautionalertlevel, null, null, null, mycfstrs.head, mycfstrs.body, null); console.info('rez:', rez, rez.tostring(), uneval(rez)); // cfusernotificationdisplaynotice does not block till user clicks dialog, it will return im
mediately if (rez.tostring() == '0') { console.log('notification was succesfully shown!!'); } else { console.error('failed to show notification...
Mozilla
using popup notifications popup notifications, also known as "doorhanger notifications", are presented to notify the user of something that's important but may not need im
mediate attention.
Accessibility Inspector - Firefox Developer Tools
, which are detailed below: context menu options an extra context menu option is added, both for the general context menu on the web page when right/ctrl + clicking a ui feature, and the html pane of the page inspector when right/ctrl + clicking a dom element: when you choose the inspect accessibility properties/show accessibility properties context menu options, the accessibility tab is im
mediately opened to show the corresponding accessibility tree item and its properties.
Introduction to DOM Inspector - Firefox Developer Tools
one of the biggest and most im
mediate advantages that this brings to your web and application development is that it makes it possible to find the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined.
Debugger.Object - Firefox Developer Tools
for example: function f() {} // display name: f (the given name) var g = function () {}; // display name: g o.p = function () {}; // display name: o.p var q = { r: function () {} // display name: q.r }; note that the display name may not be a proper javascript identifier, or even a proper expression: we attempt to find helpful names even when the function is not im
mediately assigned as the value of some variable or property.
Debugger.Script - Firefox Developer Tools
for example: function f() {} // display name: f (the given name) var g = function () {}; // display name: g o.p = function () {}; // display name: o.p var q = { r: function () {} // display name: q.r }; note that the display name may not be a proper javascript identifier, or even a proper expression: we attempt to find helpful names even when the function is not im
mediately assigned as the value of some variable or property.
Debugger.Object - Firefox Developer Tools
for example: function f() {} // display name: f (the given name) var g = function () {}; // display name: g o.p = function () {}; // display name: o.p var q = { r: function () {} // display name: q.r }; note that the display name may not be a proper javascript identifier, or even a proper expression: we attempt to find helpful names even when the function is not im
mediately assigned as the value of some variable or property.
Index - Firefox Developer Tools
17 debugger-api debugger, inter
mediate, intro, javascript, tools mozilla’s javascript engine, spidermonkey, provides a debugging interface named debugger which lets javascript code observe and manipulate the execution of other javascript code.
Aggregate view - Firefox Developer Tools
let's see what the example looks like when we select "inverted call stack": now at the top we can im
mediately see the createtoolbarbutton() call accounting for 89% of the heap usage in our page.
Network request details - Firefox Developer Tools
; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "673" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { "name": "date", "value": "tue, 11 jun 2019 13:01:39 gmt" }, { "name": "
mediawiki-login-suppressed", "value": "true" }, { "name": "p3p", "value": "cp=\"this is not a p3p policy!
Examine and edit the box model - Firefox Developer Tools
lement's selected, you can get a detailed look at the box model in the box model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box model in the box model view, the corresponding part of the page is highlighted: editing the box model you can also edit the values in the box model view, and see the results im
mediately in the page: ...
Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element im
mediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
Select and highlight elements - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element im
mediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
UI Tour - Firefox Developer Tools
the select element button is one way you can select an element for inspection: note that it's actually part of the main toolbox toolbar, so it's im
mediately accessible from any tool, not just the inspector.
Intensive JavaScript - Firefox Developer Tools
here's the code, together with its im
mediate caller: const iterations = 50; const multiplier = 1000000000; function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; ...
about:debugging (before Firefox 68) - Firefox Developer Tools
note that this feature isn't that im
mediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc.
Animation.onfinish - Web APIs
the finish event occurs when the animation completes naturally, as well as when the animation.finish() method is called to im
mediately cause the animation to finish up.
Animation.pause() - Web APIs
example animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method im
mediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually ne...
Animation.play() - Web APIs
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play im
mediately.
AudioBuffer - Web APIs
for longer sounds, objects implementing the
mediaelementaudiosourcenode are more suitable.
AudioBufferSourceNode.start() - Web APIs
the start() method of the audiobuffersourcenode interface is used to schedule playback of the audio data contained in the buffer, or to begin playback im
mediately.
AudioBufferSourceNode - Web APIs
audiobuffersourcenode.start() used to schedule playback of the audio data contained in the buffer, or to begin playback im
mediately.
AudioDestinationNode.maxChannelCount - Web APIs
example the following would set up a simple audio graph, featuring an audiodestinationnode with maxchannelcount of 2: var audioctx = new audiocontext(); var source = audioctx.create
mediaelementsource(my
mediaelement); source.connect(gainnode); audioctx.destination.maxchannelcount = 2; gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin.
AudioDestinationNode - Web APIs
their speakers), so you can get it hooked up inside an audio graph using only a few lines of code: var audioctx = new audiocontext(); var source = audioctx.create
mediaelementsource(my
mediaelement); source.connect(gainnode); gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin.
AudioNode.connect() - Web APIs
for example, you might send the audio from a
mediaelementaudiosourcenode—that is, the audio from an html5
media element such as <audio>—through a band pass filter implemented using a biquadfilternode to reduce noise before then sending the audio along to the speakers.
AudioTrack.kind - Web APIs
syntax var trackkind = audiotrack.kind; value a domstring specifying the type of content the
media represents.
AudioTrack.label - Web APIs
example this example returns an array of track kinds and labels for potential use in a user interface to select audio tracks for a specified
media element.
AudioTrack.language - Web APIs
example this example locates all of a
media element's primary language and translated audio tracks and returns a list of objects containing each of those tracks' id, kind, and language.
BaseAudioContext.createBiquadFilter() - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.current...
BaseAudioContext.createChannelMerger() - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.create
mediastreamdestination(); // because we have used a channelmergernode, we now have a stereo //
mediastream we can use to pipe the web audio graph to webrtc, //
mediarecorder, etc.
BaseAudioContext.createChannelSplitter() - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.create
mediastreamdestination(); // because we have used a channelmergernode, we now have a stereo //
mediastream we can use to pipe the web audio graph to webrtc, //
mediarecorder, etc.
BaseAudioContext.createDelay() - Web APIs
if you just press the play buttons, the loops will start im
mediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.
BaseAudioContext.createDynamicsCompressor() - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
BaseAudioContext.createGain() - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.
mediadevices.getuser
media) { navigator.
mediadevices.getuser
media ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.create
mediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getuser
media...
BiquadFilterNode.Q - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.type = "peaking"; biquadfilter.frequenc...
BiquadFilterNode.detune - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.detune.value = 100; specifications ...
BiquadFilterNode.frequency - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status ...
BiquadFilterNode.gain - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status ...
BiquadFilterNode.getFrequencyResponse() - Web APIs
example in the following example we are using a biquad filter on a
media stream (for the full demo, see our stream-source-buffer demo live, or read the source.) as part of this demo, we get the frequency responses for this biquad filter, for five sample frequencies.
BiquadFilterNode.type - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status ...
BiquadFilterNode - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.current...
BlobEvent.BlobEvent() - Web APIs
specifications specification status comment
mediastream recordingthe definition of 'blobevent: blobevent' in that specification.
BlobEvent.data - Web APIs
syntax associatedblob = blobevent.data specifications specification status comment
mediastream recordingthe definition of 'blobevent.data' in that specification.
BlobEvent.timecode - Web APIs
specifications specification status comment
mediastream recordingthe definition of 'timecode' in that specification.
Body.bodyUsed - Web APIs
html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wiki
media.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of '...
Body - Web APIs
html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wiki
media.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fetchthe definition of 'body' in that specification.
CSSRuleList - Web APIs
they are: cssstylesheet property cssrules css
mediarule property cssrules csskeyframesrule property cssrules cssmozdocumentrule property cssrules specifications specification status comment css object model (cssom)the definition of 'cssrulelist' in that specification.
CSSStyleSheet - Web APIs
for example, one rule might be a cssstylerule object containing a style such as: h1, h2 { font-size: 16pt; } another rule might be an at-rule such as @import or @
media, and so forth.
Using dynamic styling information - Web APIs
tion stilo() { document.getelementbyid('d').style.color = 'orange'; } function resetstyle() { document.getelementbyid('d').style.color = 'black'; } </script> </head> <body> <div id="d" class="thunder">thunder</div> <button onclick="stilo()">click here to change text color</button> <button onclick="resetstyle()">reset text color</button> </body> </html> the
media and type of the style may or may not be given.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/
media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage...
CanvasRenderingContext2D - Web APIs
this code draws a house: // set line width ctx.linewidth = 10; // wall ctx.strokerect(75, 140, 150, 110); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that im
mediately draw rectangles to the canvas.
Applying styles and colors - Web APIs
if you specify a miterlimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterlimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with inter
mediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).
Using images - Web APIs
var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available im
mediately without another round trip to the server.
ChannelMergerNode - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.create
mediastreamdestination(); // because we have used a channelmergernode, we now have a stereo //
mediastream we can use to pipe the web audio graph to webrtc, //
mediarecorder, etc.
ChannelSplitterNode - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.create
mediastreamdestination(); // because we have used a channelmergernode, we now have a stereo //
mediastream we can use to pipe the web audio graph to webrtc, //
mediarecorder, etc.
ContentIndex - Web APIs
// our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/
media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) {...
CustomEvent - Web APIs
event.stopim
mediatepropagation() for this particular event, prevent all other listeners from being called.
DelayNode.delayTime - Web APIs
if you just press the play buttons, the loops will start im
mediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.
DelayNode - Web APIs
if you just press the play buttons, the loops will start im
mediately; if you slide the sliders up to the right, then press the play buttons, a delay will be introduced, so the looping sounds don't start playing for a short amount of time.
Document.cookie - Web APIs
note: as you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always
mediated by the javascript interpreter.
Document.onfullscreenchange - Web APIs
the document interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired im
mediately before a document transitions into or out of full-screen mode.
Document.querySelectorAll() - Web APIs
examples obtaining a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose im
mediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
Document - Web APIs
dragexit fired when an element is no longer the drag operation's im
mediate selection target.
Introduction to the DOM - Web APIs
when you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can im
mediately begin using the api for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page.
DoubleRange - Web APIs
specifications specification status comment
media capture and streamsthe definition of 'doublerange' in that specification.
DragEvent - Web APIs
dragexit this event is fired when an element is no longer the drag operation's im
mediate selection target.
DynamicsCompressorNode.attack - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
DynamicsCompressorNode.knee - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
DynamicsCompressorNode.ratio - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
DynamicsCompressorNode.release - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
DynamicsCompressorNode.threshold - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
DynamicsCompressorNode - Web APIs
// create a
mediaelementaudiosourcenode // feed the html
mediaelement into it var source = audioctx.create
mediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.s...
EffectTiming.fill - Web APIs
in this case, we have just two keyframes; the first defines what affect is applied to the element im
mediately after the animation first begins to play, and the second defines the effect applied to the element in the last moment before it ends.
Element.animate() - Web APIs
examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to im
mediately create and play an animation on the #tunnel element to make it flow upwards, infinitely.
Element.clientTop - Web APIs
this is because the offsettop indicates the location of the top of the border (not the margin) while the client area starts im
mediately below the border, (client area includes padding.) therefore, the clienttop value will always equal the integer portion of the .getcomputedstyle() value for "border-top-width".
Element.querySelectorAll() - Web APIs
t"]`)]; obtaining a list of matches to obtain a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("div.note, div.alert"); here, we get a list of the document's <p> elements whose im
mediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test".
Element.removeAttributeNode() - Web APIs
example // given: <div id="top" align="center" /> var d = document.getelementbyid("top"); var d_align = d.getattributenode("align"); d.removeattributenode(d_align); // align is now removed: <div id="top" /> notes if the removed attribute has a default value, it is im
mediately replaced.
Event.preventDefault() - Web APIs
the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopim
mediatepropagation(), either of which terminates propagation at once.
EventSource - Web APIs
for example, eventsource is a useful approach for handling things like social
media status updates, news feeds, or delivering data into a client-side storage mechanism like indexeddb or web storage.
EventTarget.addEventListener() - Web APIs
capturehandler, capture); middle.addeventlistener('click', nonecapturehandler, nonecapture); inner1.addeventlistener('click', passivehandler, passive); inner2.addeventlistener('click', nonepassivehandler, nonepassive); function oncehandler(event) { alert('outer, once'); } function noneoncehandler(event) { alert('outer, none-once, default'); } function capturehandler(event) { //event.stopim
mediatepropagation(); alert('middle, capture'); } function nonecapturehandler(event) { alert('middle, none-capture, default'); } function passivehandler(event) { // unable to preventdefault inside passive event listener invocation.
File.getAsBinary() - Web APIs
example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed
media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1) { // file is a binary, which we accept var data = file.getasbinary(); ...
File.getAsDataURL() - Web APIs
file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].
mediatype) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification.
FileHandle API - Web APIs
ilehandle.open('readwrite'); // start a writing operation var writing = myfile.append('some content'); writing.onsuccess = function () { console.log('writing operation successful'); } writing.onerror = function () { console.log('something goes wrong in the writing process: ' + this.error); } reading it's possible to directly write the content of a lockedfile object without using an inter
mediate file object and a filereader object.
GainNode.gain - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.
mediadevices.getuser
media) { navigator.
mediadevices.getuser
media ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.create
mediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getuser
media...
GainNode - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.
mediadevices.getuser
media) { navigator.
mediadevices.getuser
media ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.create
mediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getuser
media...
GlobalEventHandlers.oncanplay - 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.
Ajax navigation example - Web APIs
405: "method not allowed", 406: "not acceptable", 407: "proxy authentication required", 408: "request timeout", 409: "conflict", 410: "gone", 411: "length required", 412: "precondition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported
media type", 416: "requested range not satisfiable", 417: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", 425: "unassigned", 426: "upgrade required", 427: "unassigned", 428: "precondition required", 429: "too many requests", 430:...
IDBCursor.update() - Web APIs
note also that you can't directly put cursor.value into an update call, hence the below example using an inter
mediary updatedata variable.
IDBDatabase.transaction() - Web APIs
the transaction method of the idbdatabase interface im
mediately returns a transaction object (idbtransaction) containing the idbtransaction.objectstore method, which you can use to access your object store.
IDBObjectStore.clear() - Web APIs
the clear() method of the idbobjectstore interface creates and im
mediately returns an idbrequest object, and clears this object store in a separate thread.
IDBObjectStore - Web APIs
idbobjectstore.clear() creates and im
mediately returns an idbrequest object, and clears this object store in a separate thread.
IDBVersionChangeRequest.setVersion() - Web APIs
the idbversionchangerequest.setversion method updates the version of the database, returning im
mediately and running a versionchange transaction on the connected database in a separate thread.
IIRFilterNode.getFrequencyResponse() - Web APIs
examples in the following example we are using an iir filter on a
media stream (for a complete full demo, see our stream-source-buffer demo live, or read its source.) as part of this demo, we get the frequency responses for this iir filter, for five sample frequencies.
Node.previousSibling - Web APIs
the node.previoussibling read-only property returns the node im
mediately preceding the specified one in its parent's childnodes list, or null if the specified node is the first in that list.
Node.removeChild() - Web APIs
in the second syntax form, however, there is no oldchild reference kept, so assuming your code has not kept any other reference to the node elsewhere, it will im
mediately become unusable and irretrievable, and will usually be automatically deleted from memory after a short time.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the nondocumenttypechildnode.nextelementsibling read-only property returns the element im
mediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
Notification.actions - Web APIs
this is a list of the application-defined actions the user can choose to take im
mediately within the context of a notification.
OverconstrainedError.constraint - Web APIs
syntax var constraint = overconstrainederror.constraint; value a string specifications specification status comment
media capture and streamsthe definition of 'constraint' in that specification.
PannerNode.coneInnerAngle - Web APIs
s an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector im
mediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive cons...
PannerNode.coneOuterAngle - Web APIs
s an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector im
mediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive cons...
PannerNode.coneOuterGain - Web APIs
s an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector im
mediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive cons...
PannerNode.orientationX - Web APIs
s an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector im
mediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive cons...
PannerNode.orientationY - Web APIs
s an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector im
mediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive cons...
PannerNode.orientationZ - Web APIs
s an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector im
mediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.currenttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 45, this will just about make the sound audible // if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive cons...
PannerNode.refDistance - Web APIs
ew pannernode(context); panner.refdistance = refdistance; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_length); osc.connect(panner) .connect(context.destination); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay im
mediately and fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower and later than the previous one scheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(7, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like...
ParentNode.querySelectorAll() - Web APIs
examples to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose im
mediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
PaymentRequest.show() - Web APIs
instead of im
mediately failing, you could choose to call retry() on the response object to ask the user agent to try to process the payment again; this should usually only be done after the user has made any needed corrections to the order.
PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the performanceresourcetiming interface returns a domhighrestimestamp im
mediately before dispatching the fetchevent if a service worker thread is already running, or im
mediately before starting the service worker thread if it is not already running.
PointerEvent - Web APIs
typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen
media.
Using Pointer Events - Web APIs
function handlecancel(evt) { log("pointercancel: id = " + evt.pointerid); var idx = ongoingtouchindexbyid(evt.pointerid); ongoingtouches.splice(idx, 1); // remove it; we're done } since the idea is to im
mediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.
Pointer events - Web APIs
typically, this is determined by considering the pointer's location and also the visual layout of elements in a document on screen
media.
RTCConfiguration.iceServers - Web APIs
if the list of servers is changed while a connection is already active by calling the the rtcpeerconnection method setconfiguration(), no im
mediate effect occurs.
RTCTrackEvent.receiver - Web APIs
the read-only receiver property of the rtctrackevent interface indicates the rtcrtpreceiver which is used to receive data containing
media for the track to which the event refers.
RTCTrackEventInit.receiver - Web APIs
syntax var trackeventinit = { receiver: rtpreceiver, track:
mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var rtpreceiver = trackeventinit.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent.
RTCTrackEventInit.transceiver - Web APIs
syntax var trackeventinit = { receiver: rtpreceiver, track:
mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var rtptransceiver = trackeventinit.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent.
Resize Observer API - Web APIs
for example,
media queries / window.match
media are great for updating layouts at specific points when the viewport changes sizes, but what if you want to change layout in response to a specific element's size changing, which isn't the outer container?
Using the Resource Timing API - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/
media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared.
The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units)
media visual computed value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
SVGStylable - Web APIs
the returned object is live; changes to the objects represent im
mediate changes to the objects to which the cssvalue is attached.
SVGTransform - Web APIs
the matrix object is live, meaning that any changes made to the svgtransform object are im
mediately reflected in the matrix object and vice versa.
Text.splitText() - Web APIs
syntax newnode = textnode.splittext(offset) parameters offset the index im
mediately before which to break the text node.
TextTrack.mode - Web APIs
tracks whose kind is "chapters" are used by the user agent or the web site or web app to construct and present an interface for navigating the named chapters, where each cue in the list represents a chapter in the
media.
TextTrackList: addtrack event - Web APIs
bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const
mediaelement = document.queryselector('video, audio');
mediaelement.texttracks.addeventlistener('addtrack', (event) => { console.log(`text track: ${event.track.label} added`); }); using the onaddtrack event handler property: const
mediaelement = document.queryselector('video, audio');
mediaelement.texttracks.onaddtrack = (event) => { console.log(`text track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
TextTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const
mediaelement = document.queryselectorall('video, audio')[0];
mediaelement.texttracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the onchange event handler property: const
mediaelement = document.queryselector('video, audio');
mediaelement.texttracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status html living standardthe definition of 'change' in that specification.
getTrackById() - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the
media resource itself, or, if the resource doesn't define an order, the relative order in which the tracks are declared by the
media resource.
TextTrackList: removeTrack event - Web APIs
bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const
mediaelement = document.queryselector('video, audio');
mediaelement.texttracks.addeventlistener('removetrack', (event) => { console.log(`text track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const
mediaelement = document.queryselector('video, audio');
mediaelement.texttracks.onremovetrack = (event) => { console.log(`text track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specificati...
TimeRanges - Web APIs
the timeranges interface is used to represent a set of time ranges, primarily for the purpose of tracking which portions of
media have been buffered when loading it for use by the <audio> and <video> elements.
Touch events - Web APIs
function handlecancel(evt) { evt.preventdefault(); console.log("touchcancel."); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { var idx = ongoingtouchindexbyid(touches[i].identifier); ongoingtouches.splice(idx, 1); // remove it; we're done } } since the idea is to im
mediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.
TrackDefault.TrackDefault() - Web APIs
syntax var trackdefault = new trackdefault(type, language, label, kinds, bytestreamtrackid); parameters type a domstring specifying a
media segment data type for the sourcebuffer to contain.
TrackDefault.type - Web APIs
the type read-only property of the trackdefault interface returns the type of track that this sourcebuffer's
media segment data relates to (i.e.
ULongRange - Web APIs
specifications specification status comment
media capture and streamsthe definition of 'ulongrange' in that specification.
URLSearchParams.set() - Web APIs
nts ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://
mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specification status comment urlthe definition of 'set()' in that specification.
VTTRegion - Web APIs
the vttregion interface—part of the api for handling webvtt (text tracks on
media presentations)—describes a portion of the video to render a vttcue onto.
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(videoelem); } specifications specification status comment
media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification.
VideoPlaybackQuality.creationTime - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } specifications specification status comment
media playback qualitythe definition of 'videoplaybackquality.corruptedvideoframes' in that specification.
WebGL by example - Web APIs
sometimes we revisit a topic several times, such as when needing to discuss it initially at a basic level, and later at inter
mediate and advanced levels.
Animating textures in WebGL - Web APIs
instead, all it does is create an empty texture object, put a single pixel in it, and set its filtering for later use: function inittexture(gl) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because video has to be download over the internet // they might take a moment until it's ready so // put a single pixel in the texture so we can // use it im
mediately.
WebGL best practices - Web APIs
} this technique may not work in all applications, for example those which require programs to be im
mediately available for rendering.
Rendering and the WebXR frame animation callback - Web APIs
for (let view of viewerpose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); mydrawsceneintoview(view, deltatime); } } } the mydrawframe() function grabs the xrsession from the xrframe object specified by the frame parameter, then calls the session's requestanimationframe() method to im
mediately schedule the rendering of the next frame.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
if your app provides a way for the user to move through the virtual world without physically moving in the real world (a so-called teleportation mechanic), you can simply accept the new position and continue, allowing the jump from your previously-assumed position to be im
mediately corrected with the new position.
WebXR Device API - Web APIs
including other
media positional audio in a 3d environment in 3d environments, which may either be 3d scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source.
Visualizations with Web Audio API - Web APIs
tract data from your audio source, you need an analysernode, which is created using the audiocontext.createanalyser() method, for example: var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); this node is then connected to your audio source at some point between your source and your destination, for example: source = audioctx.create
mediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node.
Web Locks API - Web APIs
ifavailable: if specified, the lock request will fail if the lock cannot be granted im
mediately without waiting.
Using the Web Speech API - Web APIs
browser support support for web speech api speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: firefox desktop and mobile support it in gecko 42+ (windows)/44+, without prefixes, and it can be turned on by flipping the
media.webspeech.synth.enabled flag to true in about:config.
WritableStreamDefaultWriter.abort() - Web APIs
the abort() method of the writablestreamdefaultwriter interface aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be im
mediately moved to an error state, with any queued writes discarded.
WritableStreamDefaultWriter - Web APIs
methods writablestreamdefaultwriter.abort() aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be im
mediately moved to an error state, with any queued writes discarded.
XRReferenceSpace: reset event - Web APIs
the tracking system has temporarily lost the user, then regained them, but not until after they had moved enough to leave the im
mediate vicinity of the last-known position.
XRSession.onselect - Web APIs
the select event is sent after tracking of the primary action begins, as announced by the selectstart event, and im
mediately before the tracking of the primary action ends, which is announced by the selectend event.
Using the aria-invalid attribute - Accessibility
<input name="name" id="name" aria-required="true" aria-invalid="false" onblur="checkvalidity('name', ' ', 'invalid name entered (requires both first and last name)');"/> <br /> <input name="email" id="email" aria-required="true" aria-invalid="false" onblur="checkvalidity('email', '@', 'invalid e-mail address');"/> note that it is not necessary to validate the fields im
mediately on blur; the application could wait until the form is submitted (though this is not necessarily recommended).
ARIA: article role - Accessibility
examples of appropriate uses of the role="article", or preferably <article>, include blog posts, forum posts, a comment to a forum or blog post, a comment to a comment to a forum or blog post, any an item in a social
media feed.
ARIA: feed role - Accessibility
examples include an rss feed, news feeds, social
media feeds like facebook, instagram or twitter, or even a list of related products on an ecommerce page.
ARIA: img role - Accessibility
ingle entity and describe it using the label, rather than trying to read out all the child nodes: <svg role="img" aria-label="description of your svg image"> <!-- contents of the svg image --> </svg> using role="img" to confer meaning that is obscured or implied in certain cases, assistive technology users won't be able to get the meaning of content expressed in certain ways, through certain
media, or implied in certain ways.
Accessibility: What users can do to browse more safely - Accessibility
examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion
media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source: developers.google.com from thomas steiner's article "mov...
HTML To MSAA - Accessibility
property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if inter
mediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" even...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
this means the client must use accessibleobjectfromevent im
mediately, because there is a danger that the object will go away, and another different object will be created with the same pointer value.that case seems extremely remote, because information from events is generally retrieved right after the event.
Text labels and names - Accessibility
select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="
media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
Accessibility
accessible multi
media another category of content that can create accessibility problems is multi
media — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no
media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
:left - CSS: Cascading Style Sheets
syntax :left examples setting a margin for left-hand pages @page :left { margin: 2in 3in; } specifications specification status comment css paged
media module level 3the definition of ':left' in that specification.
:right - CSS: Cascading Style Sheets
syntax :right examples setting margins for right-hand pages @page :right { margin: 2in 3in; } specifications specification status comment css paged
media module level 3the definition of ':right' in that specification.
@charset - CSS: Cascading Style Sheets
it must be the name of a web-safe character encoding defined in the iana-registry, and must be double-quoted, following exactly one space character (u+0020), and im
mediately terminated with a semicolon.
@font-face - CSS: Cascading Style Sheets
[ font-stretch: <font-stretch>; ] | [ font-weight: <font-weight>; ] | [ font-style: <font-style>; ] }where <family-name> = <string> | <custom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: view the live example <html> <head> <title>web font sample</title> <style type="text/css"
media="screen, print"> @font-face { font-family: "bitstream vera serif bold"; src: url("https://mdn.mozillademos.org/files/2468/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </style> </head> <body> this is bitstream vera serif bold.
bleed - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged
media module level 3the definition of 'bleed' in that specification.
marks - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged
media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @
media rule @
media print { @page { size: 50mm 150mm; } } specifications specification status comment css paged
media module level 3the definition of 'size' in that specification.
background-position-x - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://
media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specification.
background-position-y - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://
media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specification.
background-repeat - CSS: Cascading Style Sheets
ackground-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/
media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
background - CSS: Cascading Style Sheets
the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included im
mediately after <position>, separated with the '/' character, like this: "center/80%".
break-inside - CSS: Cascading Style Sheets
0chrome android full support 50firefox android no support noopera android full support 37safari ios full support 10samsung internet android full support 5.0supported in paged
mediachrome full support 50edge full support 12firefox full support 65ie full support 10opera full support 37 full support 37 ...
counter-set - CSS: Cascading Style Sheets
if there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of 0 (though it may then im
mediately set or increment that value to something different).
<easing-function> - CSS: Cascading Style Sheets
steps( n, <direction> ) steps(2, jump-start) steps(2, start) steps(4, jump-end) steps(4, end) steps(5, jump-none) steps(3, jump-both) steps-start the equivalent of steps(1, jump-start) steps-end the equivalent of steps(1, jump-end) step-start the animation jumps im
mediately to its final state, where it stays until the end.
<filter-function> - CSS: Cascading Style Sheets
<option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://
media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); co...
orphans - CSS: Cascading Style Sheets
14safari ios full support 1samsung internet android full support 1.5legend full support full support no support no support see also widows paged
media ...
page-break-inside - CSS: Cascading Style Sheets
ge { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specifications specification status comment css paged
media module level 3the definition of 'page-break-inside' in that specification.
scale() - CSS: Cascading Style Sheets
also, consider making use of the prefers-reduced-motion
media feature — use it to write a
media query that will turn off animations if the user has reduced animation specified in their system preferences.
transform - CSS: Cascading Style Sheets
also, consider making use of the prefers-reduced-motion
media feature — use it to write a
media query that will turn off animations if the user has reduced animation specified in their system preferences.
url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/
media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/
media/diamonds.png") 30 fill / 30px / 30px space; /* as a paramet...
Guide to Web APIs - Developer guides
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted
media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api m
media capabilities api
media capture and streams
media session api
media source extensions
mediastream recordingnnavigation timingnetwork information api ppage visibility apipaym...
Challenge solutions - Developer guides
solution the following rule puts borders around only <td> elements that are inside the <tbody> element of the table with id=demo-table: #demo-table tbody td { border:1px solid #7a7; }
media separate print style file challenge move the print-specific style rules to a separate css file and import them into your style4.css stylesheet.
Introduction to HTML5 - Developer guides
it offers new features that provide not only rich
media support but also enhance support for creating web applications that can interact with users, their local data, and servers more easily and effectively than was previously possible.
Printing - Developer guides
<link href="/path/to/print.css"
media="print" rel="stylesheet" /> using
media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
HTML attribute: accept - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a
media file, you may want to be include any format of that
media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types.
Warning - HTTP
199 miscellaneous warning arbitrary, non-specific warning 214 transformation applied added by a proxy if it applies any transformation to the representation, such as changing the content-coding,
media-type or the like.
HTTP Messages - HTTP
the http/2 framing mechanism adds a new inter
mediate layer between the http/1.x syntax and the underlying transport protocol, without fundamentally modifying it: building upon proven mechanisms.
POST - HTTP
form-data; name="field1" value1 --boundary content-disposition: form-data; name="field2"; filename="example.txt" value2 --boundary-- specifications specification title rfc 7231, section 4.3.3: post hypertext transfer protocol (http/1.1): semantics and content rfc 2046, section 5.1.1: common syntax multipurpose internet mail extensions (mime) part two:
media types ...
HTTP Public Key Pinning (HPKP) - HTTP
extracting the base64 encoded public key information note: while the example below shows how to set a pin on a server certificate, it is recommended to place the pin on the inter
mediate certificate of the ca that issued the server certificate, to ease certificates renewals and rotations.
HTTP range requests - HTTP
partial requests are useful for large
media or downloading files with pause and resume functions, for example.
HTTP response status codes - HTTP
415 unsupported
media type the
media format of the requested data is not supported by the server, so the server is rejecting the request.
HTTP
hypertext transfer protocol (http) is an application-layer protocol for transmitting hyper
media documents, such as html.
A re-introduction to JavaScript (JS tutorial) - JavaScript
you can use named iifes (im
mediately invoked function expressions) as shown below: var charsinbody = (function counter(elm) { if (elm.nodetype == 3) { // text_node return elm.nodevalue.length; } var count = 0; for (var i = 0, child; child = elm.childnodes[i]; i++) { count += counter(child); } return count; })(document.body); the name provided to a function expression as above is only available to the funct...
Concurrency model and the event loop - JavaScript
here is an example that demonstrates this concept (settimeout does not run im
mediately after its timer expires): const s = new date().getseconds(); settimeout(function() { // prints out "2", meaning that the callback is not called im
mediately after 500 milliseconds.
Loops and iteration - JavaScript
when you use break without a label, it terminates the innermost enclosing while, do-while, for, or switch im
mediately and transfers control to the following statement.
Numbers and dates - JavaScript
if the digits after 0x are outside the range (0123456789abcdef), the following syntaxerror is thrown: "identifier starts im
mediately after numeric literal".
Quantifiers - JavaScript
for example, /e?le?/ matches the "el" in "angel" and the "le" in "angle." if used im
mediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).
TypeError: "x" is not a constructor - JavaScript
to do this, you would write the following function: function car(make, model, year) { this.make = make; this.model = model; this.year = year; } now you can create an object called mycar as follows: var mycar = new car('eagle', 'talon tsi', 1993); in promises when returning an im
mediately-resolved or im
mediately-rejected promise, you do not need to create a new promise(...) and act on it.
Warning: unreachable code after return statement - JavaScript
warnings will not be shown for semicolon-less returns if these statements follow it: throw break var function examples invalid cases function f() { var x = 3; x += 4; return x; // return exits the function im
mediately x -= 3; // so this line will never run; it is unreachable } function f() { return // this is treated like `return;` 3 + 4; // so the function returns, and this line is never reached } valid cases function f() { var x = 3; x += 4; x -= 3; return x; // ok: return after all other statements } function f() { return 3 + 4 // ok: semicolon-less return with express...
SyntaxError: function statement requires a name - JavaScript
examples statements vs expressions a function statement (or function declaration) requires a name, this won't work: function () { return 'hello world'; } // syntaxerror: function statement requires a name you can use a function expression (assignment) instead: var greet = function() { return 'hello world'; }; or, you function is maybe intended to be an iife (im
mediately invoked function expression), which is a function that runs as soon as it is defined.
Arrow function expressions - JavaScript
let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // syntaxerror: invalid arrow-function arguments callback = callback || (() => {}); // ok examples basic usage // an empty arrow function returns undefined let empty = () => {}; (() => 'foobar')(); // returns "foobar" // (this is an im
mediately invoked function expression) var simple = a => a > 15 ?
Functions - JavaScript
when functions are used only once, a common pattern is an iife (im
mediately invoked function expression).
Error.prototype.stack - JavaScript
argument values in the stack: prior to firefox 14, the function name would be followed by the argument values converted to string in parentheses im
mediately before the at (@) sign.
Object.create() - JavaScript
var obj = object.create({ a: 1, b: 2 }); > console.log(object.entries(obj)); // shows "[]" some non-solutions a good solution for the missing object-methods is not im
mediately apparent.
Object.freeze() - JavaScript
the result of calling object.freeze(object) only applies to the im
mediate properties of object itself and will prevent future property addition, removal or value re-assignment operations only on object.
Promise.allSettled() - JavaScript
in comparison, the promise returned by promise.all() may be more appropriate if the tasks are dependent on each other / if you'd like to im
mediately reject upon any of them rejecting.
Promise.race() - JavaScript
examples asynchronicity of promise.race this following example demonstrates the asynchronicity of promise.race: // we are passing as argument an array of promises that are already resolved, // to trigger promise.race as soon as possible var resolvedpromisesarray = [promise.resolve(33), promise.resolve(44)]; var p = promise.race(resolvedpromisesarray); // im
mediately logging the value of p console.log(p); // using settimeout we can execute code after the stack is empty settimeout(function(){ console.log('the stack is now empty'); console.log(p); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 33 } an empty iterable causes the returned promise to be forever pending: ...
Promise.prototype.then() - JavaScript
d', v); // "resolved", 10 }, function(e) { // not called console.error('rejected', e); }); var p3 = p1.then(function() { // return promise here, that will be rejected with 'error' after 1 second return new promise(rejectlater); }); p3.then(function(v) { // not called console.log('resolved', v); }, function(e) { console.error('rejected', e); // "rejected", 'error' }); window.setim
mediate style promise-based polyfill using a function.prototype.bind() reflect.apply (reflect.apply()) method to create a (non-cancellable) window.setim
mediate-style function.
background_color - Web app manifests
note: the background_color member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage
media; it is not used by the user agent as the background-color css property when the progressive web app stylesheet is available.
display - Web app manifests
note: you can selectively apply css to your app based on the display mode, using the display-mode
media feature.
Web app manifests
"type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the
media type registration section of the specification (the response of the manifest file should return content-type: application/manifest+json).
Populating the page: how browsers work - Web Performance
web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are im
mediate.
Add to Home screen - Progressive web apps (PWAs)
note: the .webmanifest extension is specified in the
media type registration section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g.
id - SVG: Scalable Vector Graphics
note: you should avoid the use of id values that would be parsed as an svg view specification (e.g., mydrawing.svg#svgview(viewbox(0,200,1000,1000))) or a basic
media fragment when used as a url target fragment.
target - SVG: Scalable Vector Graphics
_parent the im
mediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be securely accessed from this document.
SVG Attribute reference - SVG: Scalable Vector Graphics
x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max
media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius refer...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
:role, xlink:arcrole, xlink:show, and xlink:actuate attributes removed implementation status unknown xlink:href attribute deprecated in favor of href implemented (bug 1245751) xlink:title attribute deprecated in favor of child <title> implementation status unknown spaces in svg view fragments implementation status unknown pixel: and percent: spatial
media fragments implementation status unknown linking to <view> elements does not cause implicit box transformation to show nearest ancestor <svg> element implementation status unknown unspecified svg view fragment parameters don't cause corresponding attributes to be reset to initial values implementation status unknown viewtarget attribute of <view> and correspondi...