-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
218 lines (204 loc) · 8.44 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORF TVthek downloader</title>
<style>
html, body {
margin: 0;
}
body {
display: flex;
justify-content: center;
font-family: sans-serif;
box-sizing: border-box;
}
main {
text-align: center;
width: 40rem;
padding: 4rem 1rem;
}
.subtitle {
color: #222;
letter-spacing: 0.05rem;
}
.bookmarklet {
display: inline-block;
margin-top: 0.5rem;
padding: 0.5rem;
color: black;
border: 0.2rem solid crimson;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0.5rem;
}
.bookmarklet span {
border-bottom: 0.11rem solid #222;
}
section {
margin-top: 3rem;
text-align: left;
}
section ul {
padding: 0 1.5rem
}
section li {
margin-bottom: 0.8rem;
}
pre {
word-break: break-all;
white-space: pre-line;
}
.center, h2 {
text-align: center;
}
h2 {
text-transform: lowercase;
font-weight: bold;
letter-spacing: 0.05rem;
font-size: 1rem;
}
.horizontal-flex {
display: flex;
width: 100%;
max-width: 100vw;
}
.horizontal-flex > * {
flex: 1;
}
video {
width: 100%;
max-height: 40rem;
}
</style>
</head>
<body>
<main>
<p class="subtitle"><span>bookmark the link below by dragging it into your bookmark bar</span></p>
<a class="bookmarklet" href="javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='https://sk22.github.io/orf-downloader/downloader.js?v='+(Date.now());document.body.appendChild(s);})();">
<span>TVthek download</span>
</a>
<section>
<ul>
<li>The bookmark, a so-called <b>bookmarklet</b>, runs a special
script when you open it, instead of opening a website. See
<a href="https://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/">
How-To Geek's beginner guide</a> to learn more.</li>
<li>Open the bookmarklet <b>directly on a TVthek video page</b>.
Running the bookmarlet outside the TVthek will not work.</li>
<li>To create a <b>bookmark on mobile</b>, copy the link, create
a bookmark of this page, and change the URL to the
copied link (which starts with <code>javascript:</code>)</li>
<li>You can show/hide the bookmark bar on desktop Chrome using
<code>Ctrl+Shift+B</code></li>
<li>You can also copy the link directly into the address bar for
one-time use. Your browser might omit the <code>javascript:</code>
part for security reasons. In this case, type it out manually,
because otherwise, the script will not run.</li>
<li>For convenient copy-pasting, here is the bookmarklet link:<br>
<pre>javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='https://sk22.github.io/orf-downloader/downloader.js?v='+(Date.now());document.body.appendChild(s);})();</pre>
</li>
<li>You can look at the script's source code in the GitHub repository:
<a href="https://github.com/sk22/orf-downloader">sk22/orf-downloader</a>
</li>
</ul>
</section>
<section>
<h2>quick start guide</h2>
<div>
<p class="center">tutorial for desktop</p>
<video controls src="./assets/orf-downloader-desktop-chrome.mp4"></video>
</div>
<div>
<p class="center">tutorial for mobile</p>
<video controls src="./assets/orf-downloader-android-chrome.mp4"></video>
</div>
</div>
</section>
<section>
<h2>architectural limitations</h2>
<ul>
<li><b>Single chunks may appear glitchy.</b>
TVthek splits up their full videos into chunks of 10 seconds, as it
uses <a href="https://en.wikipedia.org/wiki/HTTP_Live_Streaming"
>HTTP Live Streaming</a>. Since the individual chunks are not meant
to be played alone, but as a playlist (as defined in the chunklist
files), the beginnings and endings will appear glitchy. Software
like <a href="https://handbrake.fr/">HandBrake</a> should be able
to fix those problems.
</li>
<li><b>TS files cannot be shared on social media.</b>
Most social media websites like Twitter do not accept .ts video files.
You will have to convert it to a compatible format using software like
<a href="https://handbrake.fr/">HandBrake</a>,
<a href="https://ffmpeg.org/">ffmpeg</a>, the
<a href="https://www.videolan.org/vlc/">VLC media player</a>, or an
online converter like
<a href="https://cloudconvert.com/ts-to-mp4">cloudconvert</a>.
(This information is only half true, but I don't know that much about
video encoding, muxing, etc.)
You can, however, upload your downloaded TS file directly to YouTube
(but, regarding copyright, you probably shouldn't).
</li>
<li><b>The tool doesn't convert the files automatically.</b>
This tool runs in your browser and does not communicate with any
third-party server while downloading videos from TVthek.
Since TVthek only provides the videos in the TS format, all this
tool can provide is files in this format. There is no encoding
whatsoever going on; the longer videos are generated by simply
concatenating the single <code>media_n.ts</code> files.
</li>
</ul>
</section>
<section>
<h2>alternatives</h2>
<ul>
<li>
<b><a href="https://ytdl-org.github.io/youtube-dl/index.html">youtube-dl</a></b>:
A download utility for the command line that can extract media from YouTube, and
a <a href="https://github.com/ytdl-org/youtube-dl/tree/master/youtube_dl/extractor">
wide variety</a> of websites, including
<a href="https://github.com/ytdl-org/youtube-dl/blob/1328305851bf2b708f74140b35a600c955d58394/youtube_dl/extractor/extractors.py#L802-L818"
>ORF stations</a>.
The software is most likely more robust than mine,
downloaded videos are automatically muxed as mp4 files via ffmpeg,
but users need to (know how to) use a command line to operate it.
Also, I don't know a way to only download a single section - youtube-dl will always
output multiple video files for each section.
</li>
<li>
<b><a href="https://mediathekview.de/">MediathekView</a></b>:
A desktop program for viewing and downloading media from (german-speaking)
TV channels. Note that there are
<a href="https://forum.mediathekview.de/topic/2546/anleitung-einstellungen-f%C3%BCr-orf-download/2"
>necessary tweaks</a> to be made in order to use MediathekView with ORF.
</li>
<li>
<b><a href="https://jdownloader.org/">JDownloader</a></b>:
A well-known download manager with loads of features and compatible websites.
Using its TVthek plugin, it can also download videos from there. Note that
JDownloader might be a bit overpowered for a task as little as downloading
a single video.
</li>
</ul>
</section>
<section>
<h2>related links</h2>
<ul>
<li>
<a href="https://karl-voit.at/mediathekview/">Karl Voit's article</a> about using
MediathekView to download media from ORF TVthek. This includes the necessary
User-Agent tweaks.
</li>
<li>
<a href="https://www.reddit.com/r/Austria/comments/i1aerj/falls_wer_einen_downloader_f%C3%BCr_die_tvthek_braucht/"
>Reddit post for this tool on r/Austria</a>.
Alternatives are discussed in the comments.
</li>
</ul>
</section>
</main>
</body>
</html>