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

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

javascript php html ffmpeg

Javascript 使用带有视频和音频标签的默认海报图像,javascript,php,html,ffmpeg,Javascript,Php,Html,Ffmpeg,我有一个web应用程序，用户可以在其中共享音乐和视频（将保存在web应用程序使用的sme服务器上），正如我们所知，一些音频/视频文件包含海报/缩略图。现在，我想用HTML5播放那些带有音频或视频的海报。我知道海报标签，但它需要一个单独的图像文件来显示。但是，我想显示歌曲附带的图像文件（音频/视频）。任何与java脚本或HTML api相关的建议都将不胜感激。我知道如何使用ff mpeg（或类似的库）获取海报图像，但这会在我的服务器上增加额外的工作量。谢谢注释：-我可以考虑任何服务器端高

我有一个web应用程序，用户可以在其中共享音乐和视频（将保存在web应用程序使用的sme服务器上），正如我们所知，一些音频/视频文件包含海报/缩略图。现在，我想用HTML5播放那些带有音频或视频的海报。我知道海报标签，但它需要一个单独的图像文件来显示。但是，我想显示歌曲附带的图像文件（音频/视频）。任何与

java脚本

或HTML api相关的建议都将不胜感激。我知道如何使用

ff mpeg

（或类似的库）获取海报图像，但这会在我的服务器上增加额外的工作量。谢谢

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

提前感谢。

对于视频，您可以尝试根据动态生成视频缩略图。检查下面的工作示例（代码取自）：


（功能（）{
“严格使用”；
var视频；
var标度=0.25；
var initialize=函数（）{
视频=$（“#视频”）.get（0）；
//在特定时间后调用click事件
setTimeout（函数（）{
$（captureImage）；
}, 1000);
};
var captureImage=函数（）{
var canvas=document.createElement（“canvas”）；
canvas.width=video.videoWidth*比例；
canvas.height=video.videoHeight*比例；
canvas.getContext（'2d'）
.drawImage（视频，0，0，canvas.width，canvas.height）；
var img=document.createElement（“img”）；
img.src=canvas.toDataURL（）；
$（“#视频”）.attr（'海报'，img.src）；
};
$（初始化）；
}());

上面的脚本所做的是，在页面加载时，将显示一个默认的视频缩略图，并显示播放图标；在页面加载时，将调用脚本（1秒后），该脚本将从视频生成缩略图并替换默认缩略图。这些缩略图将不会保存在服务器上

对于音频，您可以尝试以下方法，答案也是：

上传视频时只需运行一次ffmpg，使用率非常低。HTML5

标签需要海报作为一个单独的图像，而

标签没有后代的优点，但视频中的第一个场景并不总是缩略图。然而，这是一个很好的解决办法，比什么都没有好：）

<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>