我需要一种让用户选择本地视频文件作为我的html视频元素源的方法。
设置源似乎不起作用,因为我无法从标准的javascript文件对话框访问完整路径。
我尝试了以下内容:
//THE VIDEO ELEMENT
<video id="video1" muted>
<source src="" type="video/mp4" />
</video>
//THE DIALOG BUTTON TO SET VIDEO SOURCE
<input type='file' onchange="readURL(this);" />
<script>
var video = document.getElementById("video1");
function readURL(input) {
//THE METHOD THAT SHOULD SET THE VIDEO SOURCE
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
video.src = input.files[0]
};
}
}
</script>
如何创建一个允许选择本地视频文件并将其上传到HTML5视频元素的按钮?
答案 0 :(得分:2)
我做了一些修改,工作很好!我在Chrome和Firefox中测试过。
//THE VIDEO ELEMENT
<video id="video1" muted>
<source src="" type="video/mp4" />
</video>
//THE DIALOG BUTTON TO SET VIDEO SOURCE
<input id="file" type='file' onchange="readURL(this);" />
<script>
var video = document.getElementById("video1");
function readURL(input) {
//THE METHOD THAT SHOULD SET THE VIDEO SOURCE
if (input.files && input.files[0]) {
var file = input.files[0];
var url = URL.createObjectURL(file);
console.log(url);
var reader = new FileReader();
reader.onload = function() {
video.src = url;
video.play();
}
reader.readAsDataURL(file);
}
}
</script>
答案 1 :(得分:0)
对于我自己,我用分隔的js和html文件解决了这个问题:
HTML:<input id="file" type='file'/>
的javascript:
document.getElementById('file').onchange = function(){
console.log('test');
readURL(this);
}
function readURL(input) {
//THE METHOD THAT SHOULD SET THE VIDEO SOURCE
if (input.files && input.files[0]) {
var file = input.files[0];
var url = URL.createObjectURL(file);
console.log(url);
var video = document.getElementById("video1");
var reader = new FileReader();
reader.onload = function() {
video.src = url;
video.play();
}
reader.readAsDataURL(file);
}
}