Videos erst nach Klick auf das zuvor zu ladende Thumbnail anzeigen

jemand anders

Erfahrenes Mitglied
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.

Code:
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.

Code:
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
 
Zuletzt bearbeitet:
Ja, beim iFrame bleiben und zunächst kein src-Attribut angeben. Dieses erst mit Javascript setzen wenn das Video geladen werden soll.
 
Ja, schlimm, ne? Ich überlege auch, ob ich nicht besser nur noch grün-dunkelbraune Sachen tragen soll…
 
Zuletzt bearbeitet:
Das ist mir bekannt, mir geht es um die grundsätzliche Machbarkeit. Youtube ist nur eine Plattform.
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück