mirror of
https://github.com/seigler/HLS-over-IPFS-video-player
synced 2025-07-27 01:36:14 +00:00
publish: feat: context menu, link to current time
generated from commit 1b49b532dc
This commit is contained in:
parent
4d7135e639
commit
602b3adcd3
3 changed files with 6 additions and 6 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,4 +1,4 @@
|
|||
<!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}#contextMenu{background-color:#2f2f2faf;color:#fff;position:sticky;width:20em}#contextMenu>div{border:1px solid #0000007f;cursor:pointer;padding:.5em}#contextMenu>div+div{border-top:none}#contextBackground{bottom:0;height:100%;position:fixed;right:0;width:100%}.is-hidden{display:none}</style><script defer src="index.d4354ca8.js"></script></head><body> <video id="video" controls controlslist="nodownload" autoplay></video> <div id="status"></div> <div class="is-hidden" id="contextBackground"> <div id="contextMenu"> <div id="contextMenu-url">Copy video URL</div> <div id="contextMenu-urlWithTime">Copy video URL at current time</div> </div> </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> <li><code>time</code>: optional, start the video at this many seconds</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
|
||||
<!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}#contextMenu{background-color:#2f2f2faf;color:#fff;position:sticky;width:20em}#contextMenu>div{border:1px solid #0000007f;cursor:pointer;padding:.5em}#contextMenu>div+div{border-top:none}#contextBackground{bottom:0;height:100%;position:fixed;right:0;width:100%}.is-hidden{display:none}</style><script defer src="index.33683e9c.js"></script></head><body> <video id="video" controls controlslist="nodownload" autoplay></video> <div id="status"></div> <div class="is-hidden" id="contextBackground"> <div id="contextMenu"> <div id="contextMenu-url">Copy video URL</div> <div id="contextMenu-urlWithTime">Copy video URL at current time</div> </div> </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> <li><code>time</code>: optional, start the video at this many seconds</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 "$outdir"
|
||||
pushd "$outdir"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue