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

I want to show the preview of selected file (video and image) before uploading them. so far i am only able to create a function to show the preview of an image like this:-

    <!-- 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">
      <!-- showing selected image here -->
      <img src="" id="preview-img">

      <!-- showing selected video here -->
      <video controls>
        <source src="" id="preview-vid">
          Your browser does not support HTML5 video.
      </video>
    </div>

    $("#inp-img-vid").change(function(){
     imgPreview(this);
    });

    function imgPreview(input){
     if(input.files && input.files[0]){
       var reader = new FileReader();
       reader.onload = function(e){
         $("#preview-img").show().attr("src", e.target.result);
       }
       reader.readAsDataURL(input.files[0]);
     }
    }

The above code shows the image inside #preview-img exactly how i want it. Now i don’t know how show the video inside #preview-vid which is selected through the #inp-img-vid input tag using jquery…. any help is much appreciated.