@mux/mux-player
Advanced tools
An open source Mux player web component that Just Works™
@mux/mux-player is a web component that provides a customizable video player for Mux Video. It allows developers to easily integrate video playback with advanced features such as captions, playback speed control, and more.
Basic Video Playback
This feature allows you to embed a basic video player in your web application using the Mux Video playback ID. The player supports on-demand video streaming.
<mux-player stream-type="on-demand" playback-id="your-playback-id" />Customizing Player Appearance
You can customize the appearance of the video player using CSS variables. This example changes the background color of the controls to a semi-transparent black.
<mux-player playback-id="your-playback-id" style="--controls-background-color: rgba(0, 0, 0, 0.5);" />Captions and Subtitles
This feature allows you to add captions or subtitles to your video. The example shows how to include a VTT file for English captions.
<mux-player playback-id="your-playback-id"><track kind="captions" src="captions.vtt" srclang="en" label="English" default></mux-player>Playback Speed Control
This feature enables users to control the playback speed of the video. The example provides options for 0.5x, 1x, 1.5x, and 2x speeds.
<mux-player playback-id="your-playback-id" playback-rates="[0.5, 1, 1.5, 2]" />Video.js is a popular open-source HTML5 video player that supports a wide range of video formats and provides a robust plugin architecture. Compared to @mux/mux-player, Video.js offers more flexibility and a larger community but requires more setup for Mux integration.
Plyr is a lightweight, customizable video player that supports HTML5, YouTube, and Vimeo. It offers a clean UI and is easy to integrate. While it doesn't have built-in Mux support like @mux/mux-player, it can be extended to work with Mux Video.
Hls.js is a JavaScript library that allows you to play HLS (HTTP Live Streaming) videos in browsers that do not support it natively. It is not a full-featured video player but can be used in conjunction with other players like Video.js to provide HLS support. Unlike @mux/mux-player, it requires additional setup for a complete video player experience.
Mux Player has recently released 2.0. See the [https://github.com/muxinc/elements/blob/packages/mux-player/UPGRADING_V1_to_V2.md and the blog post announcement.
<mux-player> is the official Mux-flavored video player web component.
The player UI is built on Media Chrome and <mux-video> drives the core video logic used to play Mux Video content.
npm install @mux/mux-player
or
yarn add @mux/mux-player
<mux-player
playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
metadata-video-title="Big Buck Bunny"
metadata-viewer-user-id="user-id-1234"
></mux-player>
Docs and guides live on docs.mux.com.
API reference lives on Github.
FAQs
An open source Mux player web component that Just Works™
The npm package @mux/mux-player receives a total of 97,915 weekly downloads. As such, @mux/mux-player popularity was classified as popular.
We found that @mux/mux-player demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.