I am building an ionic app that draws video on a html5 canvas and additional canvas layers on top of the video canvas to become a touch screen interface and do specific actions depending on where you touched on the top canvas layer. It works well as a Web Application and an Android App but has issues with iOS iPad OS 10.3 and maybe other OS versions as well.
The issue is that as a cordova ios app on my iPad the html5 video element gets drawn on top of all other canvas layers and displays video controls. If I minimize the video, I can then see all the other canvas layers drawn correctly underneath.
I have tried many different css solutions found on various forums, but have not gotten any successful results.
Many of the css I tried :
video::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-enclosure{
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls {
display:none !important;
-webkit-appearance: none;
}
.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
I even tested the example code on developer.apple.com
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html
And that does not work either when building and testing the cordova ios app on my iPad.
Testing with iPad 4th Gen model mp2f2ll/a on OS 10.3.3
Anyone have any suggestions on how to fix this problem?