Vidstack Community Skin

[billygozutok]

Vidstack Community Skin

👋 everyone,

The goal of this discussion is to give you an insight into why we’re building a player skin for the community, and the design goals we want to achieve. I've also included some mockups down below. I intended on keeping it simple, but it ended up being longer than I expected. Either way, I hope it helps and provides some clarity moving forward. Feel free to leave your thoughts and opinions in the comments.

Overview

Vidstack Player helps developers build a truly customizable media player. It is extensible, modular, and accessible, to name a few. The UI components for this player package are headless, meaning these components don't come with predefined styles. While this customizability differentiates us from other players today, we acknowledge that it might not suit all instances. We have an assumption based on some feedback that not all developers have the time or interest to build their players from scratch. Another fact to consider is where our communities will come from once we officially merge Plyr and Vime with Vidstack. Both of these libraries offer a default look out of the box. For these reasons, we believe that providing a player skin package alongside our headless UI will provide the maximum level of flexibility and value for developers.

Design Goals

There are a lot of things to consider when designing a media player. In order to deliver a player skin with 1.0, we will focus on achieving three design goals.

1. Feature Parity + Standards - Current media players on the web have plenty of room for change and innovation. However, our focus will be on meeting users where they are today and what they're currently using. Our goal is to build a player skin that offers the same functionality as Vime and Plyr and other players on the web like YouTube, Vimeo, and Wistia, and to deliver a familiar player UI experience. Even though we’re focused on meeting current player UI standards, we’re not limiting developers from extending the player's capability. We’re only providing a good player foundation to use, and if a developer needs to build on top of it - they absolutely can.
2. Accessible - A good media player does not get in the way of a user. One way to achieve this is by considering accessibility. We will focus on removing barriers that prevent interaction with media players and access to media content. Our goal is to provide accessibility solutions for physical disabilities and situational limitations. Some solutions include; 1) closed captions for users that cannot hear or find it inappropriate to use audio, 2) providing subtitles for users to understand the content in their preferred language, 3) keyboard support for users that cannot use or don’t have access to a mouse, 4) clear feedback for different input devices such as keyboard, mouse and touch, and 5) having clear aria labeling and roles for screen readers.
3. Responsive - A responsive design ensures that your player looks good and functions correctly across all devices. However, responsive design is not only about achieving smooth scalability. Our goal is to consider device orientation and how media controls should adjust to deliver a good player experience. For example, on a mobile device, given the limited space available, the settings menu might hold extra media controls, and as you scale up and have more room, these media controls might transition out of the menu.

Non-Goals

As mentioned, the goal of the community skin is not to be overly creative. We want to meet existing expectations and design a great default player that can be used for a variety of use-cases. Once we reach a stable place, we will eventually move on to Vidstack CMS. Here, we will build a state-of-the-art media player that includes advanced player and accessibility features.

Desktop Mockups

Video Player

-- base

-- with title & chapters

Audio Player

-- base

-- with title & chapters

--with title, chapters & poster

Mobile Mockups

WIP

[ewilliam]

im so happy that accessibility is a first class goal! gallaudet university (for deaf folk) will be building innovative products with vidstack to serve our sign language community.

[pietrop]

Looks great!
Love that the audio player has a design for captions!
Do you have any designs for mobile?

[billygozutok]

Thank you Pietro! I was and still am very surprised that audio players don't have captions... I am currently working on designing the video player experience for mobile devices. I will be sharing some work by the end of today 😊

[billygozutok]

Video Player 🥳

Detailed Designs 👇

Mobile

Desktop

[billygozutok]

@matpo Hey Mat, thanks for your kind words! I was just wondering though, in regards to the live stream without a time slider - how are your users able to go back? For example, when you have a slider your users can watch live or go back in time to rewatch, they have complete control. Are you solving this in another way when you don't provide the user a slider to interact with?

[matpo]

@billygozutok Hey Billy, the design without time slider is for lives that don't allow going back, like a TV (ex on Twitch), and with the slider only for lives that allow it, like on YouTube. Most of the time, it depends on the playlist (HLS, Dash...) duration.

Moreover, generally, for lives with small playlist and without time slider, we cannot determine automatically the total duration of the live, so we don't show any time (ex. a 24/24h web TV).

[rdoolfop]

Video Player 🥳

Detailed Designs 👇

Mobile
Desktop

Will this be the visual basis?
I thought it was amazing! I hope you use this base
Nice work and my thanks

[vynxc]

how can i use this?

[billygozutok]

👋 @chaycee, this community skin isn't available yet. We'll be working on it very soon!

There are several ways you can get notified when it's ready:
• You can follow the notification for this discussion
• You can follow us on Twitter
• You can join our community on Discord

[pietrop]

👋 I've seen there's support for multiple captions, any chance there's also going to be support for multiple audio tracks (eg fro accessibility and/or translations)?

[mihar-22]

Yep! I haven't implemend that before so not sure on details. If you have any insight on it love to hear it :)

Edit: Turns out I have implemented this before in my other player (Vime), I just don't remember since it was a while ago. I can check that implementation out too.

[billygozutok]

Audio Player 🥳

Detailed Designs 👇

Light Theme

Mobile

Desktop

Dark Theme

Mobile

Desktop

[blairliikala]

These look great! The menus especially look easy, and the chapter markers are solid. Would make the one suggestion to keep the timeline easy to click on like a button, and not be too thin or small where a lot of cursor accuracy is needed. Seeing a placeholder to overlay additional content on the timeline like images, audio waveforms, or popularity (ex: YouTube) would be a differentiator to other players. Also second the comment on seeing a live stream variation.

[billygozutok]

Thanks Blair! I referenced YouTube's slider. It's currently 5px, and when hovered it will grow to 10px. Like this 👇

[mihar-22]

I'll just add that the slider has a 48px height touch target area even if the visual track is ~5-12px.

[blairliikala]

Ah got it. So will it grow before the cursor is over the white of the slider, or grow after being hovered? Just watching out for too much animation in a small area.

[billygozutok]

Nope, it will grow on hover. We'll have a better idea when we start building it but I 100% agree - we need to make sure that the animations aren't too much.

[pietrop]

One other 💡 to think about, (which could very well be outside of the scope of v1) is a transcription button. Along side captions, transcripts are becoming a growing requirement for accessibility needs.

We currently implement this a callback, and the button is just a placeholder, the logic for the transcript is external to the player with a modal etc.. but there's a few things to think about there

1. Is the transcript internal to the player?
2. What's the data structure of the transcript?
3. is there a way to handle these two above that is flexible enough for a variety of use cases, and changing requirements (eg there is no W3C spec for transcripts, last I checked)

video example

Screenshots video

audio example

Screenshots audio

[billygozutok]

I 100% agree with you. Transcripts are important for accessibility reasons - but it's outside our scope for the community skin. We will include this for our CMS product. These are the ideas I have gathered so far for accessibility features 👇

Click to see accessibility table

[sedubois]

This audio player looks great. I would just need the image to be displayed as a big poster above the player bar instead of a small icon. As if it were a video player, only with a static image. A main goal we would have in choosing Vidstack would be to maintain a similar UX for both video and audio.

Keep up the good work.

[billygozutok]

Live Player 🥳

Detailed Designs 👇

There are two types of live player designs. The first one is a standard live stream which is always resumed from where the stream is currently at. The second is a Live Digital Video Recording (DVR) in which the user can pause, rewind, and play an ongoing live stream from any point.

Live

Video

Mobile

Desktop

Audio

Mobile + Desktop

Live DVR

Video

Mobile

Desktop

Audio

Mobile + Desktop

[trueChazza]

This looks amazing, nice work!

[shrkwt]

hi, I really appreciate the work on vidstack.
I would like to know about the work on preview thumbnail feature.
here's some that I suggest :

1. The thumbnails on video frame only while using the scrubber on https://plyr.io/
2. Something like this can also be helpful :

---

[billygozutok]

Thank you heaps @gaminglnk 😺

Just letting you know:
• With our recent release, 0.4 - Part 1 (#786), we now support preview thumbnails.
• You can also read through our documentation to learn how to use the component (https://www.vidstack.io/docs/player/components/sliders/slider-thumbnail).

In regards to the community skin, the design of the thumbnail will look like this 👇

Time Slider:

Chapters Slider:

[byte-lingual]

Design and functionality in a superb product is everything. This and plyr are the video app I think people have been waiting for. I want to add an idea for a feature that I believe people would appreciate. Will you create an option in the settings to change the skip forward/ reverse time interval to 1, 2, 3, 5, and 10 seconds? This would be great for someone trying to learn a new language, watch how someone installed a part in a car or cut a rafter for a house, replay that last punch from a ufc fight, etc. Often times the 10 second interval skip is too far back. No other players have this feature and surprisingly very few desktop players have this ability. The Audio app could benefit from this too. Thanks to you developers for making this superb video app.

[billygozutok]

Thank you for sharing your idea! Having that level of control for someone learning (for example) is a great idea. We have a bunch of ways we're thinking about the settings menu and how we can customize the viewing experience. For now, we tamed our ideas and we thought of keeping the first version of the community skin simple and general for all use cases. Let's get the first version out and then we can go wicked about all the cool ways we can make it better. PS I have noted this idea 😊

[shrkwt]

Also, one small thing,
To provide a better experience for mobile device users I suggest a feature of auto switching between landscape and portrait mode while toggling the full-screen.

This is a feature that plyr lacks and makes itself less appealing when a user uses full-screen on mobile devices.
On the contrary, I saw that this is present in vime.

[billygozutok]

The fullscreen behavior will work the same as Vime. When you select the button it will take you to fullscreen landscape, and when you select it again it will exit fullscreen and take you back into the portrait view 😊

[DaniHRE]

How can i use this theme?
It's available?
@billygozutok

[Mister-Hope]

Obviously not, check milestone plz

My suggestion is to use vime or plyr until vidstack touch stable v1

[billygozutok]

👋 @DaniHRE , the Vidstack community skin isn't available just yet. But we'll be working on building it very soon! You can always follow our roadmap here 👉 https://github.com/orgs/vidstack/projects/1/views/1?groupedBy%5BcolumnId%5D=Milestone

[Mister-Hope]

@DaniHRE So why our replies make you "Confused"? This is a WIP open-source project with a clear roadmap.

[DaniHRE]

Thanks to your explanation. I hadn't seen the project properly and left without knowing it, I apologize. @Mister-Hope

[MuhammadBayiz]

A suggestion that would benefit Mobile users, A Gesture Navigator (Double-Tap, Single-Tap, Slide)
• Double tap when pressed in the right side of the player it should skip 10 Sec forward and when pressed in the left side of the player it would go back 10 sec backwards and also when pressed in the center of the player it should play/pause the video
• single tap to show/hide the controls
• slide down from the center of the player should exit the Fullscreen

[billygozutok]

👋 @MohamadBayz, thank you, I couldn't agree more. Mobile gesture navigation is important for a great player experience. I know that Youtube is a good reference for gestures. If you have any more examples you've seen that you really appreciated, please share them!

[dukesx]

Hey! Amazing work but just a suggestion, Vime didnt have a "play" button in the middle of poster and neither did it give a way to have a custom component where we could use a React component as poster ( Nextjs Image + a blacked out div to give faded effect) . Would love to have these features !

[Eusebius1920]

If using the chapters functionality and not providing cues / chapters such that

• the first cue / chapter starts at 0:00
• the last cue/ chapter ends at the end of the video

then die chapters in the progress bar are displayed incorrectly.

[trry-hub]

现在有进展么

[nkitsaini]

Hi! so the roadmap seems to no longer be available at 👉 github.com/orgs/vidstack/projects/1/views/1?groupedBy%5BcolumnId%5D=Milestone. And I think only some of the skins are implemented, please forgive if I missed something in docs.

I could only get the following skin to work for audio player:

And it has some issues which makes it not so suitable for a podcast player, namely:

1. You can't seek forward and backward while it is buffering, so if you know you have to go 30 seconds ahead you have to seek forward, wait, seek, wait, seek. Sometimes this also (rather annoyingly) results in accidentally seeking by clicking the progress bar, as it extends while buffering.
2. The title is not visible while the audio is playing.

It would be helpful to know if the other skits are still on roadmap. Or if there is easy way to implement them, if I try to not use the default layout I lose a lot of good styling.

By the way, semi-related but there are two other features I have seen mostly in advanced player UIs, but might or might not make sense to implement in vidstack:

1. Ability to cancel seek once you start seeking via progress bar
2. Ability to seek to precise duration.

[MatteoGauthier]

Hey ! Any news on the release of Community Skin ?