Dans l’un de mes modules, je dois parcourir la vidéo à partir de l’entrée [type = ‘fichier’], puis montrer la vidéo sélectionnée avant de commencer le téléchargement.
J’utilise une balise HTML de base pour montrer. Mais ça ne fonctionne pas.
Voici le code:
$(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; } } });
@FabianQuiroga a raison de dire qu’il vaut mieux utiliser createObjectURL
qu’un FileReader
dans ce cas, mais votre problème tient davantage au fait que vous définissez la src d’un élément . Vous devez donc appeler
videoElement.load()
.
$(document).on("change", ".file_multi_video", function(evt) { var $source = $('#video_here'); $source[0].src = URL.createObjectURL(this.files[0]); $source.parent()[0].load(); });
N’oubliez pas qu’il utilise la bibliothèque jQuery
Javascript
$ ("#video_p").change(function () { var fileInput = document.getElementById('video_p'); var fileUrl = window.URL.createObjectURL(fileInput.files[0]); $(".video").attr("src", fileUrl); });
Html
< video controls class="video" > < /video >