autoEdit 2 Documentation
1.0.13
1.0.13
  • Introduction
  • Overview
    • Intro
      • Development approach
      • from 1.0.5 to 1.0.6
    • Architecture Overview
      • Lo fi Design Sketches
      • High fidelity sketches in HTML
    • Support the project
    • documentation section template
    • Build / Deployment
      • Deployment/build for Mac OS X
      • Deployment / Build for Linux
      • Deployment / Build for Windows
      • Travis CI continuous build
        • previous travis setup
  • R&D Doc
    • About R&D doc section
    • Transcription & Media Processing
      • Transcription json
      • Transcriber
        • audio to video
        • STT sdks
          • IBM Watson STT
          • Gentle STT
          • Pocketsphinx
      • Video preview conversion
      • Read metadata
    • Hypertranscript
    • Selections, Annotations, Papercuts
      • Selections
      • Annotations
      • Tags
    • Paper-edit
      • Paper-edit json
      • search-filter
      • drag-and-drop
      • Preview Paper-edit video
    • Export
      • EDL export
      • XML export
      • mp4 export
  • Appendix
    • Dev configuration
    • Current db setup
    • EDL Format
    • Reusable components
    • Prerequisites
    • Testing
    • Updating automated documentation
    • ffmpeg and ffprobe in electron
    • Adding STT services
  • Appendix - Data structures
    • IBM Watson json specs
    • Gentle Json transcription specs
    • Pocketsphinx results
    • autoEdit transcription Json
  • QA List
    • QA Intro
  • Adobe Panel
    • autoEdit Adobe CEP Panel dev setup
      • Adobe Extensions HostList codes
    • autoEdit Adobe CEP Panel integration overview
    • Jsx functions for Adobe CEP autoEdit adobe Panel
    • Packaging and distributing Adobe CEP Extensions
      • Packaging signing Adobe CEP Panel in details
      • Submit to Adobe
  • Project Page
    • Build project page
    • Build/update demo front end page
  • Roadmap
    • Improvements
    • Roadmap
      • Paper-editing Roadmap
      • Extra Features Roadmap
      • Future Roadmap
        • Live video editing
        • Social Media Export
        • Translate transcriptions
        • Web app
          • Multi-user collaboration
        • Searchable Editable Archive
        • NLP insights
        • Slack/Chat bot integration
        • Interactive dev tool
        • Phone mms integration with twillio
        • B-roll computational photography
Powered by GitBook
On this page
  • Component/part description
  • Related projects.
  • Implementations Options considered
  • Option: PopcornJS preview sequence.
  • Option: HTML5 Video
  • → Option: HTML5 Video - media fragment
  • Option: moviemasher
  • Option: BBC HTML5 Video compositor
  • Option: BBC Video Context
  • Current implementation
  • What needs refactoring
  1. R&D Doc
  2. Paper-edit

Preview Paper-edit video

Previousdrag-and-dropNextExport

Last updated 6 years ago

Component/part description

Related projects.

Implementations Options considered

BBC Video context "EDL JSON"

BBC Video context previously video compositor.

This is the sequence taken in by tge BBC video compositor to be able to render a video preview in canvas. It takes two tracks, but for our porpuses we can just pass one track. Needs adding type “video”, change startTime to start. And add duration instead of endTime.

var playlist = {
"tracks":[
[{type:"image", src:"assets/aston.png", start:0, duration:10, id:"aston"}],
[{type:"video", src:"assets/title.mp4", start:0, duration:2, id:"title"},
{type:"video", src:"assets/title.mp4", start:2, duration:8, id:"clip1"}]
]
}

Popcorn js

Vanilla js

Two players

Various options see jsfiddle example. Overall popcornjs altho deprecated, was the smoothest one.

Option: PopcornJS preview sequence.

Downside is that it creates canvas(?) and need to re-implement “video” controls for preview as well as progress bar etc.. becomes a very involved component.

It uses Canvas?

Option: HTML5 Video

→ Option: HTML5 Video - media fragment

Webm example for nwjs (nwjs does not support mp4)

var videoSequence = [{"src": "http://dl1.webmfiles.org/big-buck-bunny_trailer.webm
", "inPoint":3.2 , "outPoint":6},
{"src": "http://dl1.webmfiles.org/elephants-dream.webm
", "inPoint": 1, "outPoint":3},
{"src": "http://dl1.webmfiles.org/big-buck-bunny_trailer.webm
", "inPoint": 10, "outPoint":15}] 

Issue: flicker white in between videos

Issue sometimes it says src undefined. I think I needs some if counter < videosequence.kength

Option: moviemasher

Option: BBC HTML5 Video compositor

EDL Json / playlist:

var playlist = { "tracks":[ 
[
{type:"image", src:"assets/aston.png", start:0, duration:10, id:"aston"}
], 
[
{type:"video", src:"assets/title.mp4", start:0, duration:2, id:"title"},
{type:"video", src:"assets/title.mp4", start:2, duration:8, id:"clip1"}
]
]
 }

Media source:

{
    id:"title",             //A unique ID used to identify the created MediaSource
    type:"video",           //A type can be either 'canvas', 'video', or 'image'
    src:"assets/title.mp4", //A URL to load the media from, only works for 'image' and 'video' types.  (See Element vs Source below) 
    start:0,                //The time at which to start playing the created MediaSource 
    sourceStart: 10         //Only applicable to type 'video', the time from within the source file to start playing.
    duration:2              //How long to display the created MediaSource for.
}

However this is now deprecated in favour of BBC video context.

Option: BBC Video Context

Some more research has been done

To try and add as script tag while figure out how to include in browserify. Add it in nwjs folder and reference from there. With just /

Current implementation

Data structures in view components.

What needs refactoring

JSfiddle: Not working, coz no popcorn js CDN but code is correct.

Documentation

JSfidde: Description: a plain vanilla javascript that makes the most of the HTML5 Video element to play a sequence of video segments continuosly, where src, inp point and out point are specified. Notes: Needs refactoring to remove side effects from methods.

JSFiddle: HTML5 Video Play sequence of video segments using format

More on media fragments:

Improved version : using setTimeout

Version with namespace

→ Version with pause state object to resume from paused point within clip segment Relies on adding vars to window object.

HML5 video API Option: client side ffmpeg video concat

It’s in angular tho

Preview/ BBC Video compositor
https://jsfiddle.net/pietrops/0adkfke9/
https://github.com/mozilla/popcorn-docs/blob/gh-pages/modules/_posts/2012-12-12-sequence.md
https://jsfiddle.net/pietrops/q9uwtdee/
https://jsfiddle.net/pietrops/dyxpws41/
http://solutions.brightcove.com/bcls/assets/videos/Bird_Titmouse.mp4#t=2,4
https://youtu.be/LfRRYp6mnu0
https://www.html5rocks.com/en/tutorials/video/basics/
https://stackoverflow.com/questions/26670048/video-flicker-once-upon-change-of-source
https://stackoverflow.com/questions/32843507/html5-play-movie-from-multiple-parts-without-flashing-screen
https://jsfiddle.net/pietrops/u5usa10f/
https://jsfiddle.net/pietrops/98b07h4m/
https://jsfiddle.net/pietrops/kus10b48/
https://www.w3.org/2010/05/video/mediaevents.html
https://bgrins.github.io/videoconverter.js/
http://www.moviemasher.com/
http://www.moviemasher.com/demo/
http://www.moviemasher.com/docs/
https://github.com/bbc/html5-video-compositor
https://github.com/bbc/html5-video-compositor/wiki/Quick-Start-Guide
https://github.com/bbc/html5-video-compositor/wiki/Playlists
https://github.com/bbc/videocontext
https://github.com/bbc/VideoContext/issues/42#issuecomment-296155545
Data structures in paper-edit view components