video.js herunterladen - video.js Quellcode herunterladen

video.js

Anderer Quellcode

Unknown

Herunterladen

Video.js® – Web-Video-Player

Video.js ist ein voll ausgestatteter Open-Source-Videoplayer für alle webbasierten Plattformen.

Video.js unterstützt sofort alle gängigen Medienformate, die im Web verwendet werden, einschließlich Streaming-Formate wie HLS und DASH. Es funktioniert auf Desktops, Mobilgeräten, Tablets und webbasierten Smart-TVs. Es kann durch ein robustes Plugin-Ökosystem weiter erweitert und angepasst werden.

Video.js wurde Mitte 2010 gestartet und wird mittlerweile über viele Jahre hinweg genutzt ~~50.000~~ ~~100.000~~ ~~200.000~~ ~~400.000~~ ~~700.000~~ 800.000 Websites.

Inhaltsverzeichnis

Schnellstart
Mitwirken
Verhaltenskodex
Lizenz

Schnellstart

Dank der großartigen Leute bei Fastly gibt es eine kostenlose, im CDN gehostete Version von Video.js, die jeder nutzen kann. Fügen Sie diese Tags zum <head> Ihres Dokuments hinzu:

 < link href =" //vjs.zencdn.net/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.19.1/video.min.js " > </ script >

Alternativ können Sie Video.js einbinden, indem Sie es von npm beziehen, von GitHub-Releases herunterladen oder über unpkg oder ein anderes JavaScript-CDN wie CDNjs einbinden.

 <!-- unpkg : use the latest version of Video.js -->
< link href =" https://unpkg.com/video.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/video.js/dist/video.min.js " > </ script >

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://unpkg.com/[email protected]/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/[email protected]/dist/video.min.js " > </ script >

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js " > </ script >

Als nächstes ist die Verwendung von Video.js so einfach wie das Erstellen eines <video> -Elements, jedoch mit einem zusätzlichen data-setup Attribut. Dieses Attribut muss mindestens den Wert '{}' haben, kann aber alle Video.js-Optionen enthalten – stellen Sie nur sicher, dass es gültiges JSON enthält!

 < video
    id =" my-player "
    class =" video-js "
    controls
    preload =" auto "
    poster =" //vjs.zencdn.net/v/oceans.png "
    data-setup =' {} ' >
  < source src =" //vjs.zencdn.net/v/oceans.mp4 " type =" video/mp4 " > </ source >
  < source src =" //vjs.zencdn.net/v/oceans.webm " type =" video/webm " > </ source >
  < source src =" //vjs.zencdn.net/v/oceans.ogv " type =" video/ogg " > </ source >
  < p class =" vjs-no-js " >
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    < a href =" https://videojs.com/html5-video-support/ " target =" _blank " >
      supports HTML5 video
    </ a >
  </ p >
</ video >

Wenn die Seite geladen wird, findet Video.js dieses Element und richtet an seiner Stelle automatisch einen Player ein.

Wenn Sie das automatische Setup nicht verwenden möchten, können Sie das data-setup Attribut weglassen und ein <video> -Element manuell mit der videojs -Funktion initialisieren:

 var player = videojs ( 'my-player' ) ;

Die videojs -Funktion akzeptiert auch ein options und einen Rückruf, der aufgerufen wird, wenn der Player bereit ist:

 var options = { } ;

var player = videojs ( 'my-player' , options , function onPlayerReady ( ) {
  videojs . log ( 'Your player is ready!' ) ;

  // In this context, `this` is the player that was created by Video.js.
  this . play ( ) ;

  // How about an event listener?
  this . on ( 'ended' , function ( ) {
    videojs . log ( 'Awww...over so soon?!' ) ;
  } ) ;
} ) ;

Wenn Sie bereit sind, einzutauchen, sind die Seite „Erste Schritte“ und die Dokumentation die besten Anlaufstellen für weitere Informationen. Wenn Sie nicht weiterkommen, besuchen Sie unseren Slack!

Mitwirken

Video.js ist eine kostenlose Open-Source-Bibliothek und wir freuen uns über jede Hilfe, die Sie uns geben möchten – sei es bei der Behebung von Fehlern, der Verbesserung der Dokumentation oder dem Vorschlag neuer Funktionen. Weitere Informationen finden Sie im Beitragsleitfaden!

Video.js verwendet BrowserStack für Kompatibilitätstests.

Verhaltenskodex

Bitte beachten Sie, dass dieses Projekt mit einem Verhaltenskodex für Mitwirkende veröffentlicht wird. Durch die Teilnahme an diesem Projekt erklären Sie sich mit den Bedingungen einverstanden.