102 lines
5.2 KiB
Markdown
102 lines
5.2 KiB
Markdown
|
# Utilities/Features
|
||
|
|
|
||
|
|
* [Utilities](#utils)
|
||
|
|
* [DOM](#dom)
|
||
|
|
* [General](#general)
|
||
|
|
* [Media](#media)
|
||
|
|
* [Time](#time)
|
||
|
|
* [Features](#features)
|
||
|
|
|
||
|
|
<a id="utils"></a>
|
||
|
|
## Utilities
|
||
|
|
All the utilities can be accessed through the `mejs.Utils.{name}` element.
|
||
|
|
|
||
|
|
<a id="dom"></a>
|
||
|
|
### DOM
|
||
|
|
`MediaElement.js` has already polyfills to use some of the methods that jQuery provided for matching/manipulating/AJAX-calling DOM.
|
||
|
|
|
||
|
|
However, some of those methods are not possible to match natively, so `MediaElement.js` has created them.
|
||
|
|
|
||
|
|
Method | Description
|
||
|
|
------ | --------
|
||
|
|
offset(element) | Obtain the `top` and `left` coordinates of `element`
|
||
|
|
hasClass(element, className) | Check if `element` has the `className` class defined
|
||
|
|
addClass(element, className) | Add the `className` class to `element`
|
||
|
|
removeClass(element, className) | Remove the `className` class to `element`
|
||
|
|
toggleClass(element, className) | Add/remove `className` class from `element`
|
||
|
|
fadeIn(element, duration, callback) | Show `element` within a certain `duration` time (default: `400`), and once it is shown, execute `callback` (if any)
|
||
|
|
fadeOut(element, duration, callback) | Hide `element` within a certain `duration` time (default: `400`), and once it is hidden, execute `callback` (if any)
|
||
|
|
siblings(element, filter) | Obtain all the siblings from `element` based on `filter` selector (if any)
|
||
|
|
visible(element) | Check if `element` is visible; this goes beyond checking if element has `display: none`, since also `visibility: hidden` is considered as not visible
|
||
|
|
ajax(url, dataType, success, error) | Wrapper to execute an AJAX request to a certain `url`, specifying its `type` (`text`, `html`, `json`, `xml`) and execute either `success` or `error` callbacks
|
||
|
|
|
||
|
|
<a id="general"></a>
|
||
|
|
### General
|
||
|
|
|
||
|
|
Sometimes, common tasks like escaping HTML or checking if a value is a certain type, are needed. `MediaElement.js` has also implemented some methods to achieve them.
|
||
|
|
|
||
|
|
Method | Description
|
||
|
|
------ | --------
|
||
|
|
escapeHTML(input) | Escape `&, <, >, "` characters from `input` to avoid XSS attacks
|
||
|
|
debounce(callback, wait, immediate) | Execute `callback` in a specific period of `wait` time, or bypasses the time if `immediate` is `true` (default: `false`)
|
||
|
|
isObjectEmpty(object) | Check if `object` is empty
|
||
|
|
splitEvents(events, id) | Split a string of `events` separated by spaces into `document` (d) and `window` (w) events. An `id` can be passed to append a namespace
|
||
|
|
createEvent(eventName, target) | Wrapper of `CustomEvent` class to create a event, passing a `eventName` and a possible `target`
|
||
|
|
isNodeAfter(sourceNode, targetNode) | Check if `targetNode` appears after `sourceNode` in the DOM
|
||
|
|
isString(input) | Determine if an `input` value is a string
|
||
|
|
|
||
|
|
<a id="media"></a>
|
||
|
|
### Media
|
||
|
|
|
||
|
|
Method | Description
|
||
|
|
------ | --------
|
||
|
|
absolutizeUrl(path) | Append the full URL of a given `path`
|
||
|
|
formatType(url, type) | Obtain the format of a specific media, based on `url` and additionally its MIME `type`
|
||
|
|
getMimeFromType(type) | Obtain the correct MIME part of the `type` in case the attribute contains a codec (`video/mp4; codecs="avc1.42E01E, mp4a.40.2"` becomes `video/mp4`)
|
||
|
|
getTypeFromFile(url) | Obtain the type of media based on `url` structure
|
||
|
|
getExtension(url) | Obtain media file extension from `url`
|
||
|
|
normalizeExtension(extension) | Obtain the standard extension of a media `extension`
|
||
|
|
|
||
|
|
|
||
|
|
<a id="time"></a>
|
||
|
|
### Time
|
||
|
|
|
||
|
|
Method | Description
|
||
|
|
------ | --------
|
||
|
|
secondsToTimeCode(time, forceHours, showFrameCount, fps, secondsDecimalLength) | Format a numeric `time` in format '00:00:00', potentially showing hours if `forceHours` is set to `true`, and the frame count if `showFrameCount` is `true`. Also, frames per second (`fps`, by default `25`) can be specified, and also the number of decimals to display if any (`secondsDecimalLength`)
|
||
|
|
timeCodeToSeconds(time, fps) | Convert a '00:00:00' `time` string into seconds. Also, frames per second (`fps`, by default `25`) can be specified
|
||
|
|
calculateTimeFormat(time, options, fps) | Calculate the time format to use given the player `options`. The `time` argument ideally should be a number, but if not, it will default to `0`. Also, frames per second (`fps`, by default `25`) can be specified
|
||
|
|
convertSMPTEtoSeconds(SMPTE) | Convert a Society of Motion Picture and Television Engineers (`SMTPE`) time code into seconds
|
||
|
|
|
||
|
|
<a id="features"></a>
|
||
|
|
## Features
|
||
|
|
|
||
|
|
`MediaElement.js` has some flags/methods to determine which browser the user is in, some elements to determine the type of fullscreen the browser supports, etc.
|
||
|
|
|
||
|
|
All of these elements can be accessed by using `mejs.Features.{name}`. The following list shows all the possible features.
|
||
|
|
|
||
|
|
* mejs.Features.isiPad
|
||
|
|
* mejs.Features.isiPhone
|
||
|
|
* mejs.Features.isiOS
|
||
|
|
* mejs.Features.isAndroid
|
||
|
|
* mejs.Features.isIE
|
||
|
|
* mejs.Features.isEdge
|
||
|
|
* mejs.Features.isChrome
|
||
|
|
* mejs.Features.isFirefox
|
||
|
|
* mejs.Features.isSafari
|
||
|
|
* mejs.Features.isStockAndroid
|
||
|
|
* mejs.Features.hasMSE
|
||
|
|
* mejs.Features.supportsNativeHLS
|
||
|
|
* mejs.Features.supportsPointerEvents
|
||
|
|
* mejs.Features.hasiOSFullScreen
|
||
|
|
* mejs.Features.hasNativeFullscreen
|
||
|
|
* mejs.Features.hasWebkitNativeFullScreen
|
||
|
|
* mejs.Features.hasMozNativeFullScreen
|
||
|
|
* mejs.Features.hasMsNativeFullScreen
|
||
|
|
* mejs.Features.hasTrueNativeFullScreen
|
||
|
|
* mejs.Features.nativeFullScreenEnabled
|
||
|
|
* mejs.Features.fullScreenEventName
|
||
|
|
* mejs.Features.isFullScreen()
|
||
|
|
* mejs.Features.requestFullScreen()
|
||
|
|
* mejs.Features.cancelFullScreen()
|