Skip to content
Video element MSE friendly extends
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.npmignore
LICENSE
index.js
index.mjs
package.json
readme.md
test.js

readme.md

Helps sequence clips on demand

Setup

# Fetch latest from github
npm i thewhodidthis/seamless

Usage

import { Seamless, SeamlessClip } from '@thewhodidthis/seamless'

// Extends `HTMLVideoElement` built-in, Safari needs polyfilling
const video = new Seamless()

for (let i = 0; i < 4; i += 1) {
  const clip = new SeamlessClip()

  clip.setAttribute('src', `fragment-${i}.mp4`)
  video.appendChild(clip)
}

// Render via `connectedCallback`
document.body.appendChild(video)

Encoding

# Add keyframes for segmenting, eg. every second
# https://superuser.com/questions/908280/what-is-the-correct-way-to-fix-keyframes-in-ffmpeg-for-dash
ffmpeg -i input -c:v libx264 -r 24 -x264opts keyint=24:min-keyint=24 master.mp4

# Print keyframes
ffprobe -select_streams v:0 -skip_frame nokey -show_entries frame=pkt_pts_time master.mp4

# Create segments, eg. every second
ffmpeg -i input -c copy -map 0 -segment_time 1 -f segment -reset_timestamps 1 clip-%03d.mp4

# Create fragments
for f in clip-*.mp4; do mp4fragment --fragment-duration 1000 $f ${f%.mp4}-fragment.mp4; done

References

You can’t perform that action at this time.