iPhone HTML5 비디오 재생 버튼 숨기기

iPhone HTML5 비디오 재생 버튼 숨기기

기본적으로 표시되는 큰 재생 단추를 숨기려고 합니다.<video>

가능합니까?

테스트할 수 있는 iOS 기기가 없지만, 다음을 시도해 보십시오.

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

애플이 다시 그림자 세계를 바꾼 것 같습니다.

재생 버튼 컨트롤을 숨기려면 다음 CSS를 사용해야 합니다.

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

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

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

Safari iOS에서 섀도 DOM을 보면 원하는 것(큰 중앙 재생 버튼만 숨김)은 다음과 같습니다.

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

Ian의 답변은 텍스트 트랙(캡션 폐쇄...)을 포함한 모든 것을 숨깁니다.

최신 iOS 버전에서는 장치가 "저전력 모드"에 있을 때 이러한 재생 버튼을 표시합니다.

비디오 소스 파일에서 간단히 변경할 수 있습니다.

controls= "false"

iOS의 네이티브 브라우저인 Safari CSS의 경우, 당신은 또한 이 해키 트릭을 시도할 수 있습니다.

.custom-video-controls {
  z-index: 2147483647;
}

HTML 5 비디오의 컨트롤 관리/숨기기에 대한 자세한 토론 링크입니다.

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

2021년 10월 업데이트

의 경우 모든 입니다.iOS 13, 14, 15의 경우 모든 답변이 구식입니다.iOS 저전력 모드가 이를 방지하기 때문에 나타납니다.autoplay전원을 절약하기 위해 기본적으로 브라우저의 모든 비디오에 표시됩니다.

성가신 재생 버튼을 제거하는 가장 좋은 방법은 다음을 제거하는 것입니다.autoplay모든 비디오 요소에 태그를 지정하고 사용자 상호 작용이 있을 때 비디오 재생을 시작합니다.

아래의 대응 예:

 <video ref={playerRef} playsInline >

let playVideo = (event) => {
   if (playerRef.current) {
      playerRef.current.play()
   }
}

사이드 노트: 재생 버튼은 그림자 속에 숨겨져 있어서 외부 CSS 수정이나 심지어 JS로도 숨길 수 없습니다.그림자 요소를 숨기는 방법에 대한 아이디어가 있는 사람이 있다면 더 나은 해결책이 될 것입니다.

2022년 10월 20일 기준,

제 해결책은 비디오 요소에서 자동 재생을 제거하고 페이지 로드에서 HTMLMediaElement.play()를 사용하는 것이었습니다.재생에서 반환된 약속()은 비디오 재생과 관련된 문제를 발견합니다. 그렇지 않으면 비디오가 정상적으로 재생됩니다.React에서 제가 구현한 내용은 다음과 같습니다.

useEffect(() => {
  ref &&
    ref.current
      .play()
      .then(() => {})
      .catch((err) => {
        // Video couldn't play, low power play button showing.
      });   
}, []);

이것은 일관성 없는 Shadow DOM 속성을 처리해야 하는 것을 완화하는 것입니다.

리소스:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

이안의 답변을 토대로

video::-webkit-media-controls {
    opacity: 0;
}

이렇게 하면 모든 컨트롤이 숨겨집니다.자동 재생되지 않는 배경 비디오에 적합합니다.

iOS 10에서 현재 @2017은 다음과 같이 작동합니다.

.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
    display: none !important;
}

웹 앱용.Mac에서도 iOS 10.3 iPhone7 및 Safari 10.1을 작동합니다.이전 기여자에게 xx.요소에 "제어" 속성이 전혀 포함되어 있지 않다는 문제도 있었습니다.

'<style type="text/css">'+
    '*::-webkit-media-controls-panel {'+
     '   display: none!important;'+
      '  -webkit-appearance: none;'+
   ' }'+
    /* Old shadow dom for play button */
    '*::--webkit-media-controls-play-button {'+
        'display: none!important;'+
        '-webkit-appearance: none;'+
    '}'+
    /* New shadow dom for play button */
    /* This one works */
    '*::-webkit-media-controls-start-playback-button {'+
        'display: none!important;'+
       ' -webkit-appearance: none;'+
        '}'+
    +'</style>'

사용해 보십시오.

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

    &::-webkit-media-controls-start-playback-button {
        display: none!important;
        -webkit-appearance: none;
    }
}

업데이트:

IOS 13.*

  video::slotted::-webkit-media-controls-container{
      display:none !important;
      visibility: hidden!important;
      opacity: 0 !important;
     -webkit-appearance: none !important;
    }

IOS 14 선택기가 다음으로 변경됨

:host::shadow::-webkit-media-controls-container{/* hide the element */}

유용한 리소스: html5sshadowdom 201

재생 버튼은 제거할 수 없습니다.이 비디오 자리 표시자는 항상 문서에서 말하는 iPhone Video PlaceHolder처럼 나타납니다.하지만 아마도 당신은 당신이 아이폰에 있는 것을 감지하고 비디오 태그 대신 당신의 비디오에 대한 링크와 함께 이미지를 표시할 수 있을 것입니다.

<a href="yourvideo.mp4"><img src="yourposter.png"/></a>

비디오는 비디오 태그와 마찬가지로 플레이어에서 실행됩니다.

이 답변에 따르면 Google Chrome에서는 다음과 같은 큰 재생 버튼을 숨길 수 있습니다.

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

iOS 뿐만 아니라 Android에서도 숨기려면 유용할 수 있습니다.

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

iOS에서는 작동하지 않았지만,

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

/* Old shadow dom for play button */

*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

완벽하게 작동했습니다!

네, 할 수 있습니다!비결은 비디오 태그에 "controls" 속성을 추가하지 않음으로써 비디오 컨트롤을 "숨기는" 것입니다.그런 다음 Javascript를 사용하여 태그에 "controls" 속성을 추가하여 비디오가 재생되기 시작한 몇 초 후에 동적으로 추가되도록 합니다.값을 "controls"로 설정하기만 하면 비디오 태그의 HTML에 컨트롤을 추가한 것처럼 DOM에 동적으로 나타납니다. 필요에 따라 타이머를 조정하십시오.

<video id="some-video-id" src="some-video-url" poster="some-thumbnail-url" />

<a href="javascript:void(0);" id="startVideoLink">Start the Video</a>

<script type="text/javascript">
    var oVideoTag = document.getElementById('some-video-id');
    var oLink = document.getElementById('startVideoLink');
    if (oLink && oVideoTag) {
        oLink.addEventListener('click',function(e) {
            oVideoTag.play();
            setTimeout(function() {
                oVideoTag.controls = 'controls';
            },2500);
        },false);
    }
</script>

언급URL : https://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button