Let’s get right to it, shall we? That cat is definitely out of the bag.
Among the many product announcements we made at The Mux Informational, perhaps my favorite (and I freely admit bias) was the introduction of Mux Player — a modern video player deeply integrated with Mux Video and Data, designed with ease of use, customization, and flexibility in mind.
We at Mux have spent a lot of time — years, really — thinking about and building products for video playback. And we’re proud to have founded and supported dozens of open source software offerings geared toward that space: video.js, <media-chrome>, and more. But we haven’t built a video player of our own. Until now! Let’s talk a bit about why.
There's no such thing as too much information
If you caught Dylan’s presentation at TMI, you know that understanding our customers’ motivations, frustrations, and secret wins is something of a passion of ours.
We’ve had the pleasure of talking with dozens of engineers, product managers, CTOs, and other engineering-oriented folks to learn what you want and need out of a video player. We heard some comments more often that we expected, while others were entirely new learnings for the team.
Do any of these resonate with you? Our bet is yes.
Spending weeks, or even months, evaluating multiple video players
Scoping and evaluating the viability and feasibility of a video player — or any solution, for that matter — is important. However, when the solution you are investigating gets in its own way with poor documentation, lengthy integration efforts, and complex pricing and support structures, you spend far more time than you expected trying to understand if that video player is right for you.
The more efficiently you can identify requirements, make informed decisions, and execute on goals, the sooner that product can reach your customers and value is realized…and the sooner you can move on to solving the truly hard problems.
Realizing "expected" features are poorly supported
Chromecast
Chromecast, anyone? Alongside Airplay, Chromecast is a top feature for viewers who want to consume content originating from a mobile device on a TV.
Chromecast can be difficult to support well for a few reasons:
- Poor examples in the documentation put an increased load on developers looking to build it into their product.
- A significant amount of programming complexity means lots of code involved in session maintenance, checking conditions, applying configurations, and handling data.
- Underpowered hardware affects quality of experience, pushing QoE onto the developer and impacting the video infrastructure.
- Troubleshooting is painful. Is that how the SDK is supposed to work?
In fact, those are just a few of the reasons we also built Castable Video.
Responsive design
Responsive design is a solved problem, right? We all hoped it would be. And yet, some of the core feedback we heard in our developer and customer interviews about video players was that the viewer experience was more inconsistent across devices and browsers than expected, and for unclear reasons.
We decided to build Mux Player for mobile before moving onto desktop. Our hope is that this will help address the issues typically experienced when converting a desktop experience to a mobile one.
There are certainly limitations — Apple has a strong hand in video player behavior on iPhones, for example — but consistency is king where brand and interaction design heavily impact the viewer.
Modifying controls
Or perhaps you found that the video players you tried didn’t afford the flexibility you (or your stakeholders) needed, and you realized you couldn’t modify existing controls to meet a pretty standard use case — so you decided to build a video player yourself.
Ultimately, you shouldn’t have to build these features yourself (unless it’s your passion, in which case we’d love to see what you built!), and you should certainly be able to trust that they will be supported and stable in a modern video player.
Incomprehensible errors and integration points of failure
Google and StackOverflow have many answers to most of our questions about what and why an error exists or how to pass information from one service to another. But sometimes not even they can help you understand what needs to be done.
Some of the folks we spoke to during our research reported spending far more time than they expected digging into a player’s code to try and understand what was happening and why, after scouring documentation, they ultimately failed to solve the problem.
You want to make sure the video player is getting the correct rendition and sending view data to your monitoring tooling, and you want to be able to fix issues simply so viewers can watch the content seamlessly.
Toiling with errors and integrations results in lost time and growing frustration, delaying exciting work on valuable improvements to your products.
Imagine receiving an error and being able to immediately pinpoint the cause, fix it, and see results. For example, what if your viewers knew right away that their out-of-date browser was the issue?
What Mux Player is doing about it
Simply put, we feel strongly that these frustrations (and more) shouldn’t exist. We’re on a mission to create the most dev-friendly video player on the market. We know that’s a lofty goal, and if you know Mux, you know we don’t shy away from those.
Ease
If you are familiar with HTML (or even if you aren’t!) and have a Mux playback ID, you can get Mux Player up and running in just a few minutes. Seriously.
If you’d like, take a gander at this CodeSandbox example. Nothing fancy, just this code right here pasted directly into the body of the index.html file:
<!-- referencing the hosted Mux Player script that pulls in the HTML Element. -->
<script src="https://unpkg.com/@mux/mux-player"></script>
<!-- Mux Player HTML Element with base recommended attributes.-->
<mux-player
stream-type="on-demand"
playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs"
metadata-video-title="Test On Demand"
metadata-viewer-user-id="user-id-007"
></mux-player>And if you’re working in React, we’ve got you covered.
Transparent
Did you know you can use Mux Player now? We’re in Public Alpha!
While we still have work to do to improve performance and stability, and more features to build before we can launch into Public Beta, you can certainly give Mux Player a test drive and let us know what you think.
We’re also not ashamed to air our dirty code laundry — you can freely poke at our Mux Player code (HTML Element, React) and fork it if you want to do something crazy.
Maintained
Mux Player is being built and maintained by the people who know video best. Our team is made up of the most passionate player experts across the industry, so you know you’re in good hands.
We understand that having the freedom and flexibility to choose when you update to the latest version is important so you can control the experience with more granularity and manage your own maintenance preferences.
With that in mind, you can choose to use a specific version of Mux Player or always stay up to date with the most recent version — detailed release notes included.
Modern
Built on <media-chrome>
We might have had some ideas up our sleeves when building Media Chrome. We needed flexible, snappy, designer-accessible, and highly customizable UI components for Mux Player and decided, hey, you probably do too!
Leveraging Media Chrome for our video player’s user interface means we (but really, you) have access to endless UI opportunities.
The (not so) obvious features, easily managed
- Accessibility
- Responsive design for mobile
- Descriptive error handling
- Timeline hover previews
- Live
- Live DVR mode
- On-demand
- Airplay
- Chromecast
- Autoplay (if you want)
- Picture-in-picture & fullscreen controls
- Closed captions & subtitles
Most Mux Player capabilities don’t require special configurations to work. Its UI and playback engine automatically reconfigures itself depending on the stream type selected (on-demand, live, ll-live).
Many controls are responsive to the viewer’s context (Chromecast, Airplay), and others — such as Mute and Skip Forward/Backward — can be directly manipulated if you so choose.
Integrated
Mux Video, Data, and Player — better together.
Once the playback ID is provided to the Mux Player element, we infer the Mux Data environment for that asset and send along view data — no additional integration steps required. You read that right: You get Mux Data (and all its bells and whistles) automatically integrated with Mux Player.
This tight coupling between Mux Player and Video + Data opens up a whole new world of features and optimizations we’re excited for.
For example, timeline hover previews! Simply hover over the timeline to where you think you want to be in the content, and you’ll see a clean thumbnail of the frame at that timestamp to give you a better sense of what’s playing at that moment.
We’ll also be adding support for new features from Mux Video and Data as they come out, and in some cases supporting them in advance of their public release (well hello, Low-Latency Live Streaming and Slates 👀).
Public Beta
As Dylan mentioned, Mux Player will be going into Public Beta soon! In fact, in case you missed it, we used Mux Player for all video content at TMI 🥳
We’re looking forward to hearing about everyone’s experiences — good, bad, and ugly. Our community is integral to our product development process, and we can’t wait for you to play (ahem) with it.
If you want to be among the first to know when the Public Beta is ready, fill out this form and we’ll be in touch very soon.
Can’t wait to get your hands in there and try it out? You’re welcome to give the Public Alpha a whirl — provided you understand that while we are dogfooding it in our own production environments, we strongly advise you exercise caution in yours. Being in Alpha means there may be bugs we haven’t discovered (yet!), and things may not work exactly right at this time.
