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 |