Player Release 0.4 - Part 2: Let's Turn and Burn (April 2023)

[mihar-22]

👋

This is part two of a two part release for 0.4 (part one can be found here). I can't stress enough how exciting this release is because it marks all core player features as complete! We also have some spicy roadmap updates in the next steps section below that you should definitely check out. Let's dive in!

Breaking Changes

None 🥳

Media Captions Library (NEW)

Everything checked off really quickly in this release except text tracks and captions. A large bulk of the two weeks was spent just on it! Turns out it's pretty complicated especially if we want to support additional formats and get accessibility right. We released an entirely new library just to make it happen. Our modern captions parsing and rendering library brings you VTT (including regions and karaoke-style captions), SRT, and ASS support. It also enables fine-level customization of cues, timed nodes (past/future), and more!

👉 Check out the new library we built to power Vidstack Player captions. We also have a section in the repo that lists out why native captions are not good enough.

Picture-in-Picture (NEW)

Picture-in-Picture (PIP) support enables you to create a native floating video player so users can continue to watch content while browsing.

• New media store props: canPictureInPicture and pictureInPicture
• New media remote method remote.togglePictureInPicture()
• New media events: picture-in-picture-change and picture-in-picture-error
• New player methods: enterPictureInPicture() and exitPictureInPicture()
• New media data attributes: data-pip and data-can-pip

👉 See the new picture-in-picture guide.

Picture-in-Picture Button (NEW)

Following PIP support we've added a new <media-pip-button> to make it easy to toggle the current PIP state.

👉 See the new <media-pip-button> docs.

Playback Rate (NEW)

The player now supports a playbackRate property for dynamically adjusting playback speed:

HTML

<media-player playback-rate="1.25" />

React

<MediaPlayer playbackRate={1.25}>

Video Quality (NEW)

Video qualities (e.g., 1080p, 720p) are now available on the player via the qualities property which is a live list. Available when using the HLS provider. You can track which qualities are currently present, select a specific quality, or let the streaming engine auto-select.

• New media store props: qualities and quality
• New media remote method remote.changeQuality(1)
• New media events: qualities-change and quality-change

👉 See the new video quality guide.

Audio Tracks (NEW)

Audio tracks are now available on the player via the audioTracks property which is a live list. Available when using the HLS provider and in iOS Safari when loading HLS streams.

• New media store props: audioTracks and audioTrack
• New media remote method remote.changeAudioTrack(1)
• New media events: audio-tracks-change and audio-track-change

👉 See the new audio tracks guide.

Text Tracks (NEW)

Text tracks are now available on the player via the textTracks property which is a live list. This includes our brand new captions parsing engine and support for VTT, SRT, and ASS. We also provide a direct integration for libass out of the box for advanced ASS feature support - fallbacks to our parser and native captions on iOS Safari when custom captions are not visible in native fullscreen.

• New media store props: textTracks and textTrack
• New media remote method remote.changeTextTrack(1, 'showing')
• New media events: text-tracks-change and text-track-change

👉 See the new text tracks guide.

Captions (NEW)

The new <media-captions> component provides out of the box custom captions using our new rendering engine. Supports VTT, SRT, and ASS rendering (not all ASS features currently). It also supports VTT regions and roll-up captions!

👉 See the new <media-captions> component.

Caption Button (NEW)

The new <media-caption-button> toggles the active captions/subtitles visibility when pressed.

👉 See the new <media-caption-button> component.

Source/Track Elements (NEW)

We now support <source> and <track> elements to make it easier for Web Component users to pass in multiple sources and tracks. You can pass them into the <media-outlet> like so:

<media-player>
  <media-outlet>
    <source src="https://media-files.vidstack.io/720p.avi" type="video/avi" />
    <source src="https://media-files.vidstack.io/720p.mp4" type="video/mp4" />
    <track
      src="/media/subs/english.vtt"
      kind="subtitles"
      label="English"
      srclang="en-US"
      default
      data-type="vtt"
    />
  </media-outlet>
</media-player>

You can also dynamically update the list and the player will update accordingly. Including swapping and loading a new provider and updating text tracks!

Fixes

• Avoid conflicting keyboard shortcuts with native controls when active (closes Spacebar Pause Doubling Pause #788).
• Ignore play calls before media is ready for playback. This issue would also cause the player to melt down and stop working.
• Change min-width and min-height on buttons to width and height to make it easier to style. This would cause issues when changing the size with Tailwind as min setting would win.
• Audio media type had a black background when it shouldn't have. It's been removed.
• Slider video would error out if interacted with before media was ready for playback.
• Source changes had stopped working due to a silly regression.
• Invalid media state reset was occuring when the provider changed.
• React HLS callbacks (e.g., onHlsManifestParsed) were not being called.

Next Steps

We've made some roadmap adjustments and the next release 0.5 is bringing you...

Ye, skins! We'll be adding our first skin called the Community Skin that has received awesome feedback and love. It's been a missing piece for most users and we can't wait to deliver!

If you're excited about the Community Skin or just video in general then come join us on Discord! We're always having small chats about video stuff or checking out the cool anime stuff some of the community has started working on. We'd love for you to join and share your experiences. Click the link and say hi!

Until next time friends 🍎

[lirena00]

Really happy with this update and can't wait for skins either XD looking forward to it for sure

[ousszizou]

huge work <3
cheeers @mihar-22

[mifo111]

Thank you very much for the awesome work!
Unfortunately you suddenly seem to cut off the vimeo support from the roadmap?

[sonukryadav]

love your work guys

[IamManchanda]

awesome and huge work guys