Hi there,
Is there a way I can jump to a timecode in a video when the user taps a button?
Context: I have a video tutorial with the chapters listed under it. I want to jump to the timecode for a given chapter when the user taps the chapter name.
Many thanks!
Are you uploading the video to Glide storage or are you using a YouTube link?
Right now, YouTube or Vimeo.
I tried this, but it only works partially. It doesn’t “autoplay” after I click the chapter.
For youtube try to construct your link like this. The end of the link after t= will take you to a given timestamp.
https://youtu.be/vd7SNnVhQP4&t=1m45s
Yeah that’s basically what I did in the video above, but it requires you clicking the video to play it again after clicking the chapter.
Success if using URI. Provide your chapter URLs separated by commas.
function createYouTubePlayer(videoId, chapters, timestamps) {
let html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube Chapter Player</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: #0A0A0A;
font-family: Arial, sans-serif;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.player-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
margin-bottom: 20px;
}
#player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.table-container {
width: 100%;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
color: white;
table-layout: fixed;
}
table th:nth-child(1),
table td:nth-child(1) {
width: 55px;
}
td {
padding: 10px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #333333;
}
tr:hover {
background-color: #ff7d29;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="player-container">
<div id="player"></div>
</div>
<div class="table-container">
<table>
<tbody>
${timestamps.map((time, index) => `
<tr onclick="goToChapter(${time})">
<td>${new Date(time * 1000).toISOString().substr(11, 8)}</td>
<td>${chapters[index]}</td>
</tr>
`).join('')}
</tbody>
</table>
</div>
<script>
// Load IFrame API asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '${videoId}',
playerVars: {
'controls': 1,
'showinfo': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(${timestamps[0]});
}
}
function goToChapter(time) {
player.seekTo(time);
player.playVideo(); // Start playing from the selected chapter
}
</script>
</body>
</html>
`;
let uri = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
return uri;
}
return createYouTubePlayer(p1, p2.split(',').map(chapter => chapter.trim()), p3.split(',').map(url => {
const urlParams = new URLSearchParams(new URL(url).search);
return parseInt(urlParams.get('t') || '0', 10);
}));
Is there a way to use a youtube playlist?
By default, YouTube playlists already have a list which you can access in the top right corner. You can directly use the video component to play it. The format for the playlist is: https://www.youtube.com/embed/videoseries?list=YOUR_PLAYLIST_ID
so in this case, your code isn’t necessary, only a video component?
Yes, unless you want a different look.
I like that it plays automatically when using your code but I couldn’t get the playlist to show up.
I need to try it to see if it would be the same if it was a playlist.
However, the playlist will also play continuously except for the initial start.
What you need to know is that the code above is chopping a video based on time. Meanwhile, playlists only combine many videos in one list.
it inspires me to start making videos 
Maybe I can continue tomorrow.
I’m not giving it here because it would confuse the topic of this thread. Please DM me.
ok 