I’ve found these two functions online and I need help merging them. Some of you can take a look at the functions and already know what they do. If you’re not one of those people, what these two functions are doing is: First function: displaying and playing localvideo that has been selected. Second function: displaying local image that has been selected.
These are two very cool scripts.
I need help merging these two functions though. They both do what I want them to do but I’d like to simplify it as much as possible (if possible at all, if not then I’ll find a work around).
//-------------------------------First function-------------------------------//
(function localFileVideoPlayer() {
'use strict'
var URL = window.URL || window.webkitURL
var playSelectedFile = function (event) {
var file = this.files[0]
var type = file.type
//<video id="video_output"></video>
var videoNode = document.querySelector('#video_output')
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
//<input type="file" id="file1">
var inputNode = document.querySelector('#file1')
inputNode.addEventListener('change', playSelectedFile, false)
})()
//-------------------------------Second function-------------------------------//
function showImage(src,target) {
var fr=new FileReader();
// when image is loaded, set the src of the image where you want to display it
fr.onload = function(e) { target.src = this.result; };
src.addEventListener("change",function() {
// fill fr with image data
fr.readAsDataURL(src.files[0]);
});
}
//<input type="file" id="file1">
var src = document.getElementById("file1");
//<img id="image_output>
var target = document.getElementById("image_output");
showImage(src,target);
They look like perfectly good couple of functions to me. Each serves a purpose on its own and does only one thing. It’s readable and easy to follow for other programmers as well.
Note: You might want to change the names of the functions though like playLocalVideo or loadLocalVideo, and loadAlbumLogo or whatever image the function loads.
Can you explain the nature of your problem, on why do you want to combine them both apart from making the code base smaller?
(function Application() {
'use strict'
var validVideoTypes = ["video/mp4", "video/3gp"]
var validImageTypes = ["image/gif", "image/jpeg", "image/png"]
var videoNode = document.querySelector('#video_output')
var imageNode = document.querySelector('#image_output')
var inputNode = document.querySelector('#file1')
var playVideoFromFile = function (file) {
var canPlay = videoNode.canPlayType(file.type)
if(!canPlay) {
return
}
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
var loadImageFromFile = function (file) {
var fr = new FileReader()
// when image is loaded, set the src of the image where you want to display it
fr.addEventListener("load", function() {
imageNode.src = this.result
})
fr.readAsDataURL(file)
}
var isVideo = function(type) {
return validVideoTypes.indexOf(type) !== -1
}
var isImage = function(type) {
return validImageTypes.indexOf(type) !== -1
}
var showNode = function(node) {
node.style.display = 'initial'
}
var hideNode = function(node) {
node.style.display = 'none'
}
var handleFileUpload = function(event) {
var file = this.files[0]
var type = file.type
if(isImage(type)) {
// show image node, load image and hide video node
showNode(imageNode)
loadImageFromFile(file)
hideNode(videoNode)
}
else if(isVideo(type)) {
// show video node, play node and hide image node
showNode(videoNode)
playVideoFromFile(file)
hideNode(imageNode)
}
}
// Load without any placeholders at the start
hideNode(imageNode)
hideNode(videoNode)
// handles if the uploaded file is image or video
inputNode.addEventListener('change', handleFileUpload, false)
})()
