在我的一个模块中,我需要从input[type='file']浏览视频,之后我需要在开始上传之前显示选定的视频。
我使用基本的HTML标记来显示。但它不工作。
代码如下:
$(document).on("change",".file_multi_video",function(evt){
var this_ = $(this).parent();
var dataid = $(this).attr('data-id');
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^video/.test( files[0].type)){ // only video file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set video data as background of div
var video = document.getElementById('video_here');
video.src = this.result;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="400" controls >
<source src="mov_bbb.mp4" id="video_here">
Your browser does not support HTML5 video.
</video>
<input type="file" name="file[]" class="file_multi_video" accept="video/*">
7条答案
按热度按时间f87krz0w1#
@FabianQuiroga是对的,在这种情况下,你应该更好地使用
createObjectURL
而不是FileReader
,但是你的问题更多地与你设置<source>
元素的src有关,所以你需要调用videoElement.load()
。Ps:不要忘记调用
URL.revokeObjectURL($source[0].src)
当你不需要它了。p1tboqfb2#
别忘了它使用的是jquery库
Javascript
Html
7xzttuei3#
这里有一个简单的peasy解决方案
解决方案是使用vanilla js,所以你不需要使用jQuery,在chrome上测试和工作,好运
l5tcr1uw4#
如果你正面临这个问题。那么你可以使用下面的方法来解决上述问题。
下面是HTML代码:
下面是JS函数:
qq24tv8q5#
让它变得简单
HTML:
JS:
aamkag616#
上传前预览视频使用jQuery
6yt4nkrj7#
以下是VUE JS的示例:preview PICTURE
Example SOURCE CODE - DRAG-DROP _part
Example with RENDERing & createObjectURL()使用VIDEO.js
p.s.我只是想改进“Pragya Sriharsh”解决方案:
请不要使用jQuery,它现在是2k 19:-);
...并让其余的工作将由Webpack 4完成!