Erstellen Sie mit eingebettetem YouTube-Video einen Link, der zu einer bestimmten Zeit springt

Lesezeit: 3 Minuten

Benutzer-Avatar
devbanane

In WordPress versuche ich, ein YouTube-Video einzubetten und dann Links einzufügen, die zu bestimmten Zeiten in diesem Video springen. Wenn ich also zu 2:00 springen möchte, kann ich einen Link erstellen, der zu diesem Punkt im eingebetteten Video springt.

Ich habe vor ein paar Jahren eine ähnliche Frage gefunden, aber ich glaube, die YouTube-API hat sich geändert. Ich kann keine Plugins finden, die das können, also möchte ich es nach Möglichkeit selbst machen.

Anregungen?

Bearbeiten: Hier ist der Code, den ich mir bisher ausgedacht habe. Das einzige Problem ist jedoch, dass seekTo sehr lange zu dauern scheint, wenn das Video noch nicht abgespielt wurde. Ich bin mir nicht sicher, ob ich auf das onReady-Ereignis oder ein anderes reagieren soll.

add_action( 'wp_enqueue_scripts', 'register_yt_frameapi' );

function register_yt_frameapi() {
    wp_register_script( 'frameapi', 'https://www.youtube.com/iframe_api', array(), '1.0.0', true );
}

add_shortcode('ytlink', 'ytlink');
function ytlink($atts, $content = null)
{
    wp_enqueue_script('frameapi');

    $id = $atts['id'];
    $time = $atts['time'];
    $timeParts = explode(':', $time);
    $seconds = 0;
    for ($i = 0; count($timeParts); $i++)
    {
        $seconds += array_pop($timeParts) * 60 * $i;
    }

    return '<a href="https://stackoverflow.com/questions/42060604/javascript:void(0);" ' .
    'onclick="var player = new YT.Player(\''.$id.'\', {events: {onReady: function () {player.seekTo('.$seconds.', true);}}});">'.
    ($content ?? $time) . '</a>';
}

  • Teilen Sie Ihr Code-Snippet

    – Ashish Bahl

    6. Februar 2017 um 5:06 Uhr

  • Ich habe ein Codebeispiel von dem, was ich versucht habe, hinzugefügt.

    – devbanane

    6. Februar 2017 um 7:01 Uhr

Okay, ich habe das endlich herausgefunden. Ich werde meine Lösung hier posten, falls jemand anderes die gleiche Frage hat. Ich weiß nicht, ob es einen besseren Weg gibt, dies zu tun, aber das ist der beste, den ich gefunden habe.

Javascript:

var player;
var ytSeconds = 0;

jQuery(document).ready(function ()
    {
    player = new YT.Player('yt-embed', {events: {
      'onStateChange': onPlayerStateChange
      }
      });
    });

function onPlayerStateChange(e)
{
  if (e.data == 1 && ytSeconds > 0) {
    e.target.seekTo(ytSeconds);
    ytSeconds = 0;
  }
}

function seekTo(seconds)
{
  if (player.getPlayerState() == 1) {
    player.seekTo(seconds);
  }
  else {
    ytSeconds = seconds;
    player.playVideo();
  }
}

Dann sehen die Links einfach so aus:

<a href="#" onclick="seekTo(120);">02:00</a>

  • Funktioniert das noch? Ich habe den Code in meinem Header installiert, aber ich habe keinen Erfolg, wenn ich ihn ausführe seekTo(120) in der Konsole.

    – BrettC

    30. Dezember 2020 um 2:25 Uhr

  • Auch hier, das scheint jetzt nicht zu funktionieren …

    – Jos3k4

    12. März um 12:58 Uhr

Sie können den Einbettungscode so verwenden. Verwenden Sie ?start=100&end=250

<iframe width="560" height="315" src="https://www.youtube.com/embed/N8VCzpXJZvM?start=100&end=250&autoplay=1" frameborder="0" allowfullscreen></iframe>

  • Vielen Dank. Aber das ist nicht ganz das was ich suche. Ich möchte am Anfang des Videos beginnen. Aber ich möchte im gesamten Video auf bestimmte Themen verlinken, und wenn auf den Link geklickt wird, springt das Video zu diesem Punkt.

    – devbanane

    6. Februar 2017 um 5:34 Uhr

Es gibt gute Proben.

https://12starsmedia.com/blog/embed-youtube-video-specific-start-time
http://www.youtubestartend.com/

Sie können ?start= verwenden, um Startpunkte zu definieren

  • Das gleiche wie oben. Ich möchte am Anfang beginnen. Aber ich möchte im gesamten Video auf bestimmte Themen verlinken, fast wie ein Inhaltsverzeichnis. Sie werden das in einigen Videobeschreibungen sehen, wo sie auf den Anfang jedes Themas verlinken und dann zu dieser Zeit springen.

    – devbanane

    6. Februar 2017 um 5:36 Uhr

  • Der erste Link ist tot

    – Zev Averbach

    12. März 2019 um 15:31 Uhr

1372310cookie-checkErstellen Sie mit eingebettetem YouTube-Video einen Link, der zu einer bestimmten Zeit springt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy