Add video-on-demand player for recorded talks #79

benhylau · 2018-09-26T10:54:09Z

Copied live player files over and made some minimal changes to get an embedded VOD player. See notes for actual changes, we can definitely organize the files better to avoid code duplication. This relies on https://ipfs.io infrastructure to stream.

benhylau · 2018-09-26T10:56:39Z

js/vod-stream-embed.js

+
+var ipfs_gateway_self = 'https://ipfs.io'; // IPFS gateway of this node
+var ipfs_gateway_origin = 'https://ipfs.io'; // IPFS gateway of origin stream
+var m3u8_ipfs = 'https://ipfs.io/ipfs/QmZJ5ZbJTfhQXM57PSWYy1VsHRDfL5AckjXy6W7RmP89AX'; // File path to m3u8 with IPFS content via HTTP server


This is hard coded to Opening Talk QmZJ5ZbJTfhQXM57PSWYy1VsHRDfL5AckjXy6W7RmP89AX here, but I imagine we can make a list with all pinned hashes, and have the list below the player change this property.

@garrying @dcwalk does that sound reasonable to do?

benhylau · 2018-09-26T10:57:30Z

_includes/vod-stream-embed.html

+</div>
+
+<script src="/js/vendor/video.min.js?{{site.time | date: '%s%N'}}"></script>
+<script src="/js/vod-stream-embed.js?{{site.time | date: '%s%N'}}"></script>


s/live/vod is the only change in this file.

benhylau · 2018-09-26T10:59:16Z

js/vod-stream-embed.js

+function ipfsStream() {
+  live.src({
+    src: m3u8_ipfs,
+    type: 'video/mp4'


type is changed to video/mp4 here and above.

benhylau · 2018-09-26T10:59:36Z

js/vod-stream-embed.js

+  videojs.options.hls.overrideNative = true;
+}
+
+function httpStream() {


I wonder if we can pass a raw http stream from Internet Archive?

dcwalk · 2018-09-26T12:13:13Z

I was imagining a smaller embed under each video, rather than a player on the page that all were fed into. If folks wanted to "click in" then the behaviour could be to redirect them to the standing player page (that way we only have a single "player" page?)

Also, the list of hashes is mocked up as being part of the session file currently.

benhylau · 2018-09-26T13:50:14Z

Between many players on a page vs. linking out to a player page, I definitely prefer the latter.

Modifying the player to support both live and vod should be reasonably easy. I can give it a shot but would definitely like a review from @garrying

…upport

benhylau · 2018-09-27T11:46:11Z

IPFS only:
http://localhost:4000/stream/?ipfs=QmZJ5ZbJTfhQXM57PSWYy1VsHRDfL5AckjXy6W7RmP89AX

IPFS + HTTP stream:
http://localhost:4000/stream/?ipfs=QmZJ5ZbJTfhQXM57PSWYy1VsHRDfL5AckjXy6W7RmP89AX&http=https://ipfs.io/ipfs/QmZJ5ZbJTfhQXM57PSWYy1VsHRDfL5AckjXy6W7RmP89AX (assuming we will have the latter come from IA later)

For example you can try a stream from IA with our player like this:

http://localhost:4000/stream/?ipfs=QmZJ5ZbJTfhQXM57PSWYy1VsHRDfL5AckjXy6W7RmP89AX&http=https://archive.org/download/decentralizedwebsummitmedia-2018-loglounge/DWeb%20Log%20Lounge%20080118%2001_720p.mp4

which works locally, but I imagine we'd have CORS problems once deployed since the IA mp4 does not have a wildcard Access-Control-Allow-Origin: *

js/vod-stream-embed.js

dcwalk · 2018-09-30T17:30:18Z

streamz.md

+titleDisplay: "Stream"
+---
+
+<style type="text/css">


dcwalk · 2018-09-30T17:30:45Z

stream.md

+---
+layout: page
+order: 0
+title: "Stream"


Can we call this/one not stream? It seems like we are moving toward "player"?

dcwalk · 2018-09-30T17:45:44Z

js/vod-stream-embed.js

+
+var stream_type = 'video/mp4'; // Type of video stream
+var stream_url_ipfs = 'https://ipfs.io/ipfs/' // File path to stream with IPFS content via HTTP server
+var stream_urls_http = []; // Optional list of URLs to stream over HTTP


I'm not sure I understand the flow for how the http stream will be queued, do you imagine there being a list of mirrors + potentially feeding in one?

For recorded ones it only supports a single one via http URL param

dcwalk · 2018-09-30T17:47:02Z

js/video-player-embed.js

+
+live.on('error', function(event) {
+  console.debug(this.error());
+  document.getElementById('loadingTitle').innerHTML = 'Unable to load live stream';


These messages don't seem intuitive if we have a non-stream source

"Unable to load video" might be a good sub if could differentiate on source?

dcwalk · 2018-09-30T17:48:43Z

Thanks @benhylau! I've reviewed with the modicum of insight I have.
Interesting to see this come together! It would be good to merge in to the recorded-talks branch today for a total review tonight/early tomorrow.

@garrying you able to take a look?

dcwalk · 2018-09-30T19:03:16Z

js/live-stream-embed.js

@@ -2,84 +2,7 @@

 var ipfs_gateway_self = 'https://ipfs-gateway.live.mesh.world'; // IPFS gateway of this node


do we want to set gateways in the config? maybe premature

garrying · 2018-09-30T20:43:09Z

js/vod-stream-embed.js

+// Video-on-demand Stream Video
+
+var ipfs_gateway_self = 'https://ipfs.io'; // IPFS gateway of this node
+var ipfs_gateway_origin = 'https://ipfs.io'; // IPFS gateway of origin stream


Not following what this is for and how it corresponds to line 11. We're concating to one gateway?

This allows for swapping out the gateway. This is only relevant for livestream and is defined here for consistency.

garrying · 2018-09-30T20:46:04Z

streamz.md

@@ -0,0 +1,65 @@
+---


Thinking this page will come back to haunt us 🤔

garrying · 2018-09-30T21:20:47Z

Merging this in. I think the major changes were the renaming from stream to video and condition for Unable to load video in video-player-embed.js

* remove unused start/end times fields * initial structure for recorded talks * update talk announcement * add youtube links to session data * remove front part of youtube link * update to display of recorded talks * fix presenter link * orga condition * update thanks order * add ipfs 720 1080 links and update names * update recorded talks page * add alt take to thumbnail images * Add video-on-demand player for recorded talks (#79) * Add video-on-demand player for recorded talks * Add standalone video-on-demand player with ipfs+http dynamic stream support * Add the official video-on-demand player page * Clean up video-on-demand player * syntax stuff * page rename and error condition * updates * minor updates revert to external links * add ipfs icon * fix ipfx icon * play overlay * flip * border video links * svg clean up * update video size indication * Change player gateway to ipfs.infura.io

Add video-on-demand player for recorded talks

d26b819

benhylau requested review from garrying and dcwalk September 26, 2018 10:54

benhylau commented Sep 26, 2018

View reviewed changes

Add standalone video-on-demand player with ipfs+http dynamic stream s…

a2b91a5

…upport

benhylau commented Sep 27, 2018

View reviewed changes

js/vod-stream-embed.js Outdated Show resolved Hide resolved

benhylau added 2 commits September 29, 2018 18:40

Add the official video-on-demand player page

29cc30d

Clean up video-on-demand player

0096766

dcwalk reviewed Sep 30, 2018

View reviewed changes

streamz.md

titleDisplay: "Stream"

---

<style type="text/css">

Copy link

Member

dcwalk Sep 30, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🌍

benhylau reacted with thumbs up emoji

dcwalk reviewed Sep 30, 2018

View reviewed changes

garrying reviewed Sep 30, 2018

View reviewed changes

garrying added 2 commits September 30, 2018 16:52

syntax stuff

2395066

page rename and error condition

64f86c4

garrying merged commit 14df0eb into recorded-talks Sep 30, 2018

garrying deleted the vod-player branch September 30, 2018 21:22

benhylau mentioned this pull request Oct 2, 2018

Modify embedded player to support playback of archived mp4 tomeshnet/ipfs-live-streaming#56

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add video-on-demand player for recorded talks #79

Add video-on-demand player for recorded talks #79

benhylau commented Sep 26, 2018

benhylau Sep 26, 2018

benhylau Sep 26, 2018

benhylau Sep 26, 2018

benhylau Sep 26, 2018

dcwalk commented Sep 26, 2018

benhylau commented Sep 26, 2018

benhylau commented Sep 27, 2018 •

edited

dcwalk Sep 30, 2018

dcwalk Sep 30, 2018

dcwalk Sep 30, 2018

benhylau Sep 30, 2018

dcwalk Sep 30, 2018

dcwalk commented Sep 30, 2018

dcwalk Sep 30, 2018

benhylau Sep 30, 2018

garrying Sep 30, 2018

benhylau Sep 30, 2018

garrying Sep 30, 2018

benhylau Sep 30, 2018

garrying commented Sep 30, 2018

		@@ -2,84 +2,7 @@

		var ipfs_gateway_self = 'https://ipfs-gateway.live.mesh.world'; // IPFS gateway of this node

Add video-on-demand player for recorded talks #79

Add video-on-demand player for recorded talks #79

Conversation

benhylau commented Sep 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcwalk commented Sep 26, 2018

benhylau commented Sep 26, 2018

benhylau commented Sep 27, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dcwalk commented Sep 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

garrying commented Sep 30, 2018

benhylau commented Sep 27, 2018 •

edited