joshua/HLS-over-IPFS-video-player
1
0
Fork 0
mirror of https://github.com/seigler/HLS-over-IPFS-video-player synced 2025-07-27 01:36:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

publish: feat: improve readme & help text, add gh pages

Browse source 
generated from commit 38d372a603
This commit is contained in:
Joshua Seigler 2021-11-29 20:35:02 -05:00
parent 081a40ca21
commit f7c8e0bcd9
4 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CNAME
View file

@ -1 +0,0 @@
ipfsvideo.cc

8
index.b2892a53.js → index.dbc0a00a.js
View file

File diff suppressed because one or more lines are too long

2
index.b2892a53.js.map → index.dbc0a00a.js.map
View file

File diff suppressed because one or more lines are too long

7
index.html
View file

@ -1 +1,6 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HLS over IPFS video player</title><link rel="icon" href="favicon.e7ae9020.ico"><style>*{box-sizing:border-box}body,html{margin:0;padding:0}body{align-items:center;background-color:#000;color:#fff;display:flex;font-family:sans-serif;justify-content:center}code{white-space:nowrap}#status{bottom:100%;font-size:2em;height:3ex;left:0;margin-bottom:-3ex;position:fixed;text-align:center;transition:transform .3s ease 1s;width:100%}.is-hiding{transform:translateY(-3ex)}#video{display:none;height:100%;width:100%}#help{max-width:80ch;padding:5em}</style><script defer src="index.b2892a53.js"></script></head><body> <video id="video" controls autoplay></video> <div id="status"></div> <section id="help"> <h1>HLS over IPFS video player</h1> <p>This is a tool for viewing videos encoded as <a href="https://github.com/ipfs-examples/js-ipfs-examples/tree/master/examples/browser-video-streaming">HLS</a>. The folder containing this playlist and all its files is uploaded to IPFS, and the hash is provided in the URL as a parameter.</p> <pre>?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L</pre> <p>It also accepts parameters for <code>source</code> filename (default is <code>master.m3u8</code>) and <code>title</code>. </p> <p>Given at least a valid hash, it should play a video in the browser using <a href="https://github.com/ipfs/js-ipfs">JS-IPFS</a> to connect directly to the IPFS network.</p> <noscript> <p><strong>Since your browser is not executing JavaScript, none of this will work.</strong></p> </noscript> </section> </body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HLS over IPFS video player</title><link rel="icon" href="favicon.e7ae9020.ico"><style>*{box-sizing:border-box}body,html{margin:0;padding:0}body{align-items:center;background-color:#000;color:#fff;display:flex;font-family:sans-serif;justify-content:center}code{white-space:nowrap}#status{bottom:100%;font-size:2em;height:3ex;left:0;margin-bottom:-3ex;position:fixed;text-align:center;transition:transform .3s ease 1s;width:100%}.is-hiding{transform:translateY(-3ex)}#video{display:none;height:100%;width:100%}#help{max-width:80ch;padding:5em}pre{background-color:#ffffff1f;overflow:auto;padding:.5em}</style><script defer src="index.dbc0a00a.js"></script></head><body> <video id="video" controls autoplay></video> <div id="status"></div> <section id="help"> <h1>HLS over IPFS video player</h1> <h2 id="how-to-use"> <a class="anchor" href="#how-to-use"></a>How to use: </h2> <p>Accepts three query parameters:</p> <ul> <li> <code>hash</code>: required. The IPFS hash of a folder containing an HLS playlist and its files. </li> <li> <code>source</code>: optional, defaults to <code>master.m3u8</code>. </li> <li> <code>title</code>: optional, allows overriding the browser tab title. </li> </ul> <h2 id="usage-examples"> <a class="anchor" href="#usage-examples"></a>Usage Examples: </h2> <ul> <li> <a href="https://ipfsvideo.cc/?hash=QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K&title=Big%20Buck%20Bunny">Big Buck Bunny</a> </li> <li> <a href="https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title=What+is+the+Royal+Path%3F+-+Royal+Path+001">What is the Royal Path? - Royal Path 001</a> </li> </ul> <h2 id="how-to-make-compatible-videos"> <a class="anchor" href="#how-to-make-compatible-videos"></a>How to make compatible videos: </h2> <p> Here is a Bash script you can use to encode a video into a HLS folder with a playlist: </p> <pre>#!/usr/bin/env bash
outdir=${1%.*}
mkdir &quot;$outdir&quot;
pushd &quot;$outdir&quot;
ffmpeg -i &quot;../$1&quot; -profile:v baseline -level 3.0 -start_number 0 -hls_time 5 -hls_list_size 0 -f hls master.m3u8
popd</pre> <p> (If you add that to your path as <code>recode-to-hls</code> you can convert a folder of MP4 files with the command <code>ls *.mp4 -1 | xargs -d &quot;\n&quot; -n1 recode-to-hls</code>.) </p> <p> A folder produced this way can be posted to IPFS, and that hash is used in this page URL. Here are two hashes created following this format: </p> <ul> <li> <code>QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K</code> - Big Buck Bunny </li> <li> <code>QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L</code> - Royal Path episode 001 </li> </ul> <noscript> <p> <strong>Since your browser is not executing JavaScript, none of this will work.</strong> </p> </noscript> </section> </body></html>