https://github.com/glinford/mediacontext.js

MediaContext.js - Add Dynamic contextual backgrounds and elements to your HTML5 Video/Audio players.
https://github.com/glinford/mediacontext.js

audio-player contextual-data html5-video

Last synced: 4 months ago
JSON representation

MediaContext.js - Add Dynamic contextual backgrounds and elements to your HTML5 Video/Audio players.

• Host: GitHub
• URL: https://github.com/glinford/mediacontext.js
• Owner: glinford
• License: mit
• Created: 2016-10-27T12:36:58.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-10T13:49:37.000Z (over 9 years ago)
• Last Synced: 2025-09-21T15:46:12.133Z (9 months ago)
• Topics: audio-player, contextual-data, html5-video
• Language: JavaScript
• Homepage: https://glinford.github.io/mediacontext.js/
• Size: 70.6 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# mediacontext.js

MediaContext.js - Add Dynamic contextual backgrounds and elements to your HTML5 Video/Audio players.

# Summary

MediaContext.js Library is written in Pure Javascript, it allows you to change background or/and an element based on the time of an HTML5 audio/video element. Check the demo at https://glinford.github.io/mediacontext.js/

The library is built to be simple to use and light (3kb minimized)

#Installation

```shell

## NPM

npm install mediacontext

## Bower

bower install mediacontext

## Git

git clone https://github.com/glinford/mediacontext.js

```

# Demo (Best in Chrome)

https://glinford.github.io/mediacontext.js/

# Usage/Example

```html

```

```javascript

MediaContext({

  mediaSelector: ".media-context", // Query Selector of video/audio HTML5 element

  backgroundSelector: ".media-context-background", // Query Selector of background element you want to dynamically change

  backgroundContext: {

    json: {

      path: "context/background.json" //load a JSON file with format like context/background.json file

    },

    manual: [ //enter manuallly your configuration, if time is also in the json file, the manual overrides it

      { src: "backgrounds/bg-46.jpg", time: 46 },

      { src: "backgrounds/bg-52.jpg", time: 52 }

    ]

  },

  metadataSelector: ".media-context-metadata", // Query Selector of element you wish to load dynamically

  

  metadataContext: {

    json: {

      path: "context/metadata.json" // load a json with format like context/metadata.json

    },

    manual: [] //Same than background you can override your json here

  }

});

```

# Information

Feel free to PR / Fork / Star

# License

MIT