In een van mijn modules moet ik door de video bladeren van input[type=’file’], daarna moet ik de geselecteerde video laten zien voordat ik met uploaden begin.
Ik gebruik een eenvoudige HTML-tag om te laten zien. maar het werkt niet.
Hier is de 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;
}
}
});<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/*">Antwoord 1, autoriteit 100%
@FabianQuiroga heeft gelijk dat u in dit geval beter createObjectURLdan een FileReadermoet gebruiken, maar uw probleem heeft meer te maken met het feit dat u de src van een <source>-element, dus u moet videoElement.load()aanroepen.
$(document).on("change", ".file_multi_video", function(evt) {
var $source = $('#video_here');
$source[0].src = URL.createObjectURL(this.files[0]);
$source.parent()[0].load();
});<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/*">Antwoord 2, autoriteit 13%
Vergeet niet dat het jQuery-bibliotheek gebruikt
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 >
Antwoord 3, autoriteit 3%
Als u met dit probleem wordt geconfronteerd. Dan kunt u de onderstaande methode gebruiken om het bovenstaande probleem op te lossen.
Hier is de html-code:
//input tag to upload file
<input class="upload-video-file" type='file' name="file"/>
//div for video's preview
<div style="display: none;" class='video-prev' class="pull-right">
<video height="200" width="300" class="video-preview" controls="controls"/>
</div>
Hier is de JS-functie hieronder:
$(function() {
$('.upload-video-file').on('change', function(){
if (isVideo($(this).val())){
$('.video-preview').attr('src', URL.createObjectURL(this.files[0]));
$('.video-prev').show();
}
else
{
$('.upload-video-file').val('');
$('.video-prev').hide();
alert("Only video files are allowed to upload.")
}
});
});
// If user tries to upload videos other than these extension , it will throw error.
function isVideo(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'm4v':
case 'avi':
case 'mp4':
case 'mov':
case 'mpg':
case 'mpeg':
// etc
return true;
}
return false;
}
function getExtension(filename) {
var parts = filename.split('.');
return parts[parts.length - 1];
}
Antwoord 4, autoriteit 2%
Laten we het gemakkelijk maken
HTML:
<video width="100%" controls class="myvideo" style="height:100%">
<source src="mov_bbb.mp4" id="video_here">
Your browser does not support HTML5 video.
</video>
JS:
function readVideo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.myvideo').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
Antwoord 5
Hier is een gemakkelijke oplossing
document.getElementById("videoUpload").onchange = function(event) {
let file = event.target.files[0];
let blobURL = URL.createObjectURL(file);
document.querySelector("video").style.display = 'block';
document.querySelector("video").src = blobURL;
}<input type='file' id='videoUpload'/>
<video width="320" height="240" style="display:none" controls autoplay>
Your browser does not support the video tag.
</video>Antwoord 6
Dit is een voorbeeld op VUE JS:
voorbeeld FOTO
Voorbeeld BRONCODE – DRAG-DROP _part
Voorbeeld met RENDERing & createObjectURL() met VIDEO.js
ps. ik wil gewoon de “Pragya Sriharsh” oplossing verbeteren:
const = isVideo = filename =>'m4v,avi,mpg,mov,mpg,mpeg'
.split(',')
.includes( getExtension(filename).toLowerCase() )
En .. gebruik alsjeblieft geen JQuery, het is nu 2k19:-);
-> Dus:
const getExtension = filename => {
const parts = filename.split('.');
return parts[parts.length - 1];
}
… En laat de rest van het werk door Webpack 4 worden gedaan!