so-wmp

Window matchMedia()

The matchMedia() method returns a MediaQueryList with the results from the query.

See Also:

Media Queries

The media queries of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.

Examples

Syntax

Parameters

Return Value

Examples Explained

The first example on this page runs a media query and compares it to the current window state.

To run responsive media query whenever the window state changes, add an event listener to the MediaQueryList object (See «More Examples» below):

More Examples

If the viewport is less or equal to 500 pixels wide, set background color to yellow, otherwise to pink:

// Create a match function
function myFunction(x) if (x.matches) document.body.style.backgroundColor = «yellow»;
> else document.body.style.backgroundColor = «pink»;
>
>

// // Create a MediaQueryList object
const mmObj = window.matchMedia(«(max-width: 700px)»)

// Call the match function at run time:
myFunction(mmObj);

// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);

Browser Support

matchMedia() is supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11

Источник

window . match Media

Интерфейс в глобальной области видимости window . match Media , который позволяет получить доступ к медиавыражениям из JavaScript и подписываться на их срабатывание. Медиавыражения активно используются в CSS с помощью директивы @media .

Пример

Скопировать ссылку «Пример» Скопировано

Определение ширины экрана по заданному медиавыражению

Скопировать ссылку «Определение ширины экрана по заданному медиавыражению» Скопировано

Создадим медиавыражение с параметрами ширины и подпишемся его изменение. Теперь при изменении ширины экрана, в момент прохода через пороговое значение 420px, будет выведено сообщение:

 const mobileWidthMediaQuery = window.matchMedia('(max-width: 420px)') function printLog(isMobileSize)  const size = isMobileSize ? 'уже или равен' : 'шире' console.log(`Размер экрана $ 420px`)> printLog(mobileWidthMediaQuery.matches) mobileWidthMediaQuery.addEventListener('change', function (event)  printLog(event.matches)>) const mobileWidthMediaQuery = window.matchMedia('(max-width: 420px)') function printLog(isMobileSize)  const size = isMobileSize ? 'уже или равен' : 'шире' console.log(`Размер экрана $size> 420px`) > printLog(mobileWidthMediaQuery.matches) mobileWidthMediaQuery.addEventListener('change', function (event)  printLog(event.matches) >)    Скопировать Скопировано Не удалось скопировать   

Определение системной темы оформления

Скопировать ссылку «Определение системной темы оформления» Скопировано

Создадим медиавыражение и предадим условие, которое будет положительным в случае, когда установлена тёмная тема оформления. Выведем сообщение о текущем состоянии системы, а также подпишемся на её изменение.

При смене темы оформления, в системе будет выводиться сообщение и сообщать текущее состояние.

 const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)') function printLog(isDark)  const theme = isDark ? 'темная' : 'светлая' console.log(`В системе используется $ тема`)> printLog(themeMediaQuery.matches) themeMediaQuery.addEventListener('change', function (event)  printLog(event.matches)>) const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)') function printLog(isDark)  const theme = isDark ? 'темная' : 'светлая' console.log(`В системе используется $theme> тема`) > printLog(themeMediaQuery.matches) themeMediaQuery.addEventListener('change', function (event)  printLog(event.matches) >)    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для создания медиа объекта нужно вызвать функцию match Media ( ) и передать ей медиавыражение. Синтаксис медиавыражений и их варианты полностью совпадают с выражениями, которые используются в CSS.

 const mediaQueryList = window.matchMedia('(медиавыражение)') const mediaQueryList = window.matchMedia('(медиавыражение)')    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Если вам нужно реагировать на изменения в браузере одновременно с изменениями в вёрстке, вы можете создавать медиавыражения в JavaScript и реагировать на эти события синхронно с CSS.

Источник

Window: matchMedia() method

The Window interface’s matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.

Syntax

matchMedia(mediaQueryString) 

Parameters

A string specifying the media query to parse into a MediaQueryList .

Return value

A new MediaQueryList object for the media query. Use this object’s properties and events to detect matches and to monitor for changes to those matches over time.

Usage notes

You can use the returned media query to perform both instantaneous and event-driven checks to see if the document matches the media query.

To perform a one-time, instantaneous check to see if the document matches the media query, look at the value of the matches property, which will be true if the document meets the media query’s requirements.

If you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change event to be delivered to the object. There’s a good example of this in the article on Window.devicePixelRatio .

Examples

This example runs the media query (max-width: 600px) and displays the value of the resulting MediaQueryList ‘s matches property in a ; as a result, the output will say «true» if the viewport is less than or equal to 600 pixels wide, and will say «false» if the window is wider than that.

JavaScript

let mql = window.matchMedia("(max-width: 600px)"); document.querySelector(".mq-value").innerText = mql.matches; 

The JavaScript code passes the media query to match into matchMedia() to compile it, then sets the ‘s innerText to the value of the results’ matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.

HTML

A simple to receive the output.

.mq-value  font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Is there a documented JavaScript API for Windows Media Player?

I want to use JavaScript to control an embedded Windows Media Player, as well as access any properties that the player exposes. I’ve found a few hacky examples online, but nothing concrete. I really need access to play, pause, stop, seek, fullscreen, etc. I’d also like to have access to any events the player happens to broadcast. Help would be wonderful (I already have a Flash equiv, just so you know), thanks!

5 Answers 5

The API requires ActiveX connectivity native to Internet Explorer, or can use a plugin for Firefox.

Here’s a sample page that might get you started.

There is an API in Microsoft’s developer center, but it will only work if you embed windows media player using active-x.

The link is for Media Player in Microsoft Windows CE .NET 4.2 I don’t think that is the operating system you really care about

Windows media player is exposed as an activex control that any scripting language running in the windows script host should be able to access. You should be able to use jscript to control it. Jscript is microsofts implimentation of java script. For information on what objects and methods are availble using jscript for windows media player se this link.

There is no open JavaScript library as far as I know for crossbrowser clientside handling of a WMP player. However, this link should make it quite easy for you to start your own little library. The code might need some updating and testing in modern browser versions but you have the basics there.

The library your searching for would be a great idea for a Google Code project, I guess that while everyone today is using Adobe Flash with sIFR / swfobject or Microsoft Silverligt with sistr etc, there are not much interest to write clientside script controlling for WMP.

Sadly I have to deal with a big old corporate client whose IT dept thinks that adding Flash or Silverlight to the OS image might cause conflicts. Hooray for client work. thanks for the link though, it looks helpful.

Should use next WMP object (works in Chrome, FF, Safari)

 objPlayer = document.getElementById("wmp"); objPlayer.controls.stop(); objPlayer.URL = this.url; objPlayer.controls.play();  

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник