Hide html5 video (overlay) play button

Ionic Framework ionic-v3
1

I have an html5 video that plays in full screen automatically and it’s working fine, but if I don’t use or don’t want to use crosswalk plugin, the default html5 video play button will appear on top of the video for a second when video starts to play. Is there way to get rid of that without crosswalk? I have tried everything and googled for hours.

I would very much prefer not to use crosswalk plugin just for this one thing because of the high footprint of crosswalk.

2

It is not ideal but you could set the style visibility to hidden on the video element -and place an event on the video play to change the visibility to visible.

3

Try adding a Content Security Policy, add something like this

img-src * ‘self’ http://* ‘unsafe-inline’;

to your CSP

For example, you could add this tag to your index.html file:

<meta http-equiv="Content-Security-Policy"
  content="default-src *;
  style-src 'self' http://* 'unsafe-inline' ;
  media-src * ;
  img-src * 'self' http://* 'unsafe-inline';
  script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'"/>

This should block the static video overlay image from loading.

Reference: Hide Native Android HTML5 Video Play Button in CSS - Stack Overflow

4

Thanks for this and clearifying what that CSP ment on that stackoverflow page. I saw it earlier, but sadly didn’t understand what they ment by that.

But we decided to scrap that video for now, so I can’t test that just right now. I will get back to that later. But thank you for the reply.

1 Like