Videos erst nach Klick auf das zuvor zu ladende Thumbnail anzeigen

[jemand anders]

Hallo,

mit iframe und object kann man Videos in HTML-Seiten einbetten.

Hat man viele Videos im HTML-Code, kann man schnell das System lahmlegen.

Deshalb will ich Videos erst anzeigen, d. h. laden, wenn der Benutzer auf das Thumbnail klickt, das zuvor allerdings ebenfalls erst ermittelt und heruntergeladen werden muss, bevor es angezeigt werden kann.

async function fetchVideo(video) {
  console.log(`https://www.${video.plattform}.com/embed/${video.id}/`)

  var response = await fetch(`https://www.${video.plattform}.com/embed/${video.id}/`)

    console.log(response.status);
    console.log(response.statusText);

    if (response.status === 200) {
        var data = await response.text();
        console.log(data);
        // Weiterer Ablauf
    }
}
fetchVideo({'plattform':'youtube','id':'OcqGF5THGno'})

Das Problem bei der ganzen Sache ist CORS.

06:56:46.567 https://www.youtube.com/embed/OcqGF5THGno/ debugger eval code:3:11
06:56:46.575

Promise { <state>: "pending" }
 
06:56:48.024 Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://www.youtube.com/embed/OcqGF5THGno/. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

06:56:48.088
 Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Jemand eine Idee, wie ich das Problem lösen kann?

Freundl. Grüße

 

[Sempervivum]

Ja, beim iFrame bleiben und zunächst kein src-Attribut angeben. Dieses erst mit Javascript setzen wenn das Video geladen werden soll.

 

[jemand anders]

Dann sieht man aber kein Thumbnail.

 

[Sempervivum]

Nach einem Blick auf den Artikel auf Wikipedia bzgl. Bitchute stelle ich die Unterstützung für dieses Thema ein.

 

[jemand anders]

Ja, schlimm, ne? Ich überlege auch, ob ich nicht besser nur noch grün-dunkelbraune Sachen tragen soll…

 

[CosmoKey]

Hi,

das thumbnail für youtube videos kannst du zum Beispiel auch über eine extra Url laden, musst nur deine VideoID anpassen. z.B. https://img.youtube.com/vi/OcqGF5THGno/hqdefault.jpg.
Und dann doch nur noch auf onClick das Vorschaubild ausblenden und das Iframe einbauen.

Hört sich doch eigentlich nach wenig Aufwand an.

 

[jemand anders]

Das ist mir bekannt, mir geht es um die grundsätzliche Machbarkeit. Youtube ist nur eine Plattform.