最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - vanilla javascript preview video file before upload - NO JQUERY - Stack Overflow

programmeradmin0浏览0评论

I have been searching for code to preview a video in client side before upload. I have seen MANY with Jquery. Personally i find external libraries bulky..... yet they rely on vanilla javascript to function (ironic..). Previously, i found a page that describes this functionality. I can no longer find it.... so i am reaching out to the SO community. NOT asking for an application, or ready made code. looking for direction to tutorials/blogs that i can read to make this possible. TY in advance

I have been searching for code to preview a video in client side before upload. I have seen MANY with Jquery. Personally i find external libraries bulky..... yet they rely on vanilla javascript to function (ironic..). Previously, i found a page that describes this functionality. I can no longer find it.... so i am reaching out to the SO community. NOT asking for an application, or ready made code. looking for direction to tutorials/blogs that i can read to make this possible. TY in advance

Share Improve this question asked Aug 13, 2017 at 15:23 James WalkerJames Walker 4115 silver badges21 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 22

Within change event handler of <input type="file"> element you can pass the File object to URL.createObjectURL() and set the .src of the <video> element to the resulting Blob URL.

document.querySelector("input[type=file]")
.onchange = function(event) {
  let file = event.target.files[0];
  let blobURL = URL.createObjectURL(file);
  document.querySelector("video").src = blobURL;
}
发布评论

评论列表(0)

  1. 暂无评论