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正在上传

这是我的完整代码

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捕获视频缩略图的示例。我们的想法是使用fileupload，然后使用video元素加载视频，将视频currentTime设置为一些随机时间以获取缩略图并使用canvas绘制视频。

＆＃13;

$(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());
            });
        });
    });
});

＆＃13;

video, canvas {
    display: none;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

可能的值是：

"probably"：指定的媒体类型似乎可播放。
"maybe"：无法判断媒体类型是否可播放。
""：无法播放指定的媒体类型。

Answer 2

我认为是这样。

<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">
    <img id="uAvata" alt="" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#fileupload").change(function(evt) {
        var fileUpload = $(this).get(0).files;
        readURL(this, "#uAvata");
    });
    //Preview image
    function readURL(inputFile, imgId) {
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $(imgId).attr('src', e.target.result);
            }
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
    // Preview video will read video like: @xxxmatko
</script>

如何显示thumnail或预览当前文件上传

2 个答案: