Sharing a redundantly uploaded video
TypeScript JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
testem.json
tsconfig.json
tslint.json
webpack.dev.config.js
webpack.prod.config.js
webpack.test.config.js

README.md

sharetube Build Status

Shares a redundantly uploaded video. Demo & video.json used in demo

  • 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

A video.json file must be specified via the videoUrl= query param. This section explains how to create one.

Metadata

{
  "name":"Sintel Trailer",
  "sources": [ { type: "...", "values": { ... } } ]
}
  • name is the name of the video.
  • sources contains the various sources for the video. Each source must have a type property which determines which values to provide for the values property.

YouTube

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

Vimeo

{
  "type": "vimeo",
  "values": { "id": "131768374" }
},
  • id is the vimeo id of the video. At the end of a video url. EX: https://vimeo.com/59549698

HTML5

{
  "type": "html5",
  "values": {
    "mp4": "https://media.w3.org/2010/05/sintel/trailer.mp4",
    "webm": "https://media.w3.org/2010/05/sintel/trailer.webm",
    "ogg": "https://media.w3.org/2010/05/sintel/trailer.ogv"
  }
}
  • mp4 is the url of the mp4 encoded video
  • webm is the url of the webm encoded video
  • ogg is the url of the ogg encoded video
  • Not providing all three html5 values will mean support across browsers is limited. All three values should be coming from the same source (EX: https://media.w3.org)

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

Influences

TypeScript

Architecture

Routing (not used in this project yet)

Testing

Build tools


Developer TODOs