带缩略图的 Bootstrap 模态视频播放器答案

【问题标题】：Bootstrap modal video player with thumbnail带缩略图的 Bootstrap 模态视频播放器
【发布时间】：2018-07-18 23:21:48
【问题描述】：

我在网站上创建了一个视频库。用户可以点击照片并打开一个模式。在模式内部有一个视频播放器。代码如下：

   <a data-toggle="modal" href="#<?php echo $row['title'] ?>"><img src="images/youtube.png" alt="" ></a>
    <p style="text-align: center"><?php echo $row['title'] ?></p>
    <!-- Modal -->
    <div id="<?php echo $row['title'] ?>" class="modal fade" role="dialog">
      <div class="modal-dialog" style="width: 60%;height=520;padding: -10px;">
       <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
           <button type="button" class="btn btn-default" data-dismiss="modal">
             Close
               </button>
              </div>
              <div class="modal-body">

       <video width="100%" height="520" controls>
        <source src="admin/<?php echo $row['video_path'] ?>"
                                              type="video/mp4">

       Your browser does not support the video tag.
             </video>
                   </div>

                      </div>
                  </div>
             </div>

现在我想在图片的位置保留视频的缩略图。我该怎么做？

【问题讨论】：

标签： video bootstrap-modal

【解决方案1】：

您可以为每个视频单独生成缩略图，然后完全按照上面的图像使用它们，或者您可以将您的图库设置为视频图库并使用 HTML5 视频标签，就像您在上面所做的那样来显示缩略图并在用户启动时显示视频。

要将第一帧显示为带有视频标签的缩略图，只需预加载元数据：

<video controls="controls" preload="metadata">
  <source src="yourVideoPath" type="video/mp4">
</video>

【讨论】：