LNdW 2013: Video Post-Production with HTML5 – Trim/Chapters

Web-Einbindung der Live-Aufnahme

Diese Beschreibung zeigt, wie das Video auf die Player-Seite der Langen Nacht der Wissenschaften eingebunden wurde.

Nachbearbeitung der Live-Aufnahme / Html5

Die Einbindung eines fertig aufgenommenen Files kann mit HTML5 direkt im Browser erfolgen.

Dazu muss das File je nach Browser sowohl im H264/MP4-Format als auch im WebM-Format vorliegen.

Das aus der Regie mit der Mixer-Einheit gemischte Programm wurde mit der nanocosmos-Encoder-Software im Studio live zu einem Wowza-Server gestreamt und parallel auf dem Server als auch lokal im selben Format als MP4-File abgelegt.

Eckdaten: H.264 Video 600 kBits/s, 640×360 Pixel. AAC Audio, 32 kBits/s

Am Anfang der Aufnahme war einige Minuten Vorlauf, der weggeschnitten wurde. Da dies verlustfrei erfolgen sollte (ohne Neukompression), wurde dazu ffmpeg verwendet:

ffmpeg -ss 00:06:49.240 -i aufnahme.mp4 -acodec copy -vcodec copy ausgabe.mp4

Das Ergebnis wurde direkt in die Webseite eingebunden über das HTML5-video-Tag:
        <video id="video">
        <source src="http://www.beuth-media.de/ht/lndw13/video/reportage_lndw_2013.mp4" type="video/mp4" />

Zusätzlich wurden Kaptitelmarken eingefügt und Untertitel, beides im WEBVTT-Format:
        < video id="video" autobuffer="true" controls="true" poster="lndw.png">
        <source src="http://www.beuth-media.de/ht/lndw13/video/reportage_lndw_2013.mp4" type="video/mp4" />
		<track src="kapitel.vtt" label="Untertitel" kind="captions" srclang="de" default >
		<track src="untertitel.vtt" label="Kapitel" kind="chapters" srclang="de" default >
        </video>

Kapitelmarken
WEBVTT

Trailer
00:00:05.000 --> 00:01:00.000

Start
00:15:01.000 --> 00:15:59.000

Lichtlabor
00:16:30.000 --> 00:17:30.000

Interview 1
00:20:20.000 --> 00:22:30.000

iPod-Live WLAN 1
00:23:01.000 --> 00:23:06.000

Interview 2
00:30:01.000 --> 00:35:06.000

iPod-Live WLAN 3
00:39:20.000 --> 00:39:30.000
iPod Live / WLAN

Abmoderation
00:41:20.000 --> 00:55:06.000

Untertitel
WEBVTT

trailer
00:00:05.000 --> 00:01:00.000
Trailer - die Sendung beginnt in 15 min.

start
00:14:58.000 --> 00:14:59.000
Start

Moderation
00:15:10.000 --> 00:15:15.000
Moderation: Caro

00:23:07.000 --> 00:23:10.000
iPod Live / WLAN-Fehler

00:23:10.001 --> 00:23:40.000
iPod Live / WLAN - Wir bitten die Bildfehler zu entschuldigen.

Noch offen:
– Beschreibung Produktion

– Beschreibung Regie

– Beschreibung Live-Player

– Konvertierung nach WebM

– Einbindung in Beuth Box

– …


Web-Einbindung der Live-Aufnahme
Diese Beschreibung zeigt, wie das Video auf die Player-Seite der Langen Nacht der Wissenschaften eingebunden wurde.
Live-Stream auf Webseite
Live Streams können mit bisherigen Browsern nur über Plugins eingebunden werden. Üblicherweise wird ein Flash-Player mit dem RTMP-Protokoll verwendet, so auch in unserem Fall.
Nachbearbeitung der Live-Aufnahme / Html5
Die Einbindung eines fertig aufgenommenen Files kann ab HTML5 direkt im Browser ohne Zusatzplugins erfolgen.
Dazu muss das File je nach Browser sowohl im H264/MP4-Format als auch im WebM-Format vorliegen.
Das aus der Regie mit der Mixer-Einheit gemischte Programm wurde mit der nanocosmos-Encoder-Software im Studio live zu einem Wowza-Server gestreamt und parallel auf dem Server als auch lokal im selben Format als MP4-File abgelegt.
Eckdaten: H.264 Video 600 kBits/s, 640×360 Pixel. AAC Audio, 32 kBits/s
Am Anfang der Aufnahme war einige Minuten Vorlauf, der weggeschnitten wurde. Da dies verlustfrei erfolgen sollte (ohne Neukompression), wurde dazu ffmpeg verwendet:
ffmpeg -ss 00:06:49.240 -i aufnahme.mp4 -acodec copy -vcodec copy ausgabe.mp4

Das Ergebnis wurde direkt in die Webseite eingebunden über das HTML5-video-Tag:
        <video id="video">
        <source src="http://www.beuth-media.de/ht/lndw13/video/reportage_lndw_2013.mp4" type="video/mp4" />

Zusätzlich wurden Kaptitelmarken eingefügt und Untertitel, beides im WEBVTT-Format:
        < video id="video" autobuffer="true" controls="true" poster="lndw.png">
        <source src="http://www.beuth-media.de/ht/lndw13/video/reportage_lndw_2013.mp4" type="video/mp4" />
		<track src="kapitel.vtt" label="Untertitel" kind="captions" srclang="de" default >
		<track src="untertitel.vtt" label="Kapitel" kind="chapters" srclang="de" default >
        </video>

Kapitelmarken
WEBVTT

Trailer
00:00:05.000 --> 00:01:00.000

Start
00:15:01.000 --> 00:15:59.000

Lichtlabor
00:16:30.000 --> 00:17:30.000

Interview 1
00:20:20.000 --> 00:22:30.000

iPod-Live WLAN 1
00:23:01.000 --> 00:23:06.000

Interview 2
00:30:01.000 --> 00:35:06.000

iPod-Live WLAN 3
00:39:20.000 --> 00:39:30.000
iPod Live / WLAN

Abmoderation
00:41:20.000 --> 00:55:06.000

Untertitel
WEBVTT

trailer
00:00:05.000 --> 00:01:00.000
Trailer - die Sendung beginnt in 15 min.

start
00:14:58.000 --> 00:14:59.000
Start

Moderation
00:15:10.000 --> 00:15:15.000
Moderation: Caro

00:23:07.000 --> 00:23:10.000
iPod Live / WLAN-Fehler

00:23:10.001 --> 00:23:40.000
iPod Live / WLAN - Wir bitten die Bildfehler zu entschuldigen.

Noch offen:
– Beschreibung Produktion

– Beschreibung Regie

– Beschreibung Live-Player

– Konvertierung nach WebM

– Einbindung in Beuth Box

– …


Web-Einbindung der Live-Aufnahme
Diese Beschreibung zeigt, wie das Video auf die Player-Seite der Langen Nacht der Wissenschaften eingebunden wurde.
Live-Stream auf Webseite
Live Streams können mit bisherigen Browsern nur über Plugins eingebunden werden. Üblicherweise wird ein Flash-Player mit dem RTMP-Protokoll verwendet, so auch in unserem Fall.
Nachbearbeitung der Live-Aufnahme / Html5
Die Einbindung eines fertig aufgenommenen Files kann ab HTML5 direkt im Browser ohne Zusatzplugins erfolgen.
Dazu muss das File je nach Browser sowohl im H264/MP4-Format als auch im WebM-Format vorliegen.
Das aus der Regie mit der Mixer-Einheit gemischte Programm wurde mit der nanocosmos-Encoder-Software im Studio live zu einem Wowza-Server gestreamt und parallel auf dem Server als auch lokal im selben Format als MP4-File abgelegt.
Eckdaten: H.264 Video 600 kBits/s, 640×360 Pixel. AAC Audio, 32 kBits/s
Am Anfang der Aufnahme war einige Minuten Vorlauf, der weggeschnitten wurde. Da dies verlustfrei erfolgen sollte (ohne Neukompression), wurde dazu ffmpeg verwendet:
ffmpeg -ss 00:06:49.240 -i aufnahme.mp4 -acodec copy -vcodec copy ausgabe.mp4

Das Ergebnis wurde direkt in die Webseite eingebunden über das HTML5-video-Tag:
        <video id="video">
        <source src="http://www.beuth-media.de/ht/lndw13/video/reportage_lndw_2013.mp4" type="video/mp4" />

Zusätzlich wurden Kaptitelmarken eingefügt und Untertitel, beides im WEBVTT-Format:
        < video id="video" autobuffer="true" controls="true" poster="lndw.png">
        <source src="http://www.beuth-media.de/ht/lndw13/video/reportage_lndw_2013.mp4" type="video/mp4" />
		<track src="kapitel.vtt" label="Untertitel" kind="captions" srclang="de" default >
		<track src="untertitel.vtt" label="Kapitel" kind="chapters" srclang="de" default >
        </video>

Kapitelmarken
WEBVTT

Trailer
00:00:05.000 --> 00:01:00.000

Start
00:15:01.000 --> 00:15:59.000

Lichtlabor
00:16:30.000 --> 00:17:30.000

Interview 1
00:20:20.000 --> 00:22:30.000

iPod-Live WLAN 1
00:23:01.000 --> 00:23:06.000

Interview 2
00:30:01.000 --> 00:35:06.000

iPod-Live WLAN 3
00:39:20.000 --> 00:39:30.000
iPod Live / WLAN

Abmoderation
00:41:20.000 --> 00:55:06.000

Untertitel
WEBVTT

trailer
00:00:05.000 --> 00:01:00.000
Trailer - die Sendung beginnt in 15 min.

start
00:14:58.000 --> 00:14:59.000
Start

Moderation
00:15:10.000 --> 00:15:15.000
Moderation: Caro

00:23:07.000 --> 00:23:10.000
iPod Live / WLAN-Fehler

00:23:10.001 --> 00:23:40.000
iPod Live / WLAN - Wir bitten die Bildfehler zu entschuldigen.

Noch offen:
– Beschreibung Produktion

– Beschreibung Regie

– Beschreibung Live-Player

– Konvertierung nach WebM

– Einbindung in Beuth Box

– …