Skip to main content

Livestreams in mehr als einer Sprache

Aktuell übliche Live-Encoder (Software- wie auch Hardware-Encoder) senden Livestreams per RTMP-Protokoll. Dieses Protokoll unterstützt nur eine Stereo-Tonspur je Stream. Das heißt: mehrere Audio-Kanäle, für beispielsweise verschiedene Sprachen, sind über dies Protokoll nicht vorgesehen.

Alternative Protokolle die mehrere Audiokanäle im selben Stream unterstützen sind jedoch entweder total veraltet und haben große Nachteile (z.B. MPEG-TS UDP oder RTSP, beide Protokolle sind 20+ Jahre alt) oder sind gerade erst neu auf dem Markt, werden von wenigen Encodern unterstützt oder es fehlt trotz vorhandenem Protokoll die Mehrkanal-Ton-Unterstützung (z.B. SRT).

Das heißt für den aktuellen Stand: Sie senden bei Übertragungen mit verschiedenen Sprachen immer mehrere Livestreams parallel. Je Sprache ein Livestream.
In der Regel erfolgt dies mit verschiedenen Live-Encodern parallel, da nur wenige Encoder zwei Streams gleichzeitig senden können. (Neben dem eher nachteiligen höheren Aufwand, hat dies jedoch den großen Vorteil der Redundanz und somit höherer Ausfallsicherheit.)

Sprache des Player: ist die Nutzersprache des Browsers auf D, A oder CH eingestellt, erfolgen Texteinblendungen auf Deutsch. Andernfalls immer auf Englisch.

 

 

Darstellung auf der Webseite:

In der Regel wird auf der Webseite ein Player je Sprache (separat) verwendet. Denn wenn bereits der Aufwand für Simultanübersetzung (für oft hunderte Euro je Stunde) vorgenommen wird, dann wird es auch auf der Webseite diese Sprachen geben. D.h. ein Stream mit englischem Ton wird auf einer Unterseite mit englischem Text, Überschriften, etc. angezeigt und ein spanisch-sprachiger Stream auf einer Unterseite mit spanischem Text präsentiert.

 

Sonderfall: verschiedene Sprachen innerhalb der selben Seite

Sollten Sie die Livestreams mit verschiedenen Sprachen auf der selben Unterseite einbinden, und diese hierbei nicht untereinander mit entsprechenden Überschriften präsentieren, sondern an der selben Position der Webseite (per Klick umstellbar), dann finden Sie im folgenden ein Javascript Beispiel wie dies umgesetzt werden könnte.

<html>

<body>
<style>
    body {
        font-family: arial;
		margin-top: 30px;
    }

    .button_lang {
        background-color: #ccc;
        color: #555;
        padding: 5px 15px;
        border-radius: 5px;
        transition: background-color .3s ease-in-out;
    }

    .button_lang:hover,
    .current_lang {
        background-color: #36b;
        color: #FFF;
        transition: background-color .3s ease-in-out;
        cursor: pointer;
    }

    ul.languageswitch {
        padding-left: 0px;
    }

    ul.languageswitch li {
        width: auto;
        display: inline;
    }
</style>

<ul class="languageswitch">
    <li id="de_click" class="button_lang de">Deutsch</li>
    <li id="en_click" class="button_lang en">English</li>
</ul>

<div>
	<h3 id="streamingplayer_title"></h3>
    <iframe id="streamingplayer_iframe" width="830" height="467" style="border: none" allowfullscreen="allowfullscreen" src=""></iframe>
</div>

<script>
	var german_btn = document.getElementById('de_click')
	var english_btn = document.getElementById('en_click')

    german_btn.addEventListener('click', function () {
        changeLanguage(german_btn, english_btn);
    }, false);

    english_btn.addEventListener('click', function () {
        changeLanguage(english_btn, german_btn);
    }, false);

    function changeLanguage(switchActiveBtn, switchInactiveBtn) {
        if (switchActiveBtn.classList.contains('current_lang')) {
			return
		}
		//Title:
		if (switchActiveBtn.classList.contains('de')) {
			//switch to german player
			document.getElementById('streamingplayer_title').innerHTML = "Beispielüberschrift in Deutsch"
			document.getElementById('streamingplayer_iframe').src = "https://www.blitzvideoserver.de/player.html?serverip=62.113.210.2&serverapp=vod&smil=video-stream-hosting-testvideo.smil&bgimage=video-stream-hosting-testvideo.jpg&autostart=1"
		}
		//Player:
		if (switchActiveBtn.classList.contains('en')) {
			//switch to english player
			document.getElementById('streamingplayer_title').innerHTML = "Example title in english"
			document.getElementById('streamingplayer_iframe').src = "https://www.blitzvideoserver.de/player.html?serverip=62.113.210.2&serverapp=vod&smil=video-stream-hosting-testvideo.smil&bgimage=video-stream-hosting-testvideo.jpg&autostart=1"
		}
		//Button:
		switchActiveBtn.classList.add('current_lang');
		switchInactiveBtn.classList.remove('current_lang');
    }

    function init() {
        changeLanguage(german_btn, english_btn);
    }
    init();
</script>
</body>

</html>

Das Ergebnis sieht dann (ohne Styling) so aus: 

player-switch.gif