Video-Player integrieren + Timecode auslesen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abspielen
auslese
beispiel
browser
echtzeit
einbinden
empfehlen
format
frage
grosses problem
guide
http
info
konverter
plattform
tag
tun
url
video
weben
-
Ich möchte einen Video-Player auf meiner Seite einbetten und über einen Button die aktuelle Video-Spielzeit tag/auslese">auslesen...und über einen zweiten Button ein anderes Video ab einem festgelegten Timecode im Player abspielen.
Meine Fragen:
1. Ich wollte es mit dem <video>-Tag umsetzen, finde aber kein Attribut über das man die Startzeit beeinflussen kann. Im Netz finde ich auch nix Hilfreiches zu diesem Tag. Wo gibt es umfangreiche Infos dazu?
2. Der integrierte Player sollte später natürlich auf möglichst vielen Plattformen und Browsern möglichst viele Video-Formate anzeigen können. Welche Möglichkeiten habe noch, außer <video>? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würde dir empfehlen, das ganze über einen externen Dienst wie YouTube zu realisieren. Youtube hat z.B. eine API, mit der Du auch die aktuelle Zeit auslesen kannst: https://developers.google.com/youtube/iframe_api_reference#top_of_page
Wenn Dus selber machen willst, gibt es verschiedene fertige HTML5 Video Player, die dir die ganze komplizierte Arbeit abnehmen, Google hat da auf die schnelle z.B. http://docs.videojs.com/ gefunden.
Wenn Du wirklich alles selber machen willst, les Dir einfach mal das hier durch: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
Da wird unter anderem beschrieben, wie Du denn die audio/video Tags mit Javascript entsprechend kontrollieren kannst.
Edit: Ansonsten gibts natürlich auch immer noch die HTML Spezifikation des video Tags: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
Beitrag zuletzt geändert: 19.7.2016 0:29:44 von davidlw -
Ich kann nicht abschließend beurteilen, ob dein Vorhaben umsetzbar ist, aber wenn überhaupt, dann mit JavaScript. Das video-Element kann verschiedene events auslösen, die man mit anderen Aktionen koppeln kann. Mehr Infos findest du z.B.
https://www.w3.org/2010/05/video/mediaevents.html
https://developer.mozilla.org/de/docs/Web/Guide/Events/Media_events
https://github.com/oscarotero/jQuery.media
zu 2.
Viele Jahre lang war Adobes Flash das Nonplusultra für die Wiedergabe von Audio und Video. Flash wird aber immer mehr verdrängt und auf mobilen Plattformen nur halbherzig oder gar nicht unterstützt.<video> ist nach meinen Infos die aktuellste Variante.
Möglichst alle Plattformen/Browser abzudecken ist natürlich sehr erstrebenswert. Man kann bei <video> mehrere scr parallel einbinden, so dass der Browser auswählt, mit welchem Format er zurechtkommt. Hier
http://camendesign.co.uk/code/video_for_everybody
findest du Beispiele, wie das aussieht. Man nimmt also den gleichen Inhalt in unterschiedlichen Formaten.
Hier
http://caniuse.com/#feat=video
findest du jede Menge weiterführende Infos zum Video-Tag
PS: Jetzt hat davidlw zwar schon was geschrieben, aber ich schicke das trotzdem noch hinterher. -
davidlw schrieb:
Ich würde dir empfehlen....
Danke für eure schnellen, umfangreichen Antworten!
Ich hatte eigentlich geplant es mit <video>, weil man damit die meisten Plattform-Browser-Varianten abdecken kann.
(Umsetzung als OnePage-Design in HTML, CSS, JavascriptjQuery etc.)
Bevor ich allerdings zum Programmieren komme, muss ich folgendes Problem klären:
Sämtliche Videos, die im Player abgespielt werden sollen, liegen ausschliesslich lokal vor...in diversen Formaten beim User auf HD...soweit ich weiß kann <video> nur .mp4 oder .ogg wiedergeben...GROSSES PROBLEM!
Der Player müsste viele gängige Formate darstellen können.
Kann man <video> diesbezüglich erweitern, Codecs hinzufügen etc.?
Gibt es einen Echtzeit-Konverter zu .mp4, der auch offline funktioniert!, den ich einbinden kann?
Was könnte ich sonst tun?
-
dandy-nagel schrieb:
Sämtliche Videos, die im Player abgespielt werden sollen, liegen ausschliesslich lokal vor...in diversen Formaten beim User auf HD...soweit ich weiß kann <video> nur .mp4 oder .ogg wiedergeben...GROSSES PROBLEM!
Der Player müsste viele gängige Formate darstellen können.
Kann man <video> diesbezüglich erweitern, Codecs hinzufügen etc.?
Gibt es einen Echtzeit-Konverter zu .mp4, der auch offline funktioniert!, den ich einbinden kann?
Was könnte ich sonst tun?
Lokale Dateien auf einer Website - wie soll das denn bitte gehen?
Die Frage, welche Formate <video> abspielen kann hängt vom Browser ab, ggf. auch noch davon, welche Codecs der Nutzer installiert hat, dass kann man auf der von mir installierten Quelle caniuse.com nachlesen, Beispiel zum WebM Format http://caniuse.com/#feat=webm.
Der am meisten gebräuchliche Konverter ist FFmpeg (siehe ffmpeg.org) - aber Echtzeit? Warum? Dann müsste man ja das selbe Video immer wieder konvertieren, wenn es abgespielt werden soll.
Nur noch mal der begrifflichen Klarstellung: mit <video> wird der Browser direkt zum Player, das kann man leicht testen, in dem man Videos direkt im Browser aufruft. Beispiel:
http://media-stream-pmd.rbb-online.de/content/d0abef99-d223-421b-bf3a-527725ba7007_a8ed96a5-1376-4339-8365-11c2ff97fdfc.mp4 -
Lokale Videos abspielen geht durchaus, siehe z.B. http://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag
Wie mein-wunschname schon sagte, ist es browserabhängig, welche Codecs denn konkret unterstützt werden, das hat auch weniger was mit der Dateiendung zu tun, da einige Dateiformate Containerformate sind, die unterschiedliche Codecs beinhalten können. Siehe https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats für eine Liste unterstützter Formate von Firefox, ich bin mir sicher, da lässt sich für alle anderen großen Browser was ähnliches finden.
Und nein, einfach mal schnell selbst einen "bauen" und einbinden, kannst Du nicht ;)
Deswegen habe ich ja in meinem letzten Post YouTube o.ä. empfohlen, solche Plattformen tun mehr für die Plattformunabhängigkeit, als Du als Privatperson jemals imstande sein wirst zu tun.
Videos auf der Festplatte des Nutzers können die aber natürlich nicht wiedergeben.
Wie stellst Du dir das mit dem echtzeit Konverter denn vor? Dass Deine Benutzer den herunterladen und das Ergebnis an den Browser weiterleiten? Ich mein, man könnte sicherlich die Ausgabe von ffmpeg in den Browser pipen, aber der Sinn ergibt sich da für mich echt nicht. Warum können die ihre Videos eigentlich nicht einfach in einem beliebigen Videoplayer öffnen, der den Codec unterstützt?
Vielleicht erklärst Du uns einfach mal genauer, was Du denn eigentlich vorhast, dann können wir Dir vielleicht auch konkreter helfen. -
davidlw schrieb:
Lokale Videos abspielen geht durchaus, siehe z.B. http://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag
Ja, das ist klar, dazu braucht man nicht mal den video-Tag - einfach Video-Datei in einen Browser-Tab ziehen und schon läuft es. Mir ging es nur um die Nutzung lokaler Daten auf einer Webseite, aber das ist ohnehin nur ein Nebenthema hier.
Beitrag zuletzt geändert: 19.7.2016 23:23:43 von mein-wunschname -
Am einfachsten machst es, indem du auf Youtube ein Video hochlädst und dieses auf deiner Homepage verlinkst.
Du kannst es dann auch von der Website aus anschauen, nur ist das Video bei Youtube gespeichert. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
