ビデオソースをhtmlで設定するにはどうしたらいいですか？

Question

私は、ユーザーが自分の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のvideo要素にローカルのビデオファイルを選択し、アップロードすることができ、ボタンを作成することができますか？

Answer 1

私はいくつかの変更を加えて作業は正常です！私は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> 

Answer 2

私は分離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); 
    } 
}