Code Monkey home page Code Monkey logo

media-group's Introduction

media-group

Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple audio / video elements.

โš ๏ธ This library is designed as a polyfill but note that MediaController is renamed to MediaGroupController and the mediagroup attribute is renamed to just group to avoid any issues with Safari where the original API is still implemented (while not working properly).

Example (CodeSandbox)

<script type="module" src="https://cdn.jsdelivr.net/npm/media-group"></script>

<video
  group="madmax"
  src="https://stream.mux.com/ibw0201Usmvp9fcDyXRzGwCu01IZXiT5duks8OoO3OQ01e00/low.mp4"
  controls
  playsinline
  muted
></video>

<audio
  group="madmax"
  src="https://stream.mux.com/0201RDkkUbY3501qR9fYuqOd8UXQNNyO3JLNcMG9kW4rpA/audio.m4a"
  controls
  playsinline
></audio>

Related

media-group's People

Contributors

cjpillsbury avatar dependabot[bot] avatar github-actions[bot] avatar luwes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

media-group's Issues

Video pauses on tab/window switch

@luwes It seems the Media Group controller is making the videos pause when its tab loses focus - when it's playing and I switch tabs/windows/Mac Desktop. It will begin playing again when it is back in focus, but this behavior is not ideal. This looks to be browser specific as it doesn't happen in Firefox. The Chromium browsers (Chrome, Brave) and Safari all pause when not in focus.

You can test it by playing your demo and then switching tabs will pause when out of focus: https://media-group-mux.vercel.app/examples/mux-player.html

In my app, it is causing the videos to go out of sync.

I don't see this happening when I use different non-syncing video players like VideoJS and Mux Players without Media Group or apps like Youtube, etc.

Can this behavior be changed? Or is it completely browser dependent?

Thanks for your help!

Can this be used with mux-player?

Hi, I've stumbled across your repo. It looks like it would be a big help in my project where I"m trying to sync two videos.

I have tried to use it with <mux-player>, but can't seem to get it going. It works fine with html video elements (in Safari anyway b/c of native HLS). I have put together a test Code Sandbox demonstrating it. The video elements (commented out in the sandbox) will sync, but you can see the mux players don't. Have you been able to get them to sync? Am I missing something?

https://codesandbox.io/s/media-group-mux-player-f9oxdp?file=/index.html

Thanks so much!

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.