Wie kann ich einstellen, dass die Vorschau der video-Datei, die Auswahl von input type='file'
In einem meiner module, die ich brauche zu durchsuchen Videos von input[type='file'], nach, dass ich brauche, um zu zeigen, ausgewählte Videos vor dem Start upload.
Ich bin mit grundlegenden HTML-Tags zu zeigen. aber es funktioniert nicht.
Hier ist der code:
JS:
$(document).on("change",".file_multi_video",function(evt){
var this_ = $(this).parent();
var dataid = $(this).attr('data-id');
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^video/.test( files[0].type)){ //only video file
var reader = new FileReader(); //instance of the FileReader
reader.readAsDataURL(files[0]); //read the local file
reader.onloadend = function(){ //set video data as background of div
var video = document.getElementById('video_here');
video.src = this.result;
}
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video width="400" controls >
<source src="mov_bbb.mp4" id="video_here">
Your browser does not support HTML5 video.
</video>
<input type="file" name="file[]" class="file_multi_video" accept="video/*">
Du musst angemeldet sein, um einen Kommentar abzugeben.
@FabianQuiroga ist richtig, dass sollten Sie besser
createObjectURL
als einFileReader
in diesem Fall, aber dein problem hat mehr mit der Tatsache zu tun, dass Sie die src von einem<source>
element, so müssen Sie rufen SievideoElement.load()
.JS:
HTML:
Ps: vergessen Sie nicht, rufen
URL.revokeObjectURL($source[0].src)
wenn Sie brauchen es nicht mehr.input[type=file]
nicht so viel... Die blobURI zurückgegebencreateObjectURL
hier gerade hält ein direkter symbolischer Link auf die Datei auf der Festplatte des Nutzers, also der Arbeitsspeicher wird weniger als wichtig. Aber in anderen Fällen, tut es Reale Folgen haben: ein unrevoked blobURI von einem generiert oder abgerufen Blob halten Ihre Daten im Speicher, bis die Sitzung beendet wird. Und noch schlimmer, mit MediaStream, wie Gummi (zum Zeitpunkt dieser Antwort wurde geschrieben, cOU war noch der Weg zur Anzeige von MediaStreams, jetzt veraltet), es blockiert möglicherweise das Gerät (e.g web-cam).Vergessen Sie nicht, dass es verwendet die jquery-Bibliothek
Javascript
Html
Wenn Sie vor dieser Frage. Dann können Sie mithilfe der folgenden Verfahren zu beheben, das oben genannte Problem.
Hier ist der html-code:
Hier ist die JS-Funktion unten:
Dies ist beispielsweise auf VUE JS:
Album Vorhören BILD
Beispiel-SOURCE-CODE - DRAG & DROP-part
Beispiel mit der Darstellung von & createObjectURL() mit VIDEO.js
p.s. ich will einfach nur zu verbessern "Pragya Sriharsh" Lösung:
.. Und bitte nicht die JQuery verwenden, ist es jetzt 2k19:-);
-> Also:
... Und lassen Sie den rest der Arbeit erfolgt durch Webpack 4!
Lets make it easy
HTML:
JS: