How to Set Preview of Video File, Selecting from Input Type='File'

How can I set preview of multiple video file, by selecting from input type='file'

You should better use createObjectURL in this case.

document.querySelector("input[type=file]").onchange = function(event) {
    var numberOfVideos = event.target.files.length;
    for (var i = 0; i < numberOfVideos; i++) {
        var file = event.target.files[i];
        var blobURL = URL.createObjectURL(file);
        var video = document.createElement('video');
        video.src = blobURL;
        video.setAttribute("controls", "")
        var videos = document.getElementById("videos");
        videos.appendChild(video);
    }
}

video{width: 500px}

<input type="file" name="video" multiple>
<div id="videos"></div>

how to show preview of a video and an image selected using the same html input type=file

In order to display any <image> and <video> from using the same <input> button then you must dynamically create such elements as needed.

This means:

Detect what File type the user selected.
Create a Path to the selected File.
Create the relevant Element and set Path as .src input.
Remove any pre-existing Element from your container (usually a <div>).
.append the newly created Element for display on the page.

No JQuery but this is how you can achieve with regular JavaScript code :

I used your Div as the container (had to add an id="display-img-vid-con" for later reference with JS).
Added a style="" with absolute position to control the container's X/Y coords using top and left).

( ...experiment with it)

<!DOCTYPE html>
<html>
<body>

    <!-- button for selecting image/video -->
    <label for="inp-img-vid">
      <span> Photos/Videos</span>
      <input type="file" accept="image/*, video/*" name="img-vid" id="inp-img-vid">
    </label>

    <div class="display-img-vid-con" id="img-vid-con"  style="top: 30px; left: 250px;  position: absolute; z-index: 1" >
    
      <!-- showing selected image here -->
      <!-- showing selected video here -->
    
    </div>

</body>

<script>

//$("#inp-img-vid").change( function(){ imgPreview(this); } );
document.getElementById("inp-img-vid").addEventListener("change", onFileSelected, false);

var tmpElement; //will be dynamically changed to Image or Video

var file, file_ext, file_path, file_type, file_name;

function show_Info_popUP()
{
    alert("File is selected... " + "\n name : " + file_name  + "\n type : " + file_type + "\n ext : " + file_ext );
}

function onFileSelected ( input )
{
 
    //if(input.files && input.files[0])
    if( input.target.files[0] )
    {
        file = input.target.files[0]; // FileList object
        
        file_ext; //# will extract file extension
        file_type = file.type; file_name = file.name;
        file_path = (window.URL || window.webkitURL).createObjectURL(file);
        
        //# get file extension (eg: "jpg" or "jpeg" or "webp" etc)
        file_ext = file_name.toLowerCase();
        file_ext = file_ext.substr( (file_ext.lastIndexOf(".")+1), (file_ext.length - file_ext.lastIndexOf(".")) );
        
        //# get file type (eg: "image" or "video")
        file_type = file_type.toLowerCase();
        file_type = file_type.substr( 0, file_type.indexOf("/") );
        
        let reader = new FileReader();
        reader.readAsDataURL(file);
        
        //reader.onload = function(e)
        reader.onloadend = function(evt) 
        { 
            //# POP-UP ...if you want to show (Alert box with) file details...
            show_Info_popUP();
            
            if (evt.target.readyState == FileReader.DONE) 
            {
                //# get container...
                let container = document.getElementById("img-vid-con");
                
                //# remove any already existing child element(s)
                while (container.firstChild)  
                { container.removeChild(container.firstChild); }
                
                //# if IMAGE...
                if ( file_type == "image" )
                {
                    tmpElement = document.createElement( "img");
                    tmpElement.setAttribute("id", "preview-img");
                }
                
                //# if VIDEO...
                if ( file_type == "video" )
                {
                    tmpElement = document.createElement( "video");
                    tmpElement.setAttribute("id", "preview-vid");
                    tmpElement.setAttribute("controls", "true" );
                    
                    tmpElement.addEventListener("loadeddata", () => 
                    {
                        //# what to do when some video data is loaded
                        
                        if (tmpElement.readyState >= 3) 
                        { 
                            //# what to do when video's first frame is ready
                            tmpElement.muted = true; //# if you want silent preview
                            tmpElement.play();
                        }
            
                    }); 
                }
                
                //# finalise display size
                tmpElement.width = 640; tmpElement.height = 400;
                
                tmpElement.setAttribute("src", file_path);
                container.appendChild(tmpElement);
            }
        
        }
        
    }
}
    
</script>

</html>

Preview an image before it is uploaded

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

How to preview a video before upload - vanilla JavaScript no third-party libraries

const load = (e) => {
  let url = URL.createObjectURL(e.files[0])
  let video = document.querySelector("#id");
  video.setAttribute("src", url)
  video.play();
}

<input type="file" onChange="load(this)" />
<video width="320" height="240" controls id="id">

</video>

vanilla javascript preview video file before upload - NO JQUERY

Within change event handler of <input type="file"> element you can pass the File object to URL.createObjectURL() and set the .src of the <video> element to the resulting Blob URL.

document.querySelector("input[type=file]")
.onchange = function(event) {
  let file = event.target.files[0];
  let blobURL = URL.createObjectURL(file);
  document.querySelector("video").src = blobURL;
}

How to change video source with local file via API input type='file' tag...NO Jquery or external libraries

Edit, Updated

Substituted name of video upload handler playlocalVID for CangelocalVID ; document.getElementById('newlocalFILE').files[0] for document.getElementById('newlocalFILE').value ; tried with video "Science Commons" from Creative Commons - Science Commons ; appeared to upload , play video at jsfiddle from local upload

Try adjusting accept attribute at input element to video/* , utilizing ~~Blob of~~ File object to create objectURL from selectedLocalVID.files[0] to set src attribute of currentVID

function playlocalVID() {  var player = document.getElementById("videoPlayer");  var currentVID = document.getElementById("currentVID");  var selectedLocalVID = document.getElementById("newlocalFILE").files[0];  currentVID.setAttribute("src", URL.createObjectURL(selectedLocalVID));  player.load();  player.play();}

<div id="desired result" style="background-color:grey;">  <p>desired result</p>  <br>  <div id="selectFile">    <p>Change local VID:      <br>      <input id="newlocalFILE" name="localfile" size="50" maxlength="100000" accept="video/*" type="file" onchange="playlocalVID();">  </div>  <div>    <video muted controls id="videoPlayer">      <source id="currentVID" src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4">    </video>  </div></div>