2 Replies Latest reply on Nov 10, 2016 8:15 AM by faustot4544220

    how to add custom buttons overlay over video on iphone?

    faustot4544220 Level 1

      It opens an default video play where I don't have control and can't add custom actions over it.

        • 1. Re: how to add custom buttons overlay over video on iphone?
          faustot4544220 Level 1

          I found something using webkit-playsinline but it didn't solve how supposed. The custom buttons need be placed over the video when it been played. Any solution? Any plugin? Can do it natively and use in phonegap as plugin?

          • 2. Re: how to add custom buttons overlay over video on iphone?
            faustot4544220 Level 1

            Well. I found something. I'm not sure if it can be pushed to live apple app. I got it from many sources so I can't remember all.

             

            enable inline stuff

            %video#video.hidden{onclick:"_app.get.playvideo()",'webkit-playsinline':"",playsinline:"", preload:"auto",controls:'false'}

             

            remove controls:

            /* This used to work for parent element of button divs */
            
            
            /* But it is not enough now, below dont hide play button parent div */
            
            
            *::-webkit-media-controls-panel {
              display: none!important;
              -webkit-appearance: none;
              opacity: 0;
              pointer-events: none;
              width: 5px;
            }
            
            
            /* Old shadow dom for play button */
            
            
            *::--webkit-media-controls-play-button {
              display: none!important;
              -webkit-appearance: none;
              opacity: 0;
              pointer-events: none;
              width: 5px;
            }
            
            
            /* New shadow dom for play button */
            
            
            /* This one works */
            
            
            *::-webkit-media-controls-start-playback-button {
              display: none!important;
              -webkit-appearance: none;
              opacity: 0;
              pointer-events: none;
              width: 5px;
            }
            
            
            video::-webkit-media-controls-fullscreen-button {
                display: none;
                opacity: 0;
                pointer-events: none;
                width: 5px;
            }
            
            
            #bottomcontrols {
              z-index: 2147483647;
            }
            

             

            run video by js

            var __video = document.getElementById('video'); 
            __video.addEventListener('click', function() { __video.play(); }, false); 
            

             

            Please, I really don't have time if it got reject by Apple if anyone experienced something like this please share. I also appreciate any post sharing any solution or  plugin.