Hide html5 video (overlay) play button


#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: https://stackoverflow.com/questions/44752317/hide-native-android-html5-video-play-button-in-css/45197798#45197798


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