@diracleo/vue-scrubbable-video

vue-scrubbable-video

Have you ever tried to scrub through an HTML5 <video> element by dynamically changing its currentTime property, only to be disappointed by its slow performance and stuttering behavior?

Have you ever wanted to mimic the smooth and responsive video scrubbing-by-scrollbar seen on the Apple AirPods Pro Website, but without the overhead of parsing out JPEG's from your videos and serving them frame-by-frame?

Maybe you've come across this Reddit discussion featuring user markteater who discovered that in order for a video to be scrubbed smoothly, it needs to be encoded with each frame as a keyframe, like this:

ffmpeg -r 30 -i input.mp4 -vcodec libx264 -crf 15 -g 1 -pix_fmt yuv420p output.mp4

Maybe that was your answer. But if you don't want to re-encode your videos with FFMPEG, keep reading.

This component will, in real time, generate snapshots at every frame of your video and output them as canvases which are then shown or hidden depending on scrub position.

Simply replace your <video> element with a <scrubbable-video> component.

CodePen Demo

Features

• Scrub through a video seamlessly without any stuttering
• Specify sources the same way as with a standard <video> element
• Specify the frames-per-second to balance performance and quality
• Specify a start and end time to use only a segment of a video
• Scrubbing is possible even before all frames have been generated
• Connect your own scrubbing controller or tether playback to a scrollbar

Requirements

• Vue.js

Installation

npm

npm install @diracleo/vue-scrubbable-video

external script

<script src="https://unpkg.com/@diracleo/vue-scrubbable-video/dist/vue-scrubbable-video.min.js"></script>

Usage

javascript

import Vue from 'vue'
import App from './App.vue'
import ScrubbableVideo from '@diracleo/vue-scrubbable-video';

Vue.use(ScrubbableVideo)

new Vue({
  el: 'body',
  components: {
    App
  }
})

template

<scrubbable-video :current-progress="myVar" :frames-per-second="10">
  <source src="/path/to/your/video.mp4" type="video/mp4" />
  <source src="/path/to/your/video.webm" type="video/webm" />
</scrubbable-video>

In this example, you will need to set the value of the "myVar" as a number representing the scrub position of the video in percentage form (0 to 100). A typical use case would involve providing this variable as the v-model of a Slider HTML Input

If you are using the component from the externally-included script instead of the modular form, the component name will be <vue-scrubbable-video> instead of <scrubbable-video>. See the CodePen Demo for an example of this type of usage.

scrollmagic.io is a great library if you want your video scrubbing to be controlled by a scrollbar. The CodePen Demo is an example of this integration.

Properties

Property	Type	Default	Required	Description
current-progress	Number (min: 0, max: 100)	0	no	Percentage-based current scrubbed position
frames-per-second	Number (min: 0)	10	no	Granularity of frame-snapshotting
start	Number (min: 0)	0	no	Where, in seconds, the segment will start (omit to use entire video)
end	Number (min: start)	duration of video	no	Where, in seconds, the segment will end (omit to use entire video)

Events

Name	Arguments	Description
frame-unavailable	Number	Fired when an unready frame has been scrubbed-to
frame-shown	Number	Fired when a ready frame has been scrubbed-to
frames-generating	None	Fired when frame generating has begun
frame-ready	Number	Fired when a frame has been generated
frames-ready	None	Fired when all frames have been generated