Ionic How to get thumbnail from local video file?

Question

I captured and download video files using Media capture and cordova transfer plugins. I have no idea how to get thumbnails from these video files. Please help me. Thanks.

I am not sure if it helps but look to this https://github.com/lewie9021/cordova-plugin-video-thumbnail — Vova Bilyachat, Sep 14 '17 at 01:52
Also it seems to be possible get it with video and canvas https://stackoverflow.com/questions/22607572/video-html5-is-it-possible-to-display-thumbnail-from-video-on-a-specific-time — Vova Bilyachat, Sep 14 '17 at 01:53

score 2 · Accepted Answer · answered Oct 18 '17 at 04:28

   import { VideoEditor,CreateThumbnailOptions } from '@ionic-native/video-editor';
  CreateVideo()
  {
    var nItem = localStorage.getItem('videoNum');
    var numstr = 0;
    if(nItem == null){
      numstr = 1;
    }
    else{
      var numstr = parseInt(nItem,10);
      numstr = numstr + 1;
    }

    let videooption:CaptureVideoOptions = {limit:1};

    this.mediaCapture.captureVideo().then((videoData:Array<MediaFile>)=>{

    let filedir = this.file.dataDirectory ;

    var path = videoData[0].fullPath.replace('/private','file://');
    var ind = (path.lastIndexOf('/')+1);
    var orgFilename = path.substring(ind);
    var orgFilePath = path.substring(0,ind);

    console.log("videopath", path);
  //SAVE FILE
    this.file.copyFile(orgFilePath, orgFilename, filedir + 'recordvideo','sample'+numstr+'.mov').then(()=>{
    var option:CreateThumbnailOptions = {fileUri:filedir+'recordvideo/sample'+numstr+'.mov',width:160, height:206, atTime:1, outputFileName: 'sample' + numstr, quality:50 };
    this.videoEditor.createThumbnail(option).then(result=>{
        //result-path of thumbnail
       localStorage.setItem('videoNum',numstr.toString());          
    }).catch(e=>{
     // alert('fail video editor');
    });
  });

});}

This is my answer.

this did not work for me. https://stackoverflow.com/questions/52108203/ionic-3-native-video-editor-create-thumbnail-illegal-argument-exception — KnowledgeSeeker, Aug 31 '18 at 03:58

score 1 · Answer 2 · edited Apr 24 '19 at 07:16

1

createThumbnail(videodata){
    let thumbnailoption : CreateThumbnailOptions = {
        fileUri:videodata,
        quality:100,
        atTime:1,
        outputFileName: 'thumbnailImage',
    }
    this.videoEditor.createThumbnail(thumbnailoption).then((thumbnailPath)=>{
        console.log("Thumbnail Responce =>",thumbnailPath)
        this.thumbnail = thumbnailPath;

    }).catch((err)=>{
      console.log("Thumbnail Responce Error=>",err)

    })
  }



  <video autoplay (click)="videovideoPlaypathPlay(videofullpath)" [poster]="thumbnail" preload="auto">   
                     <source src="videodata ? videodata : {{fileServiceUrl}}{{videoKey}}.mp4" type="video/mp4"  class="partyPhoto">
          </video>

it was not works ..!!

edited Apr 24 '19 at 07:16

Til

5,150
13
26
34

answered Apr 24 '19 at 06:57

Raj Gond

11
2

Are you asking a question or answer the question? You can [search for similar questions](https://stackoverflow.com/search), or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, [ask a new question](https://stackoverflow.com/questions/ask), and include a link to this one to help provide context. See: [Ask questions, get answers, no distractions](https://stackoverflow.com/tour) – Til Apr 24 '19 at 07:17

Ionic How to get thumbnail from local video file?

2 Answers2