Player Release 1.10@next: It’s Time for the Big One (Jan 2024)

[mihar-22]

👋

Hey friends!

This is our final feature release before the official 1.0! It's been an enormous amount of work and it's taken a while but it's well worth the wait. This release was focused on improving DX, adding missing core features, ironing out tons of bugs, and just making the library feel more ready for prime time. I'm sure there's new bugs and issues thanks to features/changes that we haven't caught yet; we'd love your help in opening descriptive issues with repros so we can get them all fixed! Okay... let's dig in!

✨ What's New?

• Bundler Plugins
• Plyr Layout
• New Default Audio Layout
• Layout Slots
• Font Customization Menu
• Keyboard Action Display
• New Load Strategies
• Clipping
• Storage
• Remote Playback
• Media Session
• Text Tracks Content
• New Thumbnail Source Types
• New Tailwind Variants
• hls.js 1.5
• Tons of bug fixes!

Breaking Changes

Player Queries

We've removed player queries as they relied on eval and posed a security risk. We've replaced them with MediaPlayerQuery subscriptions. See the updated default layout sizes guide for how to use them. This change also affects the media-layout element, see the updated layouts page.

Naming Changes

We've fixed some prop/callback names (not attributes) to be consistently camel-cased. This isn't a breaking change yet but it might be when you upgrade to 1.0.

Prop name changes:

• crossorigin -> crossOrigin
• playsinline -> playsInline
• autoplay -> autoPlay

Callback name changes:

• onAutoplay -> onAutoPlay
• onAutoplayFail -> onAutoPlayFail

Bundler Plugins

🚨 This feature is only for Web Component users.

We now have bundler plugins coming that work with Astro, Nuxt, SvelteKit, SolidStart, and anywhere that uses Vite/Webpack. The plugin was built to help with auto-importing the components and styles you use. No more manual setup required and load only what you use!

// Once plugin is setup, this is all you need to import!
import 'vidstack/bundle';

📝 Available in our installation docs.

📹 Click here for video explainer.

Plyr Layout

The beautiful Plyr Layout, designed by Sam Potts all the way back in 2015, has been newly rebuilt! We've included the same features, styles, CSS variables, icons, and relevant options to make migrating over simpler.

📝 Available in our installation docs.

📝 New Plyr Layout component page

New Default Audio Layout

Billy Gözütok and I worked together to redesign our Default Audio Layout. We wanted it to be as compact as possible and optimized for touch. We mainly did this because the previous design was pretty clunky/ugly, there was a big height difference between small/large layouts, and most importantly it wasn't adapting well with the new load play strategy. Let us know what you think!

audio-player-demo.mp4

The video above was an early preview, transitions have been further refined.

Layout Slots

🚨 This feature is only for React users.

Slots are now available on all layouts for inserting or replacing content inside of them. This solves the long issue of, "I only want to add/change a few things, I don't want to build my own layout."

<PlyrLayout
  slots={{
    beforePlayButton: null,
    playButton: CustomPlayButton,
    afterPlayButton: null,
    /** 57 other slots positions... */
  }}
/>

<DefaultVideoLayout
  slots={{
    afterPlayButton: null,
    playButton: CustomPlayButton,
    beforePlayButton: null,
    /** 72 other slots positions... */
  }}
/>

📝 Plyr Layout slots docs.

📝 Default Layout slots docs.

Font Customization Menu

The default audio and video layouts now have a font customization menu to improve the accessibility of captions.

User font settings will override your captions default theme CSS variables.

font-menu-demo.mp4

Keyboard Action Display

Similar to YouTube Player, a keyboard action display has landed to improve accessibility for our default video layout. It displays the keyboard action as an icon and any relevant text on screen. It also includes an ARIA status update, i18n, and custom icons.

keyboard-display.mp4

New Load Strategies

There is a new load strategy called play. This new option will delay loading both the provider and media until a play request is made. This works best when you want to delay loading until interaction.

Secondly, we've separated the poster loading strategy into posterLoad with similar options. Poster loading has been separated so you can display an image before media is ready for playback. This generally works well in combination with load="play" to create previews.

<media-player load="play" poster-load="visible" />

<MediaPlayer load="play" posterLoad="visible" />

📝 Updated load strategies docs.

Clipping

Clipping allows shortening the media by specifying the time at which playback should start and end. The media and any resources such as chapters durations are updated to match the new clipped length. In addition, Media URI Fragments are used internally to efficiently load audio and video files between the clipped start and end times (e.g., /video.mp4#t=30,60).

<media-player clip-start-time="30" clip-end-time="60"></media-player>

<MediaPlayer clipStartTime={30} clipEndTime={60}></MediaPlayer>

📝 Clipping docs.

Storage

Storage enables saving player and media settings so that the user can resume where they left off. This includes saving and initializing on load settings such as language, volume, muted, captions visibility, and playback time. The player supports both local and remote storage.

📝 Storage docs.

Remote Playback

The player can now cast to a remote playback device such as a TV using AirPlay or Google Cast. The entire process is async and lazy loaded to avoid bloating the library and your application. The buttons are included when supported in the Default Video Layout.

📝 Remote Playback API docs.

📝 AirPlay Button

📝 Google Cast Button

📝 Google Cast Provider

📹 Click here to see Google Cast demo.

Media Session

The Media Session API is now automatically set for you so media notifications and handlers are displayed on your device/browser. There's also a new artist player property for setting the artist metadata (in the example below it's "Blender Foundation").

Text Tracks Content

You can now pass serialized or deserialized JSON content directly into the TextTrack object or <Track> component.

import { type VTTContent } from '@vidstack/react';

const content: VTTContent = {
  regions: [],
  cues: [
    { startTime: 0, endTime: 5, text: '...' },
    { startTime: 5, endTime: 10, text: '...' },
  ],
};

// Provide JSON directly (can also be serailized - JSON.stringify).
<Track content={content} label="English" kind="captions" lang="en-US" type="json" />;

📝 Updated loading text tracks docs.

Thumbnail Source Types

We've expanded support to a variety of thumbnail source types:

• VTT (sprite or multiple images).
• JSON (VTT cues, array of images, or storyboard).
• Objects.
• Mux storyboards.

Storyboard Example (JSON)

{
  "url": "https://example.com/storyboard.jpg",
  "tileWidth": 256,
  "tileHeight": 160,
  "tiles": [
    { "startTime": 0, "x": 0, "y": 0 },
    { "startTime": 50, "x": 256, "y": 0 }
  ]
}

<media-video-layout thumbnails="/storyboard.json" />

<DefaultVideoLayout thumbnails="/storyboard.json" />

Storyboard Example (Object)

import { type ThumbnailStoryboard } from 'vidstack';

const storyboard: ThumbnailStoryboard = {
  url: 'https://example.com/storyboard.jpg',
  tileWidth: 256,
  tileHeight: 160,
  tiles: [
    { startTime: 0, x: 0, y: 0 },
    { startTime: 50, x: 256, y: 0 },
  ],
};

Can be provided directly to any of the following:

Web Components

// 1. Layouts.
const videoLayout = document.querySelector('media-video-layout');
videoLayout.thumbnails = storyboard;

// 2. Thumbnail component.
const thumbnail = document.querySelector('media-thumbnail');
thumbnail.src = storyboard;

React

// 1. Layouts.
<PlyrLayout thumbnails={storyboard} />
<DefaultVideoLayout thumbnails={storyboard} />

// 2. Thumbnail component.
<Thumbnail.Root src={storyboard}>...</Thumbnail.Root>

// 3. Hook
const thumbnails = useThumbnails(storyboard);

📝 Updated loading thumbnails docs.

📝 Updated useThumbnails docs.

New Tailwind Variants

There's heaps of new Tailwind variants for view type, stream type, and remote playback.

<div class="media-view-audio:... media-stream-dvr:..." />

📝 Updated Tailwind variants docs.

hls.js 1.5

The latest hls.js release (v1.5) takes advantage of ManagedMediaSource (MMS) to finally run on iPhone. We've now included it in our support checks so hls.js will be used as the default streaming engine across all modern browsers starting from iOS 17+. This is a huge win for the web as we can use a single and consistent configurable streaming engine. If you've ever dealt with DRM or setting headers then this will be a huge blessing. It also means playback quality options are available and can be set on iPhone finally.

Misc.

• Switching sources on our CDN bundle was broken.
• New crossOrigin property on poster, slider video, and thumbnail components.
• New disabled prop on gesture components.
• New default layout props: noGestures, seekStep, and sliderChaptersMinWidth.
• Slider chapters in the default layout are now shown based on the width of the slider itself and not the player.
• Media request callbacks are now called on all components and can be cancelled. See cancelling requests.
• New <Title> component.
• New duration player property.
• New hooks: useChapterTitle and useTextCues.
• Fixed white border appearing around posters and thumbnails due to missing src attribute.
• Fixed tooltips occasionally freezing when buttons were clicked.
• Menu resizing was fixed.
• Vimeo chapters are now loaded from the embed.
• Tons of other bug fixes and improvements, see changelog.

What's Next?

It's been an incredible 3+ long years of building media players and this library. For the first time, we're in an amazing place and I can say we're on the brink of being 1.0-ready. We're technically done with building new features but knowing me I might sneak in a suprise or two. From here, I'll be addressing new bugs as they roll in and working on our player product page to help us finally market it. After the official 1.0 announcement, we'll start work on our CMS and Next.js integration around mid-Feb and start rolling it out to users on the waitlist (as seen on our home page). It's honestly a busy time for me as we're doing a bunch of house work and I have a newborn son on the way in April, so I'll try my best to balance everything out!

In conclusion, with ManagedMediaSource and the Fullscreen API landing on iOS, creating custom media players across the web is becoming a reality. We believe that the web, in combination with React and React Native, is emerging as the de facto platform for video to thrive. We are thrilled to be at the forefront of building customizable media experiences on the frontend. We're incredibly excited for our future libraries and services that will follow the player! Onwards!

Until next time friends 🍎

[BlackDahlia313]

Out of the box Nuxt support?!? Whoah! This is amazing news! Great work! What an amazing release!

[thomaskant]

Awesome work! 🚀✨

[Jumaron]

Awesome! Tbh adding simple VAST Prerole support like Plyr has with an ad.url would make Plyr for a lot of people I know myself included obsolete. I really love the Design behind vidstack but thats the only thing its missing/I'am waiting for since it forces me to stick with Plyr ^^
So keep going! :)

[shmaltz]

This. Please add VAST pre roll with ad.url support.
Thank you 😊