@mux/mux-player
Advanced tools
@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 recently released 3.0. The most visible change in this is new tooltips that are enabled by default, as well as other fixes and changes.
For changes relating to the previous major release, 2.0, see the V1 to V2 upgrade guide 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™
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 found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.