Html Question posted in
Some basic documentation can be found here.

Hide html video player controls in iOS

I want to hide all the controls of the video player in Windows and Android they are hidden but in iOS they are shown, I don’t know how to hide them

This is what it looks like on iOS:

enter image description here

y este es mi codigo:

  <video
    autoplay
     preload muted
    style="max-width: 100% !important; height: auto; box-shadow: none !important; "
    controls="false"
    disablepictureinpicture
    controlsList="nofullscreen nodownload noremoteplayback noplaybackrate"
    class="fit-picture custom-video-player "
    playsInline
    transition="scale-transition"     @ended="onPlayerEnded($event)"
    >
       <source :src="`${videoUrl}`" type="video/mp4">
   </video>


video::-webkit-media-controls-panel {
  // Your styling here
  background-image: linear-gradient(transparent, transparent) !important; //Transparent for your case

}

video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

video::-webkit-media-controls-timeline {
    display: none;
}


video::-webkit-media-controls-current-time-display {
    display: none;
}

video::-webkit-media-controls-time-remaining-display {
    display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

video::-webkit-media-controls-fullscreen-button {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-fullscreen-volume-slider {
    display: none;
}
video::-webkit-media-controls-volume-slider {
  display: none;
}

video::-webkit-media-controls-seek-forward-button {
  display: none;
}

video::-webkit-media-controls-volume-slider-mute-button{
display: none;
}

video::-webkit-media-controls-fullscreen-volume-min-button {
    display: none;
}

video::-webkit-media-controls-fullscreen-volume-max-button {
    display: none;
}

video::-webkit-media-text-track-container {
  display: none;
}
video::-webkit-media-controls-play-button{
  display: none;
}

::-webkit-media-controls {
  display: none !important;
}

I have tried it with

controls="false"

and it still doesn’t work

Any suggestions that can be solved, in the same way I tried it with the video.js library with its properties of hiding the controls and it still shows them

Tags:

2

Answers


  1. 0

    maybe you can put an overlay with opacity: 0 this will prevent the video from being clickable or touchable on mobile. here is the code:

    <section class="video-container">
  <video></video>
</section>

    CSS code

    .video-container {
      position: relative;
 }

.video-container:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%
  top: 0;
  left:0;
  background: #000;
  opacity: 0;
}

    also, you can have a look at here:
    How to hide html5 video controls on iOS 12

    Login or Signup to reply.
  2. 0

    <video
    autoplay
    preload muted
    style="max-width: 100% !important; height: auto; box-shadow: none !important; "
    controls="false"
    disablepictureinpicture
    controlsList="nofullscreen nodownload noremoteplayback noplaybackrate"
    class="fit-picture custom-video-player "
    playsInline
    transition="scale-transition" @ended="onPlayerEnded($event)"
    >

    emphasized text

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search