Untertitel im Frontend - Githubissues

saerdnaer commented 8 years ago

Der mediaelement.js Player den wir aktuell benutzen, hat auch schon Unterstützung bzw. nen Polyfill für Untertitel. Wenn #47 geklärt ist, muss man im Prinzip lediglich innerhalb des Video Elements, pro SRT Datei ein Track Element hinzufügen:

<video class='video' controls='controls' data-id='2806' height='360' poster='https://static.media.ccc.de/media/congress/2015/7550-hd_preview.jpg' width='640'>
  <source src='http://cdn.media.ccc.de/congress/2015/webm-hd/32c3-7550-en-Opening_Event_webm-hd.webm' type='video/webm'>
  <source src='http://cdn.media.ccc.de/congress/2015/h264-hd/32c3-7550-en-Opening_Event_hd.mp4' type='video/mp4'>

  <track kind="subtitles" src="http://cdn.media.ccc.de/congress/2015/h264-hd/subtitles/32c3-7550-en-Opening_Event_hd.en.srt" srclang="en">
  <track kind="subtitles" src="http://cdn.media.ccc.de/congress/2015/h264-hd/subtitles/32c3-7550-en-Opening_Event_hd.de.srt" srclang="de">
</video>

Unter http://live.ber.c3voc.de/tests/32c3-7550-opening_event.html hab ich mal eine exemplarische Demo abgelegt.

Damit es wirklich funktioniert musste ich allerdings noch an zwei Stellen tricksen:

#video .mejs-captions-selector  {
        max-width: 100px; /* override definition from .tab-content #video * */
        width: 100px;
}

und damit keine Cross-Orrigin Fehler auftreten habe ich die SRT Dateien für den Test auch direkt neben die HTML Datei gelegt. Wer sich die Fehler selbst anschauen will, kann dies unter http://live.ber.c3voc.de/tests/32c3-7550-opening_event.direct.html machen.

Text track from origin 'http://cdn.media.ccc.de' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'http://live.ber.c3voc.de' is therefore not allowed access.

saerdnaer commented 8 years ago

Bei https://media.ccc.de/v/32c3-7550-opening_event werden jetzt Untertitel im Player mit angezeigt.

temp

Das CSS muss man noch fixen:

Untertitel sind nicht mittig und etwas klein
Im Auswahlmenü wird unnötig umgebrochen (Lösung siehe vermutlich oben, width von .mejs-captions-selector richtig setzen.)

saerdnaer commented 8 years ago

  #video .mejs-captions-layer  {
          width: 100% !important;
          /* line-height: 20px; */
          font-size: 2em; /* or 30px?? */
  }

saerdnaer commented 7 years ago

percidae commented 7 years ago

Es scheint so als würde das nicht mehr funktionieren bzw. als wäre es zwischenzeitlich wieder verlorgen gegangen.

Beispiele:

Das Closing vom 33c3 hat Deutsche Untertitel, der "cc" Button taucht auch auf, aber ist scheinbar funktionslos: https://media.ccc.de/v/33c3-8428-33c3_closing_ceremony
Das Opening vom 32c3 hat eine deutsche und englische Untertitelspur. Beim Klick auf den Button taucht keine Sprachauswahl auf. https://media.ccc.de/v/32c3-7550-opening_event

derpeter commented 7 years ago

It seems to be a crossorigin porblem probably introduced by cdn changes

Text track from origin 'https://koeln.ftp.media.ccc.de' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'https://media.ccc.de' is therefore not allowed access.

MaZderMind commented 7 years ago

Interestingly koeln.ftp.media.ccc.de does respond with a correct looking Access-Control-Header:

 Access-Control-Allow-Origin: https://media.ccc.de

saerdnaer commented 7 years ago

maybe we have to add the crossorigin attribute to the video tag: #210 https://www.w3.org/TR/html5/embedded-content-0.html#attr-media-crossorigin

(don't ask my why it worked before...)

MaZderMind commented 7 years ago

Suggested fix in #210 resulted in problems for playing back the video (#211, #212), which is why we rolled it back in 693657ac0d63b4f191cdde4d91f145f1fd7e7415.

saerdnaer commented 7 years ago

Okay fassen wir das mal zusammen – damit wir CORS bei SRTs benutzen können müssen wir das crossorigin Attribut auf dem Video-Tag setzen. Das sorgt aber dazu das die Mixed-Content Warning zu einem Error aufgewertet wird. Die Mixed content Warning kommt weil viele unserer CDN Mirrors leider (noch) kein HTTPS unterstützen.

Es gibt zwei Möglichkeiten: a) wir binden die Videos per HTTPS ein – dadurch wird aber vermutlich bei den Mirrors die HTTPs können mehr last entstehen b) Wir umgehen CORS und liefern die SRTs auch von media.ccc.de aus aus.

@manno Wie ist deine Meinung?

derpeter commented 6 years ago

Da wir nun alle nicht SSL mirrors recjecten ist das gefixt oder?

saerdnaer commented 6 years ago

Update: Seit Ende 2017 pflegt das Subtitles Team nur noch die Dateien unter https://mirror.selfnet.de/c3subtitles/congress/.

@florolf @manno Spricht irgendwas dagegen die Untertitel von dort auf media.ccc.de/subtitles o.ä. zu syncen? Oder haben alle unsere Mirrors inzwischen auch HTTPS Support?

saerdnaer commented 6 years ago

@derpeter Ah, sehe deinen Kommentar erst jetzt (hatte das Browser-Tab hier noch offen). Damit man das Ticket schließen kann sind folgende Dinge notwendig: Wir müssen

[ ] das crossorgin Attribut auf dem video-Tag wieder einbauen (#210) und schauen ob die Probleme der User dann auch wirklich weg sind.
[x] entscheiden wie wir die Subtitles-Files hosten – am einfachsten für's Frontend ist vermutlich von https://mirror.selfnet.de/c3subtitles/congress/2017/ nach https://cdn.media.ccc.de/congress/2017/subtitles/ zu rsyncen. (Natürlich bei den anderen Jahren analog)

saerdnaer commented 5 years ago

Habe versucht das besagte crossorigin Attribut einzubauen, musste das dann aber wieder reverten da dazu wohl auch die HTTP Server der Mirrors den passenen Header haben müssen:

Access to video at 'https://mirror.us.oneandone.net/projects/media.ccc.de/congress/2018/h264-hd/35c3-9576-eng-35C3_Infrastructure_Review.mp4' (redirected from 'https://cdn.media.ccc.de/congress/2018/h264-hd/35c3-9576-eng-35C3_Infrastructure_Review.mp4') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://mirror.eu.oneandone.net/projects/media.ccc.de/congress/2018/h264-hd/35c3-9576-fra-35C3_Infrastructure_Review.mp4' (redirected from 'https://cdn.media.ccc.de/congress/2018/h264-hd/35c3-9576-fra-35C3_Infrastructure_Review.mp4') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://mirror.us.oneandone.net/projects/media.ccc.de/congress/2018/h264-hd/35c3-9576-deu-35C3_Infrastructure_Review.mp4' (redirected from 'https://cdn.media.ccc.de/congress/2018/h264-hd/35c3-9576-deu-35C3_Infrastructure_Review.mp4') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://mirror.eu.oneandone.net/projects/media.ccc.de/congress/2018/webm-sd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_webm-sd.webm' (redirected from 'https://cdn.media.ccc.de/congress/2018/webm-sd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_webm-sd.webm') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://mirror.netcologne.de/CCC/congress/2018/webm-hd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_webm-hd.webm' (redirected from 'https://cdn.media.ccc.de/congress/2018/webm-hd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_webm-hd.webm') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://ftp.halifax.rwth-aachen.de/ccc/congress/2018/h264-sd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_sd.mp4' (redirected from 'https://cdn.media.ccc.de/congress/2018/h264-sd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_sd.mp4') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://mirror.us.oneandone.net/projects/media.ccc.de/congress/2018/slides-h264-hd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_hd-slides.mp4' (redirected from 'https://cdn.media.ccc.de/congress/2018/slides-h264-hd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_hd-slides.mp4') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
35c3-9576-35c3_infrastructure_review#t=0:1 Access to video at 'https://ftp.halifax.rwth-aachen.de/ccc/congress/2018/h264-hd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_hd.mp4' (redirected from 'https://cdn.media.ccc.de/congress/2018/h264-hd/35c3-9576-eng-deu-fra-35C3_Infrastructure_Review_hd.mp4') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ich bin inzwischen was dafür die Untertitel per Reverse Proxy auf media.ccc.de zu laden...

saerdnaer commented 3 years ago

Wurde irgendwann per Revese Proxy gelöst.

voc / voctoweb

Untertitel im Frontend #48