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

feat: improve readme & help text, add gh pages

Browse source
This commit is contained in:
Joshua Seigler 2021-11-29 20:32:53 -05:00
parent 7787cddc20
commit 38d372a603
4 changed files with 133 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -1,6 +1,6 @@
[Live link](https://ipfsvideo.cc/) # HLS over IPFS video player
## How to use ## How to use:
Accepts three query parameters: Accepts three query parameters:
@ -8,23 +8,28 @@ Accepts three query parameters:
- `source`: optional, defaults to `master.m3u8`. - `source`: optional, defaults to `master.m3u8`.
- `title`: optional, allows overriding the browser tab title. - `title`: optional, allows overriding the browser tab title.
Here is a script you can use to encode a video into a HLS folder with a playlist: ## Usage Examples:
``` - [Big Buck Bunny](https://ipfsvideo.cc/?hash=QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K&title=Big%20Buck%20Bunny)
#!/usr/bin/env bash - [What is the Royal Path? - Royal Path 001](https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title=What+is+the+Royal+Path%3F+-+Royal+Path+001)
outdir=${1%.*}
mkdir "$outdir" ## How to make compatible videos:
pushd "$outdir"
ffmpeg -i "../$1" -profile:v baseline -level 3.0 -start_number 0 -hls_time 5 -hls_list_size 0 -f hls master.m3u8 Here is a Bash script you can use to encode a video into a HLS folder with a playlist:
popd
``` #!/usr/bin/env bash
outdir=${1%.*}
mkdir "$outdir"
pushd "$outdir"
ffmpeg -i "../$1" -profile:v baseline -level 3.0 -start_number 0 -hls_time 5 -hls_list_size 0 -f hls master.m3u8
popd
(If you add that to your path as `recode-to-hls` you can convert a folder of MP4 files with the command `ls *.mp4 -1 | xargs -d "\n" -n1 recode-to-hls`.) (If you add that to your path as `recode-to-hls` you can convert a folder of MP4 files with the command `ls *.mp4 -1 | xargs -d "\n" -n1 recode-to-hls`.)
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: 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:
`QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K` - Big Buck Bunny - `QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K` - Big Buck Bunny
`QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L` - Royal Path episode 001 - `QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L` - Royal Path episode 001
The output from the `ipfs` command is the hash to use with this page. The output from the `ipfs` command is the hash to use with this page.
@ -34,7 +39,7 @@ https://ipfsvideo.cc/?hash=QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K&title=
https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title=Royal+Path+001+-+What+is+the+Royal+Path%3F https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title=Royal+Path+001+-+What+is+the+Royal+Path%3F
## How to build from source ## Development
### NPM commands ### NPM commands
@ -42,6 +47,7 @@ https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title=
- serve: run & navigate to a live-build server on localhost port 8888 - serve: run & navigate to a live-build server on localhost port 8888
- build: build & output to output folder dist (overwrites, doesn't delete) - build: build & output to output folder dist (overwrites, doesn't delete)
- clean: remove caches and dist folder - clean: remove caches and dist folder
- deploy: publish dist to GitHub Pages branch
--- ---

98
index.html
View file

@ -1,15 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HLS over IPFS video player</title> <title>HLS over IPFS video player</title>
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico" />
<style> <style>
* { box-sizing: border-box; } * {
html, body { box-sizing: border-box;
}
html,
body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -36,7 +39,7 @@
margin-bottom: -3ex; margin-bottom: -3ex;
} }
.is-hiding { .is-hiding {
transform: translateY(-3ex) transform: translateY(-3ex);
} }
#video { #video {
display: none; display: none;
@ -47,6 +50,11 @@
max-width: 80ch; max-width: 80ch;
padding: 5em; padding: 5em;
} }
pre {
background-color: #ffffff1f;
padding: 0.5em;
overflow: auto;
}
</style> </style>
<script type="module" defer="" src="./src/index.js"></script> <script type="module" defer="" src="./src/index.js"></script>
@ -56,13 +64,79 @@
<div id="status"></div> <div id="status"></div>
<section id="help"> <section id="help">
<h1>HLS over IPFS video player</h1> <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> <h2 id="how-to-use">
<pre>?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L</pre> <a class="anchor" href="#how-to-use"></a>How to use:
<p>It also accepts parameters for <code>source</code> filename (default is <code>master.m3u8</code>) and <code>title</code>. </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> </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> <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> <noscript>
<p><strong>Since your browser is not executing JavaScript, none of this will work.</strong></p> <p>
<strong
>Since your browser is not executing JavaScript, none of this will
work.</strong
>
</p>
</noscript> </noscript>
</section> </section>
</body> </body>

24
package-lock.json generated
View file

@ -16,6 +16,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.14.8", "@babel/core": "^7.14.8",
"@playwright/test": "^1.12.3", "@playwright/test": "^1.12.3",
"git-directory-deploy": "^1.5.1",
"parcel": "latest", "parcel": "latest",
"playwright": "^1.12.3", "playwright": "^1.12.3",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
@ -6053,6 +6054,19 @@
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
} }
}, },
"node_modules/git-directory-deploy": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/git-directory-deploy/-/git-directory-deploy-1.5.1.tgz",
"integrity": "sha1-xPrYwnDWeNXzCfvd6sHtpgytf9I=",
"dev": true,
"dependencies": {
"lodash": "^4.14.2",
"minimist": "^1.1.0"
},
"bin": {
"git-directory-deploy": "index.js"
}
},
"node_modules/glob": { "node_modules/glob": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@ -17873,6 +17887,16 @@
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
} }
}, },
"git-directory-deploy": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/git-directory-deploy/-/git-directory-deploy-1.5.1.tgz",
"integrity": "sha1-xPrYwnDWeNXzCfvd6sHtpgytf9I=",
"dev": true,
"requires": {
"lodash": "^4.14.2",
"minimist": "^1.1.0"
}
},
"glob": { "glob": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",

4
package.json
View file

@ -10,7 +10,8 @@
"build": "parcel build index.html --no-scope-hoist --public-url ./", "build": "parcel build index.html --no-scope-hoist --public-url ./",
"serve": "parcel serve index.html --open -p 8888", "serve": "parcel serve index.html --open -p 8888",
"start": "npm run serve", "start": "npm run serve",
"test": "npm run build && playwright test tests --browser=firefox --retries=3" "test": "npm run build && playwright test tests --browser=firefox --retries=3",
"deploy": "git-directory-deploy --directory dist/"
}, },
"browserslist": "last 1 Chrome version", "browserslist": "last 1 Chrome version",
"dependencies": { "dependencies": {
@ -21,6 +22,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.14.8", "@babel/core": "^7.14.8",
"@playwright/test": "^1.12.3", "@playwright/test": "^1.12.3",
"git-directory-deploy": "^1.5.1",
"parcel": "latest", "parcel": "latest",
"playwright": "^1.12.3", "playwright": "^1.12.3",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",