Giter Site home page Giter Site logo

abcnews / odyssey-audio-visual-plugin Goto Github PK

View Code? Open in Web Editor NEW
1.0 6.0 0.0 4.51 MB

Legacy plugin, development continues in https://github.com/abcnews/interactive-plugins

Home Page: https://github.com/abcnews/interactive-plugins

License: MIT License

HTML 5.34% SCSS 15.01% TypeScript 57.01% JavaScript 22.64%
audio story-format hacktoberfest odyssey-plugin

odyssey-audio-visual-plugin's Introduction

Odyssey Audio Visual Plugin

A plugin for ABC's Odyssey Story Format that asks for user permission to play audio.

After the user gives permission, videos will automatically play and audio will fade between the videos as the page scrolls.

The plugin shows a message "this story is best experienced with sound on", and an "enable audio" button

Originally developed for the 4 Corners Black Summer bushfires interactive.

Usage

This plugin depends on Odyssey.

Add the plugin

The plugin works out of the box with standard Odyssey videos.

  1. Add the odyssey-audio-visual-plugin JavaScript to your article in CoreMedia (content id: 101718598).
  2. Add #audio-visual-plugin-mount on its own line where you want the "enable audio" button to appear.

This should get you most of the way there.

Opt in non-Odyssey <video> elements

Custom interactives like Ease Frame must opt in to allow the Odyssey Audio Visual Plugin to control the volume.

To do this:

  1. Add class="oavp-video" to a parent element for the <video>.
  2. Each <video> needs its own parent element.

Integrate via API

The browser may permit playing audio even if the user hasn't explicitly given permission, so to be a good citizen you should check the current status before playing any audio.

There is a DOM-based API to check the current permission:

const isMuted = document.querySelector('[data-id="odyssey-audio-visual-plugin"')?.dataset?.muted !== 'false';

Note that if the plugin doesn't exist in the page, this code will always return false.

Authors

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.