Vuedio is a standalone full-featured video player for modern Vue.js applications.
- modern-looking interface
- qualities
- concatenated videos
- keybinds
- touch gestures
- PiP support
- ASS subtitles (using SubtitlesOctopus)
- HLS (using hls.js)
- DASH (using dash.js)
- install
vuedio
package:npm install --save vuedio
- use it in your application:
<template> ... <Vuedio ref="vuedio" /> ... </template> <script> import { Vuedio } from 'vuedio' export default { components: { //... Vuedio }, // ... mounted() { this.$refs.vuedio.src({ type: 'video/mp4', src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }) } } </script>
- include
<script>
tag and styles somewhere:<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuedio.umd.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuedio.min.css"></script>
- use Vuedio in your application:
new Vue({ el: '#app', template: '<Vuedio />' })
Vuedio's sources must be changed dynamically via .src()
method.
That method takes one argument containing a single source
or list of sources. Each source is described as:
{
type?: string // MIME type of video. Used to determine player.
// If none is passed then 'video/mp4' is implied
src?: string // Single url to video. Alias for `urls: <src>`
urls?: string | string[] // Url to video or array of urls.
// If array is passed then videos will be
// concatenated. Has higher priority than `src`
}
Vuedio supports ASS subtitles using SubtitlesOctopus. To enable subtitles support you should do the following:
- Copy all files from /demo/dist/static to some directory on your server
- Set
subtitles-worker
property of Vuedio to path with those files.
Attention! Since SubtitlesOctopus relies on ServiceWorkers, HTTPS must be present when deploying app to production.
Vuedio implements commonly used keybinds on player element. Those are (case-insensitive):
key | action |
---|---|
(space) |
Toggle pause |
M |
Toggle mute |
F |
Toggle fullscreen |
ArrowLeft |
-10s |
Ctrl + ArrowLeft |
-90s |
ArrowRight |
+10s |
Ctrl + ArrowRight |
+90s |
ArrowUp |
+5% volume |
ArrowDown |
-5% volume |
--- | --- |
Scroll up |
+5% volume |
Scroll down |
-5% volume |
Click |
Toggle pause |
Double click |
Toggle fullscreen |
Those before ---
can be disabled by setting :keybinds="false"
Vuedio also implements convenient touch gestures on player element:
- Swipe left: seek backwards
- Swipe right: seek forwards
- Swipe up: turn up volume
- Swipe down: turn down volume
They all can be disabled by settings :gestures="false"
Vuedio module exposes 4 components, two of them are intended for internal usage, but can be used outside. Also Vuedio has some helper functions which can also be helpful outside Vuedio
Description: Vuedio video player component
name | optional (default) | description |
---|---|---|
keybinds |
yes (true ) |
Whether keybinds should be enabled. May be changed at runtime. More in Keybinds section |
gestures |
yes (true ) |
Whether touch gestures should be enabled. May be changed at runtime. More in Gestures section |
no-inject-icons |
yes (false ) |
If true then Material Design icons will not be automatically injected. Use only if you provide own icons via CSS or are sure that MDI are present in the page. |
subtitles-worker |
yes (/libassjs-worker.js ) |
Contains path to SubtitlesOctopus service worker. More in Subtitles section. |
Description: used to change Vuedio sources list. More in Sources section
Returns: void
Description: used to change Vuedio subtitles. More in Subtitles section
Parameters:
src
- Type:
string | null
- Description: Can be either subtitles URL, subtitles content or
null
(to destroy subtitles)
- Type:
options
- Type:
SubtitleOctopusOptions ?= {}
- Description: Additional options to underlying
SubtitlesOctopus
constructor. More in SubtitlesOctopus' documentation.- Additionally accepts
method
,headers
,body
parameters that will be used when XHR is fired (for URLs)
- Additionally accepts
- Type:
srcType
- Type:
'url' | any
- Description:
src
parameter type. Any value except'url'
will count as raw ASS data.
- Type:
Description: used to show a popup for informing about current state
Description: used to change player current time. Do not use .currentTime
or .player.timestamp
as they won't update time player-wide
Description: puts video on pause
Description: removes pause from video
Description: toggles pause on video
Description: alias for formatTime(time, vuedio.totalDuration)
Description: provides an animated play-pause icon.
name | optional (default) | description |
---|---|---|
state |
yes (pause ) |
describes current icon's state. Must be one of play , pause |
duration |
yes (300 ) |
transition duration |