Play Video On View Without Opening a Native Internal Media Player

ionic-v1
1

I have searched everywhere i could to find a way to play a video file within my webview either as background or on a container within my view. From my research HTML5 Video tag doesnt do it. All plugins i came across will open an external video player.

I was hoping PROJECT ACE native can solve. Is there a way?

2

Did you find the way how to do that?
I have the same problem on Ionic 3

3

HTML 5 video tag will work in Ionic. Just use below code to embed the video inside your page.

 <video style="width: 100%;height: 200px;align-items: center;" src = "{{variable_name that has video resume link}}#t=0.1" controls (tap)="playvideo()">

</video>

#t=0.1 is given in the src to have a thumbnail for the video. Works in Ionic 3 as well.

4

I’m having problems with html5 video tags when it comes to deploy on Android devices. I can only hear the sound but the video doesn’t show. This used to work before but with latest Android 7 update (October) it stopped working.

5

Hello @vasanthb, I’m using HMTL5 video element in my Ionic3 application. I was able to play videos in android as well ios. But problem is video thumbnail is not working in androd. Do have any solution for that?
Thanks

6

Hi @MaheshKarumuri, I have answered it above, answering here as well.

 <video style="width: 100%;height: 200px;align-items: center;" src = "{{variable_name that has video resume link}}#t=0.1" controls (tap)="playvideo()">

</video>

Here you can observer the src which is set to
src = "{{variable_name that has video resume link}}#t=0.1"
Here #0.1 means, the video will be forwarded by 0.1 secs, which looks like the thumbnail.

7

Thanks for your response, I did the same. The problem is its not working in android when I was using Ionic 3.20.0. It was working fine in ios. Is any chance to show thumbnail in android as well?

8

Is there any way you can capture a thumbnail frame from back end and get it with server response. With best of my knowledge, it is difficult and resource intensive to extract a thumbnail image from video.

9

createThumbnail(videoselected) {

this.displayname = videoselected.substring(videoselected.lastIndexOf('/') + 1);
console.log('Display Video name:-', this.displayname);

const thumbnailoption: CreateThumbnailOptions = {
  fileUri: videoselected,
  width: 200,
  height: 100,
  atTime: 1,
  outputFileName: 'sample',
  quality: 100,
};
this.videoEditor.createThumbnail(thumbnailoption).then(thumbnailPath => {
  console.log('Thumbnail Responce =>', thumbnailPath);
  this.thumbnail = thumbnailPath;
  this.thumbpic = this.win.Ionic.WebView.convertFileSrc(thumbnailPath);
  console.log('thumbnail pic path:-', this.thumbpic);
}).catch((err) => {
  console.log('Thumbnail Responce Error=>', err);
});

}