Youtube Video API with multiple videos and jumpmarks-CodePudding

So, i am having several video widgets (generated by PHP), using the same structure:

    <div  id="LXb3EKWsInQ"></div>
    <a href="javascript:void(0);" onClick="seekToLXb3EKWsInQ('0');">Jump 1</a>
    <a href="javascript:void(0);" onClick="seekToLXb3EKWsInQ('50');">Jump 2</a>

    <div  id="jfKfPfyJRdk"></div>
    <a href="javascript:void(0);" onClick="seekTojfKfPfyJRdk('0');">Jump 1</a>
    <a href="javascript:void(0);" onClick="seekTojfKfPfyJRdk('50');">Jump 2</a>

    <div  id="isbrwgFg3bA"></div>
    <a href="javascript:void(0);" onClick="seekToisbrwgFg3bA('0');">Jump 1</a>
    <a href="javascript:void(0);" onClick="seekToisbrwgFg3bA('50');">Jump 2</a>

And I am using this to render the videos and display jumpmarks:

        function onYouTubeIframeAPIReady() {
            LXb3EKWsInQ = new YT.Player('LXb3EKWsInQ', {
                videoId: 'LXb3EKWsInQ',
                events: {
                }
            });
            jfKfPfyJRdk = new YT.Player('jfKfPfyJRdk', {
                videoId: 'jfKfPfyJRdk',
                events: {
                }
            });
            isbrwgFg3bA = new YT.Player('isbrwgFg3bA', {
                videoId: 'isbrwgFg3bA',
                events: {
                }
            });
        } 
        
        function seekToLXb3EKWsInQ(secondes) {
            LXb3EKWsInQ.seekTo(secondes);
        }
        function seekTojfKfPfyJRdk(secondes) {
            jfKfPfyJRdk.seekTo(secondes);
        }
        function seekToisbrwgFg3bA(secondes) {
            isbrwgFg3bA.seekTo(secondes);
        }

And it works great (https://codepen.io/bandoda/pen/JjZpoPQ), but the issue is that since video widgets will be generated with PHP, i need to find a way to automate this.

Then I decided to do use jquery each to go thru all divs with the same class, grab the ID and render the videos like that - and it works:

        function onYouTubeIframeAPIReady() {
            $('.yt-embedded').each(function(){
                var player = $(this).attr('id');
                player = new YT.Player(player, {
                    videoId: player,
                    events: {
                    }
                });
            });
        }

But, now the problem is that the jumpmarks arent working and I am getting an error - seekTo is not a function. Here is a fiddle - https://codepen.io/bandoda/pen/rNKJaaQ, any suggestion would help...

CodePudding user response：

Consider some changes.

HTML

<div  id="LXb3EKWsInQ"></div>
<a  href="#" data-seek="0">Jump 1</a>
<a  href="#" data-seek="50">Jump 2</a>

<div  id="jfKfPfyJRdk"></div>
<a  href="#" data-seek="0">Jump 1</a>
<a  href="#" data-seek="50">Jump 2</a>

<div  id="isbrwgFg3bA"></div>
<a  href="#" data-seek="0">Jump 1</a>
<a  href="#" data-seek="50">Jump 2</a>

JavaScript

var player;

function onYouTubeIframeAPIReady() {
  $('.yt-embedded').each(function(){
    player = $(this).attr('id');
    player = new YT.Player(player, {
      videoId: player,
      events: {
      }
    });
  });
}

function seekTo(ytid, secondes) {
  $("#"   ytid).get(0).seekTo(secondes);
}

$(".yt-seek").click(function(e) {
  e.preventDefault();
  seekTo($(this).prev(".yt-embed").attr("id"), $(this).data("seek"));
});

Adding a few classes can help you select them with jQuery. You can then use the data attribute to retain data about the element.

https://api.jquery.com/data/

Update

After some digging, you need to access the player object to use the .seekTo() method.

See more: https://developers.google.com/youtube/iframe_api_reference#Playback_controls

HTML

<div>
  <div  id="LXb3EKWsInQ"></div>
  <a  href="#" data-seek="0">Jump 1</a>
  <a  href="#" data-seek="50">Jump 2</a>
</div>
<div>
  <div  id="jfKfPfyJRdk"></div>
  <a  href="#" data-seek="0">Jump 1</a>
  <a  href="#" data-seek="50">Jump 2</a>
</div>
<div>
  <div  id="isbrwgFg3bA"></div>
  <a  href="#" data-seek="0">Jump 1</a>
  <a  href="#" data-seek="50">Jump 2</a>
</div>

JavaScript

var player = [];

function onYouTubeIframeAPIReady() {
  $(".yt-embedded").each(function (i, el) {
    player[i] = new YT.Player($(el).attr("id"), {
      videoId: $(el).attr("id"),
      events: {}
    });
  });
}

function seekTo(yti, secondes) {
  console.log(yti, "Seek:", secondes);
  player[yti].seekTo(secondes);
}

$(".yt-seek").click(function (e) {
  e.preventDefault();
  seekTo($(this).parent().index(), $(this).data("seek"));
});

By wrapping each with a div element, I now have them each contained, making it easier to reference each.

I made player an array and populated it with YouTube Player Objects. Now all I need to know is the Index of the player I want to access and the method.