Click here to Skip to main content
15,902,112 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am trying to generate and save a thumbnail from an uploaded video using VB.Net. I have tried everything but I'm still learning. I was given the following Javascript which if you copy and paste it as it is, works fine.. You select a local file and it produces a thumbnail. However, I don't really know Javascript and need it to just create the thumbnail from a given url which I pass it from the VB.Net code then save it in same folder. Does anyone know how to do this please? Very much appreciated.

<script type='text/javascript'>
document.getElementsByTagName('input')[0].addEventListener('change', function(event) {
  var file = event.target.files[0];
  var fileReader = new FileReader();
  if (file.type.match('image')) {
    fileReader.onload = function() {
      var img = document.createElement('img');
      img.src = fileReader.result;
      document.getElementsByTagName('div')[0].appendChild(img);
    };
    fileReader.readAsDataURL(file);
  } else {
    fileReader.onload = function() {
      var blob = new Blob([fileReader.result], {type: file.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL();
        var success = image.length > 100000;
        if (success) {
          var img = document.createElement('img');
          img.src = image;
          document.getElementsByTagName('div')[0].appendChild(img);
          URL.revokeObjectURL(url);
        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    fileReader.readAsArrayBuffer(file);
  }
});

</script>


<style>
div {
  line-height: 200px;
}

img {
  max-width: 200px;
  max-height: 200px;
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}

@supports (object-fit: cover) {
  img {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }
}
</style>


What I have tried:

This is the code I have in VB which saves the file once user has uploaded video..

AjaxFileUpload1.SaveAs("E:\kunden\homepages\19\d664110395\www\myurl\catalog\videos\" & imageFilename)


I've tried passing imagefilename to the javascript but it's looking for input values instead.
Posted
Updated 18-Jun-19 23:25pm

1 solution

Why to pass path to the video file to javascript to be able to create thumbnail through it?

Use VB.NET instead!
Check this:
c# - How do I get a Video Thumbnail in .Net? - Stack Overflow[^]
VS 2008 [RESOLVED] Thumbnail from a video file-VBForums[^]
VB.NET - Creating Thumbnail Images from Video Files - VB.NET For Everyone! -[^] - on the bottom of page you'll find link to download complete project.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900