留下带有时间戳的 Youtube 评论 - HTML

在 Youtube 上发布评论是互动和评论视频的好方法。在评论中加入时间戳可以让其他人在视频中找到您引用的确切位置。在本文中，我们将介绍如何在您的网站上实现这一功能。

步骤

以下是在网站上添加具有时间戳功能的 Youtube 评论的步骤。

1. 在您的网页中添加一个 div，用于显示视频。当用户在 Youtube 上评论时，我们将抓取该视频的 ID，并将其传递到评论部分。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/[VIDEO ID]"></iframe>
</div>

2. 添加评论部分，使用户可以在该部分中留下评论。

<form>
  <label for="comment">Add a Comment:</label>
  <textarea id="comment" rows="5"></textarea>
  <button type="submit">Submit</button>
</form>

3. 在您的 JavaScript 代码中，抓取视频 ID 并将其传递到评论中。

var url = $('.embed-responsive-item').attr('src');
var video_id = url.split('=')[1];

4. 在每个评论中添加时间戳，以秒为单位。当用户单击时间戳时，视频将在指定的时间戳处开始播放。

<div class="comment">
  <div class="comment-meta">
    <span class="timestamp" data-time="120">2:00</span>
    <span class="username">John Doe</span>
  </div>
  <div class="comment-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros non nisl fermentum faucibus ac quis risus. Mauris at malesuada libero. Donec et nibh nec urna pretium commodo eget eget magna. Nam iaculis, odio vel porttitor commodo, libero lectus iaculis justo, et malesuada neque orci vel dolor.</p>
  </div>
</div>

5. 在 JavaScript 代码中添加代码，使得当单击时间戳时视频能在指定时间戳处播放。

$('.timestamp').click(function() {
  var time = $(this).data('time');
  $('.embed-responsive-item').attr('src', url + '?start=' + time);
});

示例

以下是完整的 HTML 和 JavaScript 代码示例。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/[VIDEO ID]"></iframe>
</div>

<form>
  <label for="comment">Add a Comment:</label>
  <textarea id="comment" rows="5"></textarea>
  <button type="submit">Submit</button>
</form>

<div class="comment">
  <div class="comment-meta">
    <span class="timestamp" data-time="120">2:00</span>
    <span class="username">John Doe</span>
  </div>
  <div class="comment-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec eros non nisl fermentum faucibus ac quis risus. Mauris at malesuada libero. Donec et nibh nec urna pretium commodo eget eget magna. Nam iaculis, odio vel porttitor commodo, libero lectus iaculis justo, et malesuada neque orci vel dolor.</p>
  </div>
</div>

<script>
  var url = $('.embed-responsive-item').attr('src');
  var video_id = url.split('=')[1];

  $('.timestamp').click(function() {
    var time = $(this).data('time');
    $('.embed-responsive-item').attr('src', url + '?start=' + time);
  });
</script>

结论

在您的网站上添加时间戳功能的 Youtube 评论可以更好地让用户互动和评论视频。通过使用 HTML、CSS 和 JavaScript，您可以轻松地实现这一功能。