如何为Amit Agarwal开发的Lite YouTube Embed代码添加起始时间变量

你的问题出在三个关键错误上：

• 错误地将视频ID重复赋值给了起始时间变量
• 自定义属性命名不符合dataset规范（应该用data-start而非start-id）
• 构建iframe地址时，把视频ID当成了起始时间参数

正确的实现步骤 #

1. HTML结构修改

给每个youtube-player容器添加data-start属性，值为你需要的起始秒数：

<div class="youtube-player" data-id="YOUR_VIDEO_ID" data-start="120"></div>

2. 修正后的完整脚本

function labnolIframe(div) {
  var iframe = document.createElement('iframe');
  // 基础地址
  var src = 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0';
  // 如果有起始时间，拼接参数
  if (div.dataset.start) {
    src += '&start=' + div.dataset.start;
  }
  iframe.setAttribute('src', src);
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowfullscreen', '1');
  iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
  div.parentNode.replaceChild(iframe, div);
}

function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName('youtube-player');
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    // 获取起始时间，无设置则为空
    var startTime = playerElements[n].dataset.start || '';
    var div = document.createElement('div');
    div.setAttribute('data-id', videoId);
    // 用data-start存储起始时间，符合dataset规范
    div.setAttribute('data-start', startTime);
    var thumbNode = document.createElement('img');
    thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
    div.appendChild(thumbNode);
    var playButton = document.createElement('div');
    playButton.setAttribute('class', 'play');
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}

document.addEventListener('DOMContentLoaded', initYouTubeVideos);

关键说明 #

• 使用data-start属性存储起始时间，符合HTML5自定义数据属性规范，通过dataset.start可以直接读取
• 构建iframe地址时，先判断是否存在起始时间，避免无设置时出现无效参数
• 起始时间值必须是秒数，比如设置data-start="120"就会从第2分钟开始播放

内容的提问来源于stack exchange，提问作者newbie