Javascript 如何在html中设置视频源？

我需要一种方法，让用户选择一个本地视频文件作为我的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>

//视频元素
//设置视频源的对话框按钮
var video=document.getElementById（“video1”）；
函数readURL（输入）{
//设置视频源的方法
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
video.src=input.files[0]
};
}
}

---

如何创建一个按钮，允许选择本地视频文件并将其上传到HTML5视频元素中？

我做了一些更改，工作正常！我在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>

//视频元素
//设置视频源的对话框按钮
var video=document.getElementById（“video1”）；
函数readURL（输入）{
//设置视频源的方法
if（input.files&&input.files[0]）{
var file=input.files[0]；
var url=url.createObjectURL（文件）；
console.log（url）；
var reader=new FileReader（）；
reader.onload=函数（）{
video.src=url；
video.play（）；
}
reader.readAsDataURL（文件）；
}
}

我自己在分离的js和html文件中解决了这个问题，如下所示： html:

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

可能重复的