Play Video On View Without Opening a Native Internal Media Player


#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.