input type = "file"でファイルを選択し、ビデオ要素にソースファイルを追加します。

ファイルを選択したいのですが、ボタンをクリックした後、すぐに再生するビデオ要素にファイルをロードします。 type="text"でファイルを入力しようとしていますが、ファイルのリンクを入力する必要があります。私が望むのは、エクスプローラのようなファイルを選択できることです。 type="file"はエクスプローラでファイルを選択できますが、valueプロパティが実際のパスの代わりにfakepathを返すため、ファイルをvideo.srcに追加することはできません。それを行う別の方法がありますか？input type = "file"でファイルを選択し、ビデオ要素にソースファイルを追加します。

<html> 
<head> 
    <title>Using File For Streaming</title> 
</head> 

<body> 
<input type="file" id="videoUrl"/> 
<button onClick="play()">Play Video</button> 
<video id="videoPlayer" height="400" width="400" autoplay controls muted></video> 
    <script> 
     function play() { 
      var videoUrl = document.getElementById('videoUrl').value; 
      alert(videoUrl); 
      var videoPlayer = document.getElementById('videoPlayer'); 
      videoPlayer.src = videoUrl; 
      videoPlayer.load(); 
      videoPlayer.play(); 
     } 
    </script> 
</body> 
</html>

出典

2017-02-07 KapilDev Neupane

私は私の質問をする前にいることをすでにを見ていたリンクhttp://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath – prasanth

@prasadを参照してください。。それは私の問題を解決しませんでした。しかし、ありがとう！ –

あなた<video>のメソッドを呼び出した後、srcあなた<source>年代を養うためにアップロードしたinput.files[0]で、URL.createObjectURLメソッドを使用します。

inp.onchange = function(){ 
 
    source.src = URL.createObjectURL(inp.files[0]); 
 
    vid.load(); 
 
    // even if it's just a pointer to the real file here 
 
    vid.onended = function(){ 
 
     URL.revokeObjectURL(vid.currentSrc); 
 
    }; 
 
    }

<video id="vid" controls> 
 
    <source id="source"/> 
 
</video> 
 
<input id="inp" type="file" accept="video/*">

出典

2017-02-07 07:47:05 Kaiido

input type = "file"でファイルを選択し、ビデオ要素にソースファイルを追加します。

答えて

関連する問題