Sharing a redundantly uploaded video
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
testem.json
webpack.dev.config.js
webpack.prod.config.js
webpack.test.config.js

README.md

blocktube Build Status

Shares a redundantly uploaded video. Demo & video.json

  • Supports YouTube, Vimeo, and HTML5 video (mp4 or WebM).
  • Creates a disqus thread based on the url of the videoUrl specified so comments persist despite a changing json file.
  • Use the hosted version at https://codystebbins.com/blocktube/?videoUrl= or host your own (latest release in gh-pages branch)
  • Only supported in modern browsers.

Suggest features and file bugs via Github Issues.

video.json

Blocktube requires a video.json file to be specified via the videoUrl= query param. This section explains how to create one. It's recommended that to host the json file on a custom own domain so that storage providers can be changed easily via DNS without impacting blocktube urls in the wild or the disqus thread that uses the json url as an id.

Metadata

{
  "name":"US State of the Union 2013",
  "videos": [ ... ]
}
  • name is the name of the video
  • videos contains the many different sources of a blocktube video. Each element must contain one of the following types, which all have the following properties.
    • name is the name of the button
    • type is the name of the service

YouTube

{
  "type": "youtube",
  "id": "S7doAXkmGJw",
  "name": "WH Youtube"
},
  • id is the YoutubeId of the video. From the v query param on a video url. EX: https://www.youtube.com/watch?v=S7doAXkmGJw

Vimeo

{
  "type": "vimeo",
  "id": "59549698",
  "name": "WH Vimeo"
},
  • id is the VimeoId of the video. At the end of a video url. EX: https://vimeo.com/59549698

HTML5

{
  "type": "html5",
  "mp4": "http://www.whitehouse.gov/videos/2013/February/021213_StateoftheUnion_NoGFX_HD.mp4",
  "webm": "https://upload.wikimedia.org/wikipedia/commons/5/59/2014_State_Of_The_Union_Address_Enhanced.webm",
  "name": "WH & WikiPedia HTML5"
}
  • mp4 is the url of the mp4 encoded video
  • webm is the url of the webm encoded video
  • Recommended to specify both because some browsers only support one or the other.

Developing

  • npm run dev - webpack-dev-server running app. TODO: expand on this once linting and testing is working
  • npm run browser-test --silent - parallel browser test run, meant to be done on developer machines
  • npm test - test run for ci using node
  • npm run build - build app for distribution. /app

Recommended Development Environment

Developer TODOs

Influences

Architecture

Routing

Testing

Build tools