Question

我正在尝试预览视频文件以及将来的其他文件类型。我已经找到了答案，这使我从这里开始： Stack Overflow Answer

我成功地将其预览到了正文，但是无论是否有效，我都会在html文档中始终显示一条通知消息：

[object HTMLUnknownElement] [object HTMLElement] [object HTMLUnknownElement]

从脚本的主体预览到具有li元素的div中，已将前移ive添加到脚本中。

D <- diag(1,4) # Identity matrix, in your case you should change 4 by 6
M <- matrix(1:4, 2, 2) # Matrix 2x2
kronecker(D,M) # Matrix you are looking for
#output

     [,1] [,2] [,3] [,4] [,5] [,6] [,7] [,8]
[1,]    1    3    0    0    0    0    0    0
[2,]    2    4    0    0    0    0    0    0
[3,]    0    0    1    3    0    0    0    0
[4,]    0    0    2    4    0    0    0    0
[5,]    0    0    0    0    1    3    0    0
[6,]    0    0    0    0    2    4    0    0
[7,]    0    0    0    0    0    0    1    3
[8,]    0    0    0    0    0    0    2    4

如果我在脚本“ div.innerHTML + = div2;”中使用注释方法2，则在顶部引用的正文中得到相同的html消息，但未显示所需的内容。当我使用方法1而不是“ div.appendChild（div2）;”时现在在调试控制台中说：

TypeError：div.appendChild不是函数

并且不显示任何内容。请注意，“ var PreviewF”只是“ source”的替代，而以下“ div3”等重复出现相同的问题以显示缩略图“只是占位符”，而我拥有缩略图时显然不使用实际视频在更大的元素xD中。

我希望有人可以帮助我，尽管我一直在寻找并尝试不同的方法，但是由于某种原因，我最终遇到了同样的麻烦。

Answer 1

好吧，这说明我找到了我问题的部分答案。

罪魁祸首是用于选择包装div的“ getElementsByClassName（）”方法。这样做的问题是它返回HTMLCollection，这是一个类似数组的对象，而不是appendChild（）方法所需的元素对象。因此，现在我知道我不应该对append（）使用类，而应使用id。

通过替换它会面临另一个问题*叹..如果我将源对象直接通过id包装器直接附加到现在的div / ul上，则可以，但是如果使用创建视频中的li元素现在以纯文本形式显示以下内容：

[对象HTMLVideoElement]

*由于此文本编辑器在堆栈中，因此请忽略li引号中的空格

因此，在进行更多搜索后，我找到了解决方案！我替换了我再次添加文本的方式，瞧。

这是更新的脚本，现在可以按预期运行。

document.querySelector("input[type=file]").onchange = function(event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
    var f = files[i];

    if (f.type.match('video.*')) { // Only process video files.
        // section for the large display
        var previewF = '<video width="100%" height="240" controls> <source src="'+URL.createObjectURL(f)+'" type="'+f.type+'"></video>';
        var div1='<li id="slide'+i+'">'+previewF+'</li>';
        $("#slides").append(div1); //The append method replacement

        // section for the thumbnails, again as a placeholder ;)
        var previewF2 = '<video width="100%" height="240" controls> <source src="'+URL.createObjectURL(f)+'" type="'+f.type+'"></video>';
        var div2='<li><a href="#slide'+i+'">'+source+'</a></li>';
        $("#thumbnails").append(div2);
    }}}

*我已经使用当前可用的代码编辑了此答案。

将视频上传预览附加到div

1 个答案: