Bereitstellung von Audio und Video

Ob wir es mit vorab aufgenommenen Audiodateien oder Live-Streams zu tun haben, der Mechanismus, um sie über die <audio> und <video>-Elemente des Browsers bereitzustellen, bleibt ziemlich gleich. Derzeit müssen wir, um alle Browser zu unterstützen, zwei Formate angeben, obwohl sich dies mit der Einführung der MP3- und MP4-Formate in Firefox und Opera schnell ändert. Sie finden Kompatibilitätsinformationen im Leitfaden zu Medientypen und -formaten im Web.

Um Video und Audio bereitzustellen, sieht der allgemeine Arbeitsablauf normalerweise so aus:

1. Überprüfen Sie, welches Format der Browser über Feature-Erkennung unterstützt (normalerweise eine Auswahl aus zwei, wie oben angegeben).
2. Wenn der Browser die Wiedergabe eines der bereitgestellten Formate nicht nativ unterstützt, stellen Sie entweder ein Standbild dar oder verwenden Sie eine Ausweichtechnologie, um das Video bereitzustellen.
3. Identifizieren Sie, wie Sie das Medium abspielen/instanziieren möchten (z.B. ein <video>-Element oder document.createElement('video') vielleicht?)
4. Liefern Sie die Mediendatei an den Player aus.

<audio controls preload="auto">
  <source src="audio-file.mp3" type="audio/mpeg" />

  <!-- fallback for browsers that don't support mp3 -->
  <source src="audio-file.ogg" type="audio/ogg" />

  <!-- fallback for browsers that don't support audio element -->
  <a href="audio-file.mp3">download audio</a>
</audio>

Der obige Code erstellt einen Audioplayer, der versucht, so viel Audio wie möglich für eine reibungslose Wiedergabe vorzuladen.

Weitere Informationen finden Sie in Cross Browser Audio Basics (HTML Audio Im Detail).

<video
  controls
  width="640"
  height="480"
  poster="initial-image.png"
  autoplay
  muted>
  <source src="video-file.mp4" type="video/mp4" />

  <!-- fallback for browsers that don't support mp4 -->
  <source src="video-file.webm" type="video/webm" />

  <!-- specifying subtitle files -->
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
  <track
    src="subtitles_no.vtt"
    kind="subtitles"
    srclang="no"
    label="Norwegian" />

  <!-- fallback for browsers that don't support video element -->
  <a href="video-file.mp4">download video</a>
</video>

Der obige Code erstellt einen Video-Player mit den Abmessungen 640x480 Pixel und zeigt ein Plakatbild an, bis das Video abgespielt wird. Wir weisen das Video an, automatisch abzuspielen, aber standardmäßig stummgeschaltet zu sein.

Weitere Informationen finden Sie unter <video>-Element und Erstellung eines plattformübergreifenden Video-Players.

const myAudio = document.createElement("audio");

if (myAudio.canPlayType("audio/mpeg")) {
  myAudio.setAttribute("src", "audio-file.mp3");
} else if (myAudio.canPlayType("audio/ogg")) {
  myAudio.setAttribute("src", "audio-file.ogg");
}

myAudio.currentTime = 5;
myAudio.play();

Wir setzen die Quelle des Audios abhängig vom Typ der Audiodatei, die der Browser unterstützt, und setzen den Abspielkopf 5 Sekunden vor und versuchen, es abzuspielen.

Es ist auch möglich, ein <audio>-Element mit einer base64-codierten WAV-Datei zu versorgen, wodurch Audio in Echtzeit generiert werden kann:

<audio id="player" src="data:audio/x-wav;base64,UklGRvC…"></audio>

Speak.js verwendet diese Technik.

const myVideo = document.createElement("video");

if (myVideo.canPlayType("video/mp4")) {
  myVideo.setAttribute("src", "video-file.mp4");
} else if (myVideo.canPlayType("video/webm")) {
  myVideo.setAttribute("src", "video-file.webm");
}

myVideo.width = 480;
myVideo.height = 320;

Wir setzen die Quelle des Videos abhängig vom Typ der Videodatei, die der Browser unterstützt. Anschließend setzen wir die Breite und Höhe des Videos.

In diesem Beispiel rufen wir eine MP3-Datei über die fetch() API ab, laden sie in eine Quelle und spielen sie ab.

let audioCtx;
let buffer;
let source;

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("viper.mp3");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

const play = document.getElementById("play");
play.addEventListener("click", async () => {
  if (!audioCtx) {
    audioCtx = new AudioContext();
    await loadAudio();
  }
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.start();
  play.disabled = true;
});

Sie können das vollständige Beispiel live ausführen oder den Quellcode anzeigen.

Erfahren Sie mehr über die Grundlagen der Web Audio API unter Verwendung der Web Audio API.

Es ist auch möglich, einen Live-Stream von einer Webcam und/oder einem Mikrofon mit getUserMedia und der Stream API abzurufen. Dies ist Teil einer breiteren Technologie, die als WebRTC (Web Real-Time Communications) bekannt ist und mit den neuesten Versionen von Chrome, Firefox und Opera kompatibel ist.

Um den Stream von Ihrer Webcam abzugreifen, richten Sie zunächst ein <video>-Element ein:

<video id="webcam" width="480" height="360"></video>

Als nächstes, wenn unterstützt, verbinden Sie die Webcam-Quelle mit dem Videoelement:

if (navigator.mediaDevices) {
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then((stream) => {
      const video = document.getElementById("webcam");
      video.autoplay = true;
      video.srcObject = stream;
    })
    .catch(() => {
      alert(
        "There has been a problem retrieving the streams - are you running on file:/// or did you disallow access?",
      );
    });
} else {
  alert("getUserMedia is not supported in this browser.");
}

Um mehr darüber zu erfahren, lesen Sie unsere Seite über MediaDevices.getUserMedia.

Neue Standards werden eingeführt, um Ihrem Browser zu ermöglichen, Medien von Ihrem Mikro oder Ihrer Kamera mithilfe von getUserMedia aufzunehmen und sofort mit der neuen MediaStream-Aufzeichnungs-API aufzuzeichnen. Sie nehmen den Stream, den Sie von getUserMedia erhalten, geben ihn an ein MediaRecorder-Objekt weiter, nehmen die resultierende Ausgabe und leiten sie an Ihren Audio- oder Videostream weiter*.

Der Hauptmechanismus wird unten dargestellt:

navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    const recorder = new MediaRecorder(stream);

    const data = [];
    recorder.ondataavailable = (e) => {
      data.push(e.data);
    };
    recorder.start();
    recorder.onerror = (e) => {
      throw e.error || new Error(e.name); // e.name is FF non-spec
    };
    recorder.onstop = (e) => {
      const audio = document.createElement("audio");
      audio.src = window.URL.createObjectURL(new Blob(data));
    };
    setTimeout(() => {
      rec.stop();
    }, 5000);
  })
  .catch((error) => {
    console.log(error.message);
  });

Weitere Informationen finden Sie in der MediaStream-Aufzeichnungs-API.

Media Source Extensions ist ein W3C-Arbeitsentwurf, der plant, HTMLMediaElement zu erweitern, um JavaScript das Generieren von Medienstreams zur Wiedergabe zu ermöglichen. JavaScript die Erzeugung von Streams zu ermöglichen, erleichtert eine Vielzahl von Anwendungsfällen wie adaptives Streaming und zeitversetztes Live-Streaming.

Encrypted Media Extensions ist ein W3C-Vorschlag zur Erweiterung von HTMLMediaElement, der APIs bereitstellt, um die Wiedergabe von geschütztem Inhalt zu steuern.

Die API unterstützt Anwendungsfälle, die von der einfachen Clave-Schlüssel-Entschlüsselung bis zu hochwertigen Videos reichen (gegebenenfalls mit einer geeigneten Benutzeragenten-Implementierung). Der Lizenz-/Schlüsselaustausch wird von der Anwendung kontrolliert, was die Entwicklung robuster Wiedergabeanwendungen unterstützt, die eine Vielzahl von Technologien zur Entschlüsselung und Schutz von Inhalten unterstützen.

Eines der Hauptanwendungsgebiete von EME ist es, Browsern die Implementierung von DRM (Digital Rights Management) zu ermöglichen, welches dazu beiträgt, das Kopieren von web-basierten Inhalten (insbesondere Videos) zu verhindern.

Neue Formate und Protokolle werden eingeführt, um adaptives Streaming zu erleichtern. Adaptives Streaming von Medien bedeutet, dass die Bandbreite und typischerweise die Qualität des Streams in Echtzeit entsprechend der verfügbaren Bandbreite des Benutzers geändert werden können. Adaptives Streaming wird häufig in Verbindung mit Live-Streaming verwendet, bei dem die reibungslose Bereitstellung von Audio oder Video entscheidend ist.

Die Hauptformate, die für adaptives Streaming verwendet werden, sind HLS und MPEG-DASH. MSE wurde mit DASH im Sinn entwickelt. MSE definiert Bytestreams entsprechend ISOBMFF und M2TS (beide werden in DASH unterstützt, das letztere wird in HLS unterstützt). Allgemein gesagt, wenn Sie sich für Standards interessieren, nach Flexibilität suchen oder die Unterstützung der meisten modernen Browser wünschen, sind Sie wahrscheinlich mit DASH besser bedient.

DASH bietet auch eine Reihe von Profilen, einschließlich onDemand-Profilen, die keine Vorverarbeitung und Aufteilung von Mediendateien erfordern. Es gibt auch eine Reihe von Cloud-basierten Diensten, die Ihre Medien in HLS und DASH umwandeln.

Weitere Informationen finden Sie unter Live-Streaming von Web-Audio und -Video.

Möglicherweise möchten Sie, dass Ihr Audio- oder Videoplayer in allen Browsern ein einheitliches Aussehen hat oder einfach angepasst wird, um zu Ihrer Seite zu passen. Die allgemeine Technik, um dies zu erreichen, besteht darin, das controls-Attribut zu weglassen, damit die standardmäßigen Browser-Steuerelemente nicht angezeigt werden, benutzerdefinierte Steuerelemente mit HTML und CSS zu erstellen und dann JavaScript zu verwenden, um Ihre Steuerelemente mit der Audio-/Video-API zu verbinden.

Wenn Sie etwas Zusätzliches benötigen, ist es möglich, Funktionen hinzuzufügen, die derzeit nicht in den Standard-Playern vorhanden sind, wie zum Beispiel die Wiedergabegeschwindigkeit, Qualitätsstream-Wechsel oder sogar Audiospektren. Sie können auch wählen, wie Sie Ihren Player responsiv machen – zum Beispiel könnten Sie unter bestimmten Bedingungen die Fortschrittsanzeige entfernen.

Sie können Klick-, Touch- und/oder Tastatureingaben erkennen, um Aktionen wie Abspielen, Pausieren und Scrubbing auszulösen. Es ist oft wichtig, sich an Tastatursteuerungen für Nutzerfreundlichkeit und Barrierefreiheit zu erinnern.

Ein schnelles Beispiel – richten Sie zunächst Ihr Audio und Ihre benutzerdefinierten Steuerelemente in HTML ein:

<audio
  id="my-audio"
  src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio>
<button id="my-control">play</button>

Fügen Sie etwas JavaScript hinzu, um Ereignisse zu erkennen, um das Audio abzuspielen und zu pausieren:

window.onload = () => {
  const myAudio = document.getElementById("my-audio");
  const myControl = document.getElementById("my-control");

  function switchState() {
    if (myAudio.paused) {
      myAudio.play();
      myControl.textContent = "pause";
    } else {
      myAudio.pause();
      myControl.textContent = "play";
    }
  }

  function checkKey(e) {
    if (e.code === "Space") {
      // space bar
      switchState();
    }
  }

  myControl.addEventListener(
    "click",
    () => {
      switchState();
    },
    false,
  );

  window.addEventListener("keypress", checkKey, false);
};

Sie können dieses Beispiel hier ausprobieren. Weitere Informationen finden Sie unter Erstellen Sie Ihren eigenen benutzerdefinierten Audioplayer.

Während das Stoppen der Wiedergabe von Medien so einfach ist wie das Aufrufen der pause()-Methode des Elements, lädt der Browser die Medien weiter herunter, bis das Medienelement durch Garbage Collection entsorgt wird.

Hier ist ein Trick, der den Download sofort stoppt:

const mediaElement = document.querySelector("#myMediaElementID");
mediaElement.removeAttribute("src");
mediaElement.load();

Wenn Sie das src-Attribut des Medienelements entfernen und die load()-Methode aufrufen, geben Sie die mit dem Video verbundenen Ressourcen frei, was den Netzwerkdownload stoppt. Sie müssen load() nach dem Entfernen des Attributs aufrufen, da das bloße Entfernen des src-Attributs nicht den Ladealgorithmus aufruft. Wenn das <video>-Element auch <source>-Element-Nachkommen hat, sollten diese ebenfalls entfernt werden, bevor load() aufgerufen wird.

Beachten Sie, dass das Setzen des src-Attributs auf einen leeren String den Browser tatsächlich dazu veranlasst, so zu tun, als würden Sie eine Videoquelle auf einem relativen Pfad setzen. Dies führt dazu, dass der Browser versucht, einen weiteren Download zu etwas zu unternehmen, das wahrscheinlich kein gültiges Video ist.

Media-Elemente bieten Unterstützung für das Verschieben der aktuellen Wiedergabeposition zu bestimmten Punkten im Inhalt des Mediums. Dies geschieht, indem der Wert der currentTime-Eigenschaft des Elements gesetzt wird; siehe HTMLMediaElement für weitere Details zu den Eigenschaften des Elements. Setzen Sie den Wert auf die Zeit in Sekunden, zu der Sie wollen, dass die Wiedergabe fortgesetzt wird.

Sie können die seekable-Eigenschaft des Elements verwenden, um die Bereiche des Mediums zu bestimmen, die derzeit zum Suchen verfügbar sind. Dies gibt ein TimeRanges-Objekt zurück, das die Zeitbereiche auflistet, zu denen Sie suchen können.

const mediaElement = document.querySelector("#mediaElementID");
mediaElement.seekable.start(0); // Returns the starting time (in seconds)
mediaElement.seekable.end(0); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(0); // Returns the number of seconds the browser has played

Wenn Sie die URI von Medien für ein <audio>- oder <video>-Element angeben, können Sie optional zusätzliche Informationen hinzufügen, um den Teil der Medien anzugeben, der abgespielt werden soll. Um dies zu tun, fügen Sie ein Rautezeichen ("#") gefolgt von der Medienfragmentbeschreibung hinzu.

Ein Zeitbereich wird mit der folgenden Syntax angegeben:

#t=[starttime][,endtime]

Die Zeit kann als Anzahl von Sekunden (als Gleitkommawert) oder als Stunden/Minuten/Sekunden-Zeit angegeben werden, die mit Doppelpunkten getrennt sind (z. B. 2:05:01 für 2 Stunden, 5 Minuten und 1 Sekunde).

Einige Beispiele:

http://example.com/video.ogv#t=10,20

Gibt an, dass das Video den Bereich von 10 Sekunden bis 20 Sekunden abspielen soll.

http://example.com/video.ogv#t=,10.5

Gibt an, dass das Video vom Anfang bis 10,5 Sekunden abspielen soll.

http://example.com/video.ogv#t=,02:00:00

Gibt an, dass das Video vom Anfang bis zu zwei Stunden abspielen soll.

http://example.com/video.ogv#t=60

Gibt an, dass das Video bei 60 Sekunden starten und bis zum Ende des Videos abspielen soll.

Fehler werden an die Kindelemente <source> geliefert, die den fehlerhaften Quellen entsprechen.

Dies ermöglicht es Ihnen, zu erkennen, welche Quellen nicht geladen werden konnten, was nützlich sein kann. Betrachten Sie dieses HTML:

<video>
  <source
    id="mp4_src"
    src="video.mp4"
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source
    id="3gp_src"
    src="video.3gp"
    type='video/3gpp; codecs="mp4v.20.8, samr"' />
  <source
    id="ogg_src"
    src="video.ogv"
    type='video/ogv; codecs="theora, vorbis"' />
</video>

Da Firefox MP4 und 3GP auf einigen Plattformen aufgrund ihrer patentrechtlich belasteten Natur nicht unterstützt, erhalten die <source>-Elemente mit den IDs "mp4_src" und "3gp_src" error-Ereignisse, bevor die Ogg-Ressource geladen wird. Die Quellen werden in der Reihenfolge versucht, in der sie erscheinen, und sobald eine erfolgreich geladen wird, werden die verbleibenden Quellen überhaupt nicht mehr versucht.

Verwenden Sie die folgenden überprüften Quellen innerhalb Ihrer Audio- und Videoelemente, um die Unterstützung zu überprüfen.

• Audio MP3 (type="audio/mpeg"): http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3 (MP3-Audio live abspielen.)
• Audio MP4 (type="audio/mp4"): http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a (MP4-Audio live abspielen.)
• Audio Ogg (type="audio/ogg"): http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg (OGG-Audio live abspielen.)
• Video MP4 (type="video/mp4"): http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v (MP4-Video live abspielen.)
• Video WebM (type="video/webm"): http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm (WebM-Video live abspielen.)
• Video Ogg (type="video/ogg"): http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv (OGG-Video live abspielen.)

Wenn diese nicht abspielen, unterstützt der von Ihnen getestete Browser das angegebene Format nicht. Erwägen Sie, ein anderes Format zu verwenden oder ein Fallback zu verwenden.

Wenn diese funktionieren, aber die von Ihnen bereitgestellten Dateien nicht, gibt es zwei mögliche Probleme:

1. Der Medienserver liefert nicht die richtigen MIME-Typen zusammen mit der Datei

Auch wenn dies normalerweise unterstützt wird, müssen Sie möglicherweise das Folgende zu der .htaccess-Datei Ihres Medienservers hinzufügen.

# AddType TYPE/SUBTYPE EXTENSION

AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga

AddType video/mp4 mp4
AddType video/mp4 m4v
AddType video/ogg ogv
AddType video/webm webm
AddType video/webm webmv

2. Ihre Dateien wurden falsch codiert

Ihre Dateien wurden möglicherweise falsch codiert — versuchen Sie, sie mit einem der folgenden Tools zu codieren, die sich als ziemlich zuverlässig erwiesen haben:

• Audacity — Kostenloser Audio-Editor und Recorder
• Miro — Kostenloser, quelloffener Musik- und Videoplayer
• Handbrake — Open Source Video Transcoder
• Firefogg — Video- und Audio-Codierung für Firefox
• FFmpeg2 — Umfassender Kommandozeilen-Encoder
• Vid.ly — Videoplayer, Transkodierung und Bereitstellung
• Internet Archive — Kostenlose Transkodierung und Speicherung

Um zu erkennen, dass alle Kind-<source>-Elemente nicht geladen wurden, überprüfen Sie den Wert des networkState-Attributs des Mediaelements. Wenn dies HTMLMediaElement.NETWORK_NO_SOURCE ist, wissen Sie, dass alle Quellen nicht geladen werden konnten.

Wenn Sie zu diesem Zeitpunkt eine weitere Quelle hinzufügen, indem Sie ein neues <source>-Element als Kind des Mediaelements einfügen, versucht Gecko, die angegebene Ressource zu laden.

Eine andere Möglichkeit, die Fallback-Inhalte eines Videos anzuzeigen, wenn keine der Quellen im aktuellen Browser dekodiert werden konnte, besteht darin, einen Fehler-Handler auf dem letzten Quellelement hinzuzufügen. Dann können Sie das Video durch seinen Fallback-Inhalt ersetzen:

<video controls>
  <source src="dynamicsearch.mp4" type="video/mp4" />
  <a href="dynamicsearch.mp4">
    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS" />
  </a>
  <p>Click image to play a video demo of dynamic app search</p>
</video>

const v = document.querySelector("video");
const sources = v.querySelectorAll("source");
const lastSource = sources[sources.length - 1];
lastSource.addEventListener(
  "error",
  (ev) => {
    const d = document.createElement("div");
    d.innerHTML = v.innerHTML;
    v.parentNode.replaceChild(d, v);
  },
  false,
);

Es gibt eine Reihe von Audio- und Video-JavaScript-Bibliotheken. Die beliebtesten Bibliotheken ermöglichen es Ihnen, ein einheitliches Player-Design über alle Browser hinweg zu wählen und bieten Fallbacks für Browser, die Audio und Video nicht nativ unterstützen. Fallbacks haben historisch gesehen jetzt veraltete Plugins wie Adobe Flash oder Microsoft Silverlight-Plugins verwendet, um in nicht unterstützenden Browsern einen Mediaplayer bereitzustellen, obwohl diese auf modernen Computern nicht mehr unterstützt werden. Andere Funktionen wie das <track>-Element für Untertitel können auch durch Mediebibliotheken bereitgestellt werden.

• SoundManager
• AmplitudeJS
• HowlerJS

• flowplayer: Kostenlos mit einem Flowplayer-Logo-Wasserzeichen. Open Source (GPL-lizenziert.)
• JWPlayer: Erfordert eine Registrierung zum Download. Open Source Edition (Creative Commons License.)
• SublimeVideo: Erfordert Registrierung. Formularbasierte Einrichtung mit domänenspezifischem Link zur CDN-gehosteten Bibliothek.
• Video.js: Kostenlos und Open Source (Apache 2 Licensed.)

• jPlayer: Kostenlos und Open Source (MIT Licensed.)
• mediaelement.js: Kostenlos und Open Source (MIT Licensed.)

• AudioContext monkeypatch: Ein Polyfill für ältere Versionen der Web Audio API; Open Source (Apache 2 Licensed.)

Erstellen eines plattformübergreifenden Video-Players

Ein Leitfaden zur Erstellung eines grundlegenden plattformübergreifenden Video-Players mit dem <video>-Element.

Grundlagen der Gestaltung von Video-Playern

Nachdem der plattformübergreifende Video-Player im vorherigen Artikel eingerichtet wurde, befasst sich dieser Artikel damit, dem Player eine grundlegende, responsive Gestaltung zu geben.

Grundlagen von plattformübergreifendem Audio

Dieser Artikel bietet einen grundlegenden Leitfaden zur Erstellung eines HTML-Audioplayers, der plattformübergreifend funktioniert, mit allen damit verbundenen Attributen, Eigenschaften und Ereignissen erklärt und einem kurzen Leitfaden zu benutzerdefinierten Steuerungen, die mit der Media-API erstellt wurden.

Media-Puffern, Suchen und Zeitbereiche

Manchmal ist es nützlich zu wissen, wie viel <audio> oder <video> heruntergeladen wurde oder ohne Verzögerung abspielbar ist — ein gutes Beispiel dafür ist die gepufferte Fortschrittsleiste eines Audio- oder Videoplayers. Dieser Artikel behandelt, wie man eine Puffer-/Suchleiste mit TimeRanges und anderen Funktionen der Media-API erstellt.

HTML playbackRate erklärt

Die playbackRate-Eigenschaft ermöglicht es uns, die Geschwindigkeit oder die Rate zu ändern, mit der ein Stück Web-Audio oder Video abgespielt wird. Dieser Artikel erklärt dies im Detail.

Verwendung der Web Audio API

Erklärt die Grundlagen der Verwendung der Web Audio API, um eine Audioquelle abzurufen, zu manipulieren und wiederzugeben.

Live-Streaming von Web-Audio und -Video

Die Live-Streaming-Technologie wird häufig verwendet, um Live-Ereignisse wie Sportveranstaltungen, Konzerte und allgemein TV- und Radioprogramme, die live übertragen werden, zu relayen. Häufig auf nur Streaming verkürzt, ist Live-Streaming der Prozess, Medien 'live' an Computer und Geräte zu übertragen. Dies ist ein ziemlich komplexes und aufstrebendes Thema mit vielen Variablen, so dass wir Ihnen in diesem Artikel einen Überblick geben und zeigen, wie Sie beginnen können.

Einrichten von adaptiven Streaming-Medienquellen

Angenommen, Sie möchten eine adaptive Streaming-Medienquelle auf einem Server einrichten, die innerhalb eines HTML-Mediaelements konsumiert werden soll. Wie würden Sie das machen? Dieser Artikel erklärt dies, indem er sich zwei der gängigsten Formate ansieht: MPEG-DASH und HLS (HTTP Live Streaming).

DASH Adaptive Streaming für HTML 5 Video

Details, wie man adaptives Streaming mit DASH und WebM einrichtet.

Hinzufügen von Untertiteln zu HTML-Videos

Dieser Artikel erklärt, wie man Untertitel zu HTML <video> hinzufügt, unter Verwendung von Web_Video_Text_Tracks_Format und dem <track>-Element.

Web Audio API plattformübergreifende Unterstützung

Ein Leitfaden zur plattformübergreifenden Erstellung von Web-Audio-API-Code.

Einfache Audioaufnahme mit der MediaRecorder API

Erklärt die Grundlagen der Verwendung der MediaStream Recording API, um einen Medienstrom direkt aufzunehmen.

• Das Video-Element
• HTMLVideoElement API
• MediaSource API
• Web Audio API
• MediaStream Aufzeichnungs-API
• getUserMedia
• Ereignisreferenz: Medien