@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™
The npm package @mux/mux-player receives a total of 127,960 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 1 open source maintainer 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.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.