Question

我有一个网络应用程序，用户可以共享音乐和视频（将保存在Web应用程序使用的服务器上），因为我们知道一些音频/视频文件包含/附加海报/缩略图。现在，我想在HTML5中展示带有音频或视频的海报。我知道海报标签，但它需要一个单独的图像文件来显示。但是，我想显示附有歌曲（音频/视频）的图像文件。任何与java-script或HTML api相关的建议都将受到赞赏。我知道用ff-mpeg（或类似的库）获取海报图像，但这会在我的服务器上增加额外的工作量。感谢。

注意： - 我可以考虑任何服务器端高效解决方案。

提前致谢。

Answer 1

对于视频，您可以尝试按照this ans动态生成视频缩略图。请查看下面的工作示例（代码来自this link ）：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  </head>
  <body>
    <video width="470" height="255" id="video" poster="default-video-thumbnail.png" controls>
      <source src="video.mp4" type="video/mp4">
    </video>

    <script type="text/javascript">
      (function() {
        "use strict";

        var video;
        var scale = 0.25;

        var initialize = function() {
          video = $("#video").get(0);
          // Calls click event after a certain time
          setTimeout(function() {
            $(captureImage);
          }, 1000);
        };

        var captureImage = function() {
          var canvas = document.createElement("canvas");
          canvas.width = video.videoWidth * scale;
          canvas.height = video.videoHeight * scale;
          canvas.getContext('2d')
            .drawImage(video, 0, 0, canvas.width, canvas.height);

          var img = document.createElement("img");
          img.src = canvas.toDataURL();
          $("#video").attr('poster', img.src);
        };

        $(initialize);

      }());
    </script>
  </body>
</html>

以上脚本的作用，在页面加载时会出现一个带有播放图标的默认视频缩略图，在页面加载时将调用脚本（1秒后），这将从视频生成缩略图并替换默认缩略图。这些缩略图不会保存在服务器上。

对于音频，您可以尝试类似this的内容，答案也有JSFiddle demo link：

使用带有视频和音频标签的默认海报图像

1 个答案: