vuetifyjs
[Feature Request] create new v-video component
Problem to solve
With greater brandwidth and data streaming video usage is now availabe, this will enable video on the background, more interactive website. High cool factor, no other js framework gives that kind of functionality out of the box.
Proposed solution
Simple component that will accept video streaming/existing video file. Props: play, stop, repeat. And that's it for the first version.
I sure could use this component right now. Any idea if/when this is going to move forward?
The priority for vuetify team is to prepare for MD2 specs now, so there are no dev resources dedicated to make this enhancement at this time...
also noted by John on the PR created for this by sh7dm
I appreciate the initiative on this one. We haven't yet determined if we want this component and if we did, what features it should have. We can leave it up for now so we can at least discuss and determine what it would look like if we proceeded forward.
It's pretty obvious this feature, and features like v-audio should exist. How it should behave, sure, needs consideration.
Video backgrounds have become very popular, especially on the home page. Video backgrounds are used across all industries from corporate websites to game websites. So it basically a must-have for any platform.
I would also make use of it right away. Please consider video backgrounds and/or video player component.
v-video will be is a wrapper around <video> <img :src> or <canvas> ?
Playground with typical image-to-video crossfade for hero section. Trivial to pull off in userland.
There are some voices asking for regular video player. Here are my thoughts:
- please don't consult this with AI / chat bots – they spit nonsense like asking for alternative player to YouTube videos. There is no alternative. Determined devs can pull streams via unreliable proxy (like Invidious), but anyone else should just move to Vimeo, Mux or anything else outside of YouTube.
- we usually only think about the first layer - bottom bar controls with progress track & icons. Yes, once it is customized, our applications will look more professional. But there is much more going on – keyboard shortcuts, captions as well as scrubbing & chapters
Overall, I like the idea and maybe find some spare time to create a PoC. Just beware, even if we add it to labs, it will never reach anywhere close to plyr, shaka-player.
Every incremental step gets us closer to the goal.
My main use-case for <v-video> is fine-grained control over playback so I can:
- programmatically seek to timestamps (e.g. jump to “00:30” or 30 s),
- expose current progress to drive independent subtitles or chapter links,
- let users navigate to specific moments from deep links or UI buttons.
YouTube is still the most practical source: its catalogue is enormous and familiar to end-users, even if other providers offer cleaner APIs. So a minimal native player that mirrors the v-img API (cover/contain, aspect-ratio, lazy loading) plus a tiny timestamp/goTo() API would already unblock a lot of real-world work in 3.x.
Later iterations could layer on captions, PiP, adaptive streaming, etc.
Happy to test-drive an early PoC and report back with concrete feedback.
Appreciate the honest feedback about AI-generated posts 🙂
I’ll keep using it to help with clarity, but I’ll definitely lean on your expertise moving forward.
(...) fine-grained control over playback
Native <video> exposes currentTime and emits timeupdate event whenever it changes. It would cover all the points.
All v-video would do is to make it "look like" part of the Vuetify/Material, replacing boring grey controls with something matching the rest of your app's theme. Anything extra might be cut as an unnecessary maintenance burden.
- quick draft
- useMediaControls from VueUse
Rough ideas:
- base props:
image,src,sources,aspect-ratio,color,muted,loop, ... - variants:
background[1],simple[2],tube[3],separated[4] #actionsslot – for icons#controlsto override all controlsv-modelforvolume,progressvideoref & "loaded" event should be exposed to allow some advanced operations
Preview
I might be able to draft the PR until the end of the month.
your examples looks really good!!
I explored the idea further, but AI tells me that:
Heads-up re: YouTube support
Love the idea of
v-videofor local / HLS / DASH sources, but note that YouTube can’t be treated like a native<video>:
- ToS requires the official player.
You must embed from
https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=….
Re-skinning, hiding the logo, or replacing the built-in controls violates the Terms and can get your API key or domain blocked.- Custom controls only via the IFrame Player API.
You can readcurrentTime, listen foronStateChange, etc., but you cannot replace the UI. Any Material-style scrubber or volume bar has to sit outside the frame.- Branding must stay visible.
modestbranding=1is allowed; full removal isn’t.- No local caching / re-streaming.
Downloading or serving the content yourself also breaks the ToS.Suggestion
Keepv-videofor self-hosted media and fall back to a wrapped<iframe>for YouTube:<v-video v-if="isLocal" :src="src" :controls="true" /> <iframe v-else :src="`https://www.youtube.com/embed/${videoId}?enablejsapi=1&origin=${origin}&modestbranding=1`" width="560" height="315" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />This way we get a clean Vuetify-styled player where we’re allowed to, while keeping YouTube fully compliant. Hope this saves someone from building a feature Google will just shut down. 😊
This way we get a clean Vuetify-styled player where we’re allowed to, while keeping YouTube fully compliant. Hope this saves someone from building a feature Google will just shut down. 😊
Anyone looking at security concerns? Not trying to be funny, but ask your AI.
valid concern, but we're just prototyping atm
Even while prototyping, take security risks into consideration. Else those will potentially hurt more later down the road.
I watch YT videos in FreeTube for many years now. It pulls them indirectly from Invidious and can use shaka-player it is open source and anyone can dive deeper into the code to understand it or just use it for a month instead of YT to see how stable it is.
For most people it is too much hassle and they should stick to iframe, but anyone with coding skills should at least consider the privacy-forward approach of either self-hosting or using proxy - both approaches will let devs use customized player. It's a matter of control over the data. If users are allowed to link any outside source, the best idea would be to use something like embed-js and don't bother integrating custom player.
Security: assuming devs depend on a single component from Vuetify (a trusted vendor), they give up on external dependencies that may contain vulnerabilities or tracking, hence increasing the security & privacy. I wish community would step in and crowd-source <video> element vulnerabilities (serious ones) and pull up some interesting findings that may impact development.
@m50S79sM6SRNp8Jn, I would appreciate less slapping ideas, and more serious input based on facts. At least make it sound like you've done 30m search on the topic 😄
AI tells me that ToS requires the official player, you cannot replace the UI
AI is full of shit, that isn't mentioned anywhere in the youtube developer documentation or terms of service. modestbranding doesn't do anything since 2023 and they've had the ability to hide the default controls since 2011. There's even documentation for implementing custom controls: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
