luwes / playerx

Media Player Web Component - Uniform Player API - Supports HLS, Dash, Mux, Vimeo, YouTube, JW Player, Wistia

npm: npm i playerx
cdn: https://cdn.jsdelivr.net/npm/playerx/+esm

Features

• 🏄‍♂️ Compatible HTMLMediaElement API
• 🕺 Seamlessly integrates with Media Chrome

Usage (Codesandbox)

<script type="module" src="https://cdn.jsdelivr.net/npm/playerx/+esm"></script>
<player-x src="https://vimeo.com/638369396" controls></player-x>

Demo page: dev.playerx.io/demo

Supported media

• Mux videos use the Mux Player API
• YouTube videos use the YouTube iFrame Player API
• Vimeo videos use the Vimeo Player API
• Wistia videos use the Wistia Player API
• JW Player videos use the JW Player API
• Supported file types are playing using <video> or <audio> elements
  • HLS streams are played using hls.js
  • DASH streams are played using dash.js

Related

• Media Chrome Your media player's dancing suit. 🕺
• media-group Sync and control multiple audio and/or video elements.
• castable-video Cast your video element to the big screen with ease!
• <youtube-video> A web component for the YouTube player.
• <videojs-video> A web component for Video.js.
• <wistia-video> A web component for the Wistia player.
• <vimeo-video> A web component for the Vimeo player.
• <jwplayer-video> A web component for the JW player.
• <hls-video> A web component for playing HTTP Live Streaming (HLS) videos.
• <mux-player> The official Mux-flavored video player web component.
• <mux-video> A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.

Big Thanks

To all the services that offered free plans for building, testing and measuring!

• Mux
• Cloudflare
• JW Player
• Github

playerx's Issues

QoE benchmark video start time

Video start time is not very accurate at the moment because some players fire the "ready" event when they also have preloaded some video data making the video start time almost instant and others still need to download data when the play() call is made.

I need to find a solution for this. Maybe start not at a time of 0 seconds but right away skip ahead in the timeline at 10s or so to make sure the player has not preloaded there yet.

React Integration

Is there a way to use this player and react together?

Nuxt setup

Has anyone done a nuxt setup with vue2?

Not having much luck with the converinatl plugin route

import Vue from 'vue' import playerx from "playerx" Vue.use(playerx);

then within the page:
<playerx src="https://vimeo.com/638369396"></playerx>

I do have the script tag for polyfills in place also

MUX add-on

Finalize MUX plugin and add docs on the readme page.
https://github.com/luwes/playerx/tree/master/packages/playerx-mux

I want to know if I can use the repo to download unknown live stream.

Hello:
I can login to watch some live sports games from one small video web site. But there is no customer service, I don’t know how to set up a customer account.
However, I found that the web site uses JWPlayer to play live videos, and from the web site JavaScript, I found the HLS source seems to be available for all browser without login. It is working for Google Chrome, Microsoft Edge, and Firfox without login.
The following is one of such URL, which I can watch live sport game:
https://bingsport.com/1proxy.php?id=g_1
Other examples like:
https://bingsport.com/1proxy.php?id=g_2
https://bingsport.com/1proxy.php?id=g_3
......
https://bingsport.com/1proxy.php?id=g_20

Depend on what time you try, in the European nights, there are always some live sports games.
I tried to use Youtube-DL.exe to download it, but I got error message:
[generic] 1proxy: Requesting header
WARNING: Falling back on generic information extractor.
[generic] 1proxy: Downloading webpage
[generic] 1proxy: Extracting information
ERROR: Unsupported URL: https://bingsport.com/1proxy.php?id=g_1
I want to know what type of live stream this URL is using, and how I can download it?
For example, if I want to download this type of live stream and save as an MP4 file in my local disk using this library, what I should do?
Or, if possible to write a browser extension using playerx to play and save live stream in local disk?
Thanks,

After enabling Cloudinary, video.js will stop working

Hey!

Thanks for this wonderful job.

I noticed an error. After enabling Cloudinary, video.js will stop working.

You also have this error on the demo page: https://dev.playerx.io/demo/

library version 0.8.9.

Thank you.

QoE benchmark

One of the big goals was, when the unified API was in place, to benchmark the video playback across platforms. MUX is installed on the demo page which will give us the insights. The missing piece is to get traffic on that page 😝.

It's going to be difficult to wait until this naturally gets traction so thinking Travis / Browserstack / Playwright can spin up some zombies with throttled network conditions and maybe geo locations.

dash.js video element broken

Contribute to these video elements to fix the demo.

• https://github.com/muxinc/hls-video-element/ : https://dev.playerx.io/demo/hls.js/
• https://github.com/Dash-Industry-Forum/dash-video-element : https://dev.playerx.io/demo/dash.js/

Sticky floating video on page scroll add-on

I've been seeing this more and more on webpages and this seems like a nice add-on to require the backer commercial license or small fee.

Something like https://webdesign.tutsplus.com/tutorials/how-to-create-a-sticky-floating-video-on-page-scroll--cms-28342

Play () and pause () methods for facebook.

How to make facebook play () and pause () methods work right after source is loaded.

I have hung the play () and pause () methods on the buttons. But immediately after loading the page, they do not work and only start working after I click on the controls on the video itself.

Here's a test case:
https://codepen.io/abvas/pen/QWqxBmZ?editors=1010

This only happens with facebook, with other providers these methods are triggered immediately after loading.
Everything works fine on your demo page, but I can't make them work correctly.

Please advise me how to fix it, what I am doing wrong.

Thank you.

Player chrome

Hi, thanks for the Mux shoutout!

I love the web component approach here. We've got a project that's probably very complimentary. https://github.com/muxinc/player-chrome

Cheers!
-heff

Add `renditionchange` and bitrate to MUX data

Since the benchmark is run in Browserstack and Saucelabs it should be possible to get the approximate bitrate from the segments being downloaded. Iframe players will need some WebdriverIO commands to get in the iframe and send out postMessage to the parent etc but should be possible.

Brightcove Test Assets

Brightcove's trial expired and the real tests assets are not available anymore.

If someone could help out with hosting these 2 test videos on their account it would be very much appreciated!

• The World in HDR 4k (235MB)
  https://www.dropbox.com/s/w2f25m0kr2hv036/The%20World%20In%20HDR%204K.mp4?dl=0

• Llama Drama 4k (400MB)
  https://www.dropbox.com/s/1htkono6otyjv6h/01_llama_drama_4096p.mp4?dl=0

---

These videos would be used on the Playerx demo page at https://dev.playerx.io/demo/brightcove/ and https://dev.playerx.io/demo/brightcove/3/ instead of the random public ones I found on the internet.

The benchmark is run every half hour with this WebdriverIO code
https://github.com/playerxo/playerx/blob/main/bench/index.js

Please reply with links to the hosted videos similar to
https://players.brightcove.net/1752604059001/default_default/index.html?videoId=4883184247001

1752604059001 is the Brightcove account ID

Brightcove will then also be added to the Test Matrix at https://dev.playerx.io/matrix/

Thank you!

youtube shorts not playing

Is there a restriction on YouTube "shorts" that impedes?
Below is the sample which failed to embed

https://www.youtube.com/shorts/tQnVO4oIUuU

Autoplay on iOS Safari not working

Hi 😄 I don't seem to be able to get autoplay to work on iOS Safari (muted has been applied). All other browsers seem fine, so I'm not sure what I'm missing. I'm using a React and Gatsby set up, loading the script into Gatsby Head of required pages like the below:

export const Head = ({ data, location }) => {
    const { title } = data.project;

    return (
        <>
            <SEO title={title} pathname={location.pathname} />
            <script
                type="module"
                src="https://cdn.jsdelivr.net/npm/playerx/+esm"
            ></script>
        </>
    );
};

Then I've created a component that loads Vimeo and YouTube videos, using the player-x html web component:

<player-x
    src={video}
    loading={loading}
    autoplay=""
    muted=""
    {...{
        ...(controls && { controls: '' }),
        ...(loop && { loop: '' }),
    }}>
</player-x>

I've attempted setting the autoplay and muted props as a true boolean, but this didn't make a difference.

There does appear to be some 401 errors in the console, but I don't believe there's an issue with the URL in the script and I've cleared my browser cache which hasn't helped.

Any advice on what might be going wrong here?

Errors and warnings in Dev-Tools when using Dailymotion

When using provider = deilymotion, I get a lot of warnings and errors in Dev-Tools.

I get this in my application, and I also see it on the demo page (for example: https://www.dailymotion.com/ video / x85qs0t)

What could be the cause of these errors and warnings? And how can this be reduced?

windows 10,
chrome - 97.0.4692.71,
playerx - 0.9.0,
ad blockers are disabled.

Thank you.

Support Safari / IOs

Thanks for your work.
Is playerx planned to support Safari / IOs?

Vue Integration

that would be awesome. :)

Unable to play regular mp4 videos

Hey!

Unable to play regular mp4 videos.
For example:
https://ia600300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4
or
https://s3.amazonaws.com/appforest_uf/f1646528337027x250262950148555600/manifest.mp4

I use the simplest example:

<script type="module" src="https://cdn.jsdelivr.net/npm/playerx"></script>
<player-x class="playerx" id="playerx" src="https://s3.amazonaws.com/appforest_uf/f1646528337027x250262950148555600/manifest.mp4" controls></player-x>

but I see a white screen and get an error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'replace')
     at populate(playerx.js:228:19)
     at HTMLElement.load(playerx.js:325:19)

Videos in other formats work fine.

Please tell me what am I doing wrong?

Thank you.

Fallback system add-on

Video fails sometimes, cdn's, code bugs, etc. would be cool to have a fallback mechanism when one player fails, fallback to another.

Interactive video

This is a biggie and will require a Playerx backend API.
A system that will make it possible for the user to create a "choose your own adventure" style playlist.

SEO add-on

Create an add-on that adds SEO tags for the clip to the web page that embeds the player.

Cloudflare Test Assets

If someone could help out with hosting these 2 test videos on their account it would be very much appreciated!

• The World in HDR 4k (235MB)
  https://www.dropbox.com/s/w2f25m0kr2hv036/The%20World%20In%20HDR%204K.mp4?dl=0

• Llama Drama 4k (400MB)
  https://www.dropbox.com/s/1htkono6otyjv6h/01_llama_drama_4096p.mp4?dl=0

---

These videos would be used on the Playerx demo page at https://dev.playerx.io/demo/cloudflare/ and https://dev.playerx.io/demo/cloudflare/3/ instead of the random public ones I found on the internet.

The benchmark is run every half hour with this WebdriverIO code
https://github.com/playerxo/playerx/blob/main/bench/index.js

Please reply with the links to the hosted videos similar to
https://videodelivery.net/0ac7e0085e9d4ed83b2c0dc604fda32d