https://github.com/tj-mc/mediakit
A powerful and simple interface for controlling media on web pages.
https://github.com/tj-mc/mediakit
audio control developer-tools iframes javascript js media mediakit players video vimeo web youtube-iframe
Last synced: 2 months ago
JSON representation
A powerful and simple interface for controlling media on web pages.
- Host: GitHub
- URL: https://github.com/tj-mc/mediakit
- Owner: tj-mc
- License: mit
- Created: 2020-07-05T04:36:53.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-06T08:25:12.000Z (over 4 years ago)
- Last Synced: 2025-03-20T00:18:38.645Z (3 months ago)
- Topics: audio, control, developer-tools, iframes, javascript, js, media, mediakit, players, video, vimeo, web, youtube-iframe
- Language: JavaScript
- Homepage:
- Size: 878 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
  
Stop media elements from playing all at once. Control them with a set of universal functions.
[Try it out.](https://tj-mc.github.io/mediakit/)
#### 💭 Problem
Many websites require embedded audio and video, either through HTML5 players or third party iFrames. However, managing these players can be difficult. Many audio players and iFrames can play at once, and each type of media has a different API, leading to an unpleasent experience for the user and developer.
#### ✨ Solution
mediakit aims to provide a simple interface for controlling all the media item on your page. Simply register the name and type of each item, and you'll have access to a universal control centre for your media.
__By default, mediakit ensures that only one item can play at a time.__
### 💾 Installation
#### 📦 Packager
Install with package manager:
```
npm i mediakitjs
```
Then import as needed.
```$xslt
import { create, play, pauseAll } from 'mediakitjs';
```
#### 🌐 CDN
Load from CDN:
```$xslt
<video id="video1" src="resources/video.mp4" controls></video>
<iframe id="vimeo1" src="{vimeo url}" width="640" height="360"></iframe>
mk.create([
{ type: 'audio', selector: '#audio1' },
{ type: 'video', selector: '#video1' },
{ type: 'vimeo', selector: '#vimeo1' },
])
```
### 📺 YouTube Usage
For Vimeo, Video, and Audio, mediakit receives a reference to the existing iFrame or media element on the page.
To include a YouTube video, you must pass a selector to an empty `div` or `span` that you want to be replaced with the YouTube iFrame.
This is due to the design of the YouTube iFrame API, which requires us to register the iFrame on creation. Provide the videoId in the `config` property.
```
<div id="#youtube1"></div>
...
mk.create([
{ type: 'youtube', selector: '#youtube1', config: { videoId: '4eM12LJi_rg' } },
])
```
### 📖 Methods
#### `play(name: string)`
Play an element. If `config.playExclusive === true`, this method will pause all registered elements before playing the
target element.
#### `pause(name: string)`
Pause an element.
#### `stop(name: string)`
Stop an element. Currently identical to `pause()`. In future versions, this method will pause the target element, then
set its playback time to `0:00`.
#### `pauseAllExcept(name: string)`
Pause all elements, except one.
#### `pauseAll(name: string)`
Pause all elements.
### ⚙️ Configuration
`create()` accepts a second argument for configuration. The example below shows the default values of these properties.
```$xslt
mk.create(
[
{type: 'audio', selector: '#audio1'},
{type: 'video', selector: '#video2'},
{type: 'vimeo', selector: '#vimeo2'},
{type: 'youtube', selector: '#youtube1', config: {videoId: '4eM12LJi_rg'}},
],
{
playExclusive: true,
log: false,
}
)
```
#### Supported
- ✅ HTML5 Audio
- ✅ HTML5 Video
- ✅ YouTube
- ✅ Vimeo
### 🛣️ Roadmap
- Add support for `seek()`
- Implement `stop()`. Current version mirrors `pause()`
- Emit mediakit events. eg: `mkPaused`, `mkPlayed`
- Add tests