6.3 C
London
Monday, February 12, 2024

javascript – Disguise html video participant controls in iOS


I need to conceal all of the controls of the video participant in Home windows and Android they’re hidden however in iOS they’re proven, I do not know methods to conceal them

That is what it appears like on iOS:

enter image description here

y este es mi codigo:

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


video::-webkit-media-controls-panel {
  // Your styling right here
  background-image: linear-gradient(clear, clear) !necessary; //Clear on your case

}

video::-webkit-media-controls-overlay-play-button {
    show: none !necessary;
}

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


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

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

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

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

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

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

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

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

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

::-webkit-media-controls {
  show: none !necessary;
}

I’ve tried it with

controls="false"

and it nonetheless does not work

Any recommendations that may be solved, in the identical method I attempted it with the video.js library with its properties of hiding the controls and it nonetheless exhibits them

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here