diff --git a/README.md b/README.md index 0d8899e..677fda2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -[Live link](https://ipfsvideo.cc/) +# HLS over IPFS video player -## How to use +## How to use: Accepts three query parameters: @@ -8,23 +8,28 @@ Accepts three query parameters: - `source`: optional, defaults to `master.m3u8`. - `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: -``` -#!/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 -``` +- [Big Buck Bunny](https://ipfsvideo.cc/?hash=QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K&title=Big%20Buck%20Bunny) +- [What is the Royal Path? - Royal Path 001](https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title=What+is+the+Royal+Path%3F+-+Royal+Path+001) + +## How to make compatible videos: + +Here is a Bash script you can use to encode a video into a HLS folder with a playlist: + + #!/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`.) 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 -`QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L` - Royal Path episode 001 +- `QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K` - Big Buck Bunny +- `QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L` - Royal Path episode 001 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 -## How to build from source +## Development ### NPM commands @@ -42,6 +47,7 @@ https://ipfsvideo.cc/?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L&title= - serve: run & navigate to a live-build server on localhost port 8888 - build: build & output to output folder dist (overwrites, doesn't delete) - clean: remove caches and dist folder +- deploy: publish dist to GitHub Pages branch --- diff --git a/index.html b/index.html index cc9b618..3c6fa98 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,18 @@ - - - + + + HLS over IPFS video player - + @@ -56,13 +64,79 @@

HLS over IPFS video player

-

This is a tool for viewing videos encoded as HLS. The folder containing this playlist and all its files is uploaded to IPFS, and the hash is provided in the URL as a parameter.

- 
?hash=QmYzdc44xBkVgp8aWJW57KprjDs5j2hmN8g7eDqm5pvY8L
-

It also accepts parameters for source filename (default is master.m3u8) and title. +

+ How to use: +

+

Accepts three query parameters:

+ +

+ Usage Examples: +

+ +

+ How to make + compatible videos: +

+

+ Here is a Bash script you can use to encode a video into a HLS folder + with a playlist:

-

Given at least a valid hash, it should play a video in the browser using JS-IPFS to connect directly to the IPFS network.

+ 
#!/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.) +

+

+ 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: +

+
diff --git a/package-lock.json b/package-lock.json index aad14c1..124aec2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "devDependencies": { "@babel/core": "^7.14.8", "@playwright/test": "^1.12.3", + "git-directory-deploy": "^1.5.1", "parcel": "latest", "playwright": "^1.12.3", "rimraf": "^3.0.2", @@ -6053,6 +6054,19 @@ "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": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -17873,6 +17887,16 @@ "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": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", diff --git a/package.json b/package.json index 5450dde..9310f49 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "build": "parcel build index.html --no-scope-hoist --public-url ./", "serve": "parcel serve index.html --open -p 8888", "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", "dependencies": { @@ -21,6 +22,7 @@ "devDependencies": { "@babel/core": "^7.14.8", "@playwright/test": "^1.12.3", + "git-directory-deploy": "^1.5.1", "parcel": "latest", "playwright": "^1.12.3", "rimraf": "^3.0.2",