javascript - HTMLの「li」に値を追加し、特定のliにのみ適用される変数としてJSで使用する

Question

YouTube API を使用して、動画 ID を使用して動画をシーケンスとして自動再生していますが、特定の動画によって異なる開始時間と終了時間も追加する必要があります。

<li>「id」が実際の「YouTubeビデオのID」であるHTMLにあるカップルを次に示します。

<li data-pile="pile1" id="CH7ysrZXDSw" class="md-trigger md-setperspective" data-modal="modal-1">
      <img src="../images/video-thumbnail1.png" alt=""/>
/li>
<li data-pile="pile1" id="kQKhpVWBjoQ" class="md-trigger md-setperspective" data-modal="modal-1">
      <img src="../images/video-thumbnail2.png" alt=""/>
</li>

これは、開始時刻と終了時刻をハードコーディングした JS のセクションです。

function playVideo(videoId, cb) {
    if(videoId) {
        myModal.find('.md-video').append($videoDiv);
        myModal.addClass('md-show');
        setTimeout(function () {
            console.log('#### id', videoId);
            player.loadVideoById({'videoId': videoId, 'startSeconds': 40, 'endSeconds': 60});
            player.videoEnded = function () {
                cb && cb();
            };

            player.waitForChanges();
        }, 1000);
    }
}

必要なもの:

1) 動画の開始時間と終了時間の情報を HTML に含める必要があります。

2）HTMLからビデオの情報を取得し、JSで次のようにハードコーディングする代わりに、変数としてJSで使用します。...player.loadVideoById({'videoId': videoId, 'startSeconds': 40, 'endSeconds': 60});