-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
187 lines (185 loc) · 6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!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.ico" />
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
color: white;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
code {
white-space: nowrap;
}
#status {
font-size: 2em;
text-align: center;
transition: transform 0.3s 1s ease;
position: fixed;
bottom: 100%;
left: 0;
width: 100%;
height: 3ex;
margin-bottom: -3ex;
}
.is-hiding {
transform: translateY(-3ex);
}
#video {
display: none;
width: 100%;
height: 100%;
}
#help {
width: 80ch;
max-width: 100%;
padding: 1em;
}
pre {
background-color: #ffffff1f;
padding: 0.5em;
overflow: auto;
}
#contextMenu {
position: sticky;
background-color: #2f2f2faf;
color: white;
width: 20em;
}
#contextMenu > div {
border: 1px solid #0000007f;
cursor: pointer;
padding: 0.5em;
}
#contextMenu > div + div {
border-top: none;
}
#contextBackground {
position: fixed;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
.is-hidden {
display: none;
}
</style>
<script type="module" defer="" src="./src/index.js"></script>
</head>
<body>
<video id="video" controls="" controlsList="nodownload" autoplay=""></video>
<div id="status"></div>
</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 <a title="source code" href="https://github.com/seigler/HLS-over-IPFS-video-player/"><svg style="height: 1em; width: 1em;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="97px" height="97px" viewBox="0 0 97 97" enable-background="new 0 0 97 97" xml:space="preserve">
<g>
<path fill="currentcolor" d="M92.71,44.408L52.591,4.291c-2.31-2.311-6.057-2.311-8.369,0l-8.33,8.332L46.459,23.19
c2.456-0.83,5.272-0.273,7.229,1.685c1.969,1.97,2.521,4.81,1.67,7.275l10.186,10.185c2.465-0.85,5.307-0.3,7.275,1.671
c2.75,2.75,2.75,7.206,0,9.958c-2.752,2.751-7.208,2.751-9.961,0c-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997
c0.67,0.332,1.303,0.774,1.861,1.332c2.75,2.75,2.75,7.206,0,9.959c-2.75,2.749-7.209,2.749-9.957,0c-2.75-2.754-2.75-7.21,0-9.959
c0.68-0.679,1.467-1.193,2.307-1.537V36.369c-0.84-0.344-1.625-0.853-2.307-1.537c-2.083-2.082-2.584-5.14-1.516-7.698
L31.798,16.715L4.288,44.222c-2.311,2.313-2.311,6.06,0,8.371l40.121,40.118c2.31,2.311,6.056,2.311,8.369,0L92.71,52.779
C95.021,50.468,95.021,46.719,92.71,44.408z"/>
</g>
</svg></a></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"
ffmpeg -i "../$1" -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 "\n" -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>