javascript - 如何显示当前文件上传的缩略图和预览

Question

我无法显示正在加载

的 video/image 的预览

基本上我的意思是说下面的代码不会触发来获取video/image预览

这是我的Jsfiddle

.bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#some-image").css("background-image", 'url(' + dataURL +')');

  })

问题:请帮我预览正在上传的video/image

here is my complete code

html:

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>
<div id="some-image"></div>

javascript:

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        maxChunkSize: 1048576,
        maxRetries: 3,
        dataType: 'json',
        multipart: false,
        progressall: function (e, data) {
          //progress
        },
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('.data');
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        fail: function (e, data) {
            data.context.text('Upload failed.');

        }
    }).bind('fileuploadprocessalways', function(e, data)
     {
         var canvas = data.files[0].preview;
         var dataURL = canvas.toDataURL();
         $("#some-image").css("background-image", 'url(' + dataURL +')');

      })
});

Answer 1

这是一个如何使用 jQuery 捕获视频缩略图的示例。这个想法是让文件上传，然后使用 video 元素加载视频，将视频 currentTime 设置为某个随机时间以获取缩略图并使用 canvas 绘制视频。

$(function() {
    var video = $("video");
    var thumbnail = $("canvas");
    var input = $("input[type=file]");
    var ctx = thumbnail.get(0).getContext("2d");
    var duration = 0;
    var img = $("img");

    input.on("change", function(e) {
        var file = e.target.files[0];
        // Validate video file type
        if (["video/mp4"].indexOf(file.type) === -1) {
            alert("Only 'MP4' video format allowed.");
            return;
        }
        // Set video source
        video.find("source").attr("src", URL.createObjectURL(file));
        // Load the video
        video.get(0).load();
        // Load metadata of the video to get video duration and dimensions
        video.on("loadedmetadata", function(e) {
            duration = video.get(0).duration;
            // Set canvas dimensions same as video dimensions
            thumbnail[0].width = video[0].videoWidth;
            thumbnail[0].height = video[0].videoHeight;
            // Set video current time to get some random image
            video[0].currentTime = Math.ceil(duration / 2);
            // Draw the base-64 encoded image data when the time updates
            video.one("timeupdate", function() {
                ctx.drawImage(video[0], 0, 0, video[0].videoWidth, video[0].videoHeight);
                img.attr("src", thumbnail[0].toDataURL());
            });
        });
    });
});

video, canvas {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="video/mp4" />
<video controls>
    <source type="video/mp4">
</video>
<canvas></canvas>
<br/>
<img/>

要确定指定的媒体类型是否可以播放，您可以使用此代码:

var obj = document.createElement("video");
console.info("video/avi: ", obj.canPlayType("video/avi")  || "no");
console.info("video/mp4: ", obj.canPlayType("video/mp4"));

可能的值是:

• “可能”:指定的媒体类型似乎可以播放。
• “可能”:不播放就无法判断媒体类型是否可播放。
• "": 指定的媒体类型肯定无法播放。