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

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

---

<video>요소 에 기본적으로 나타나는 큰 재생 버튼을 숨기고 싶습니다.

가능합니까?

---

애플이 다시 그림자 돔을 바꾼 것 같다.

재생 버튼 컨트롤을 숨기려면 다음 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;
}

---

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

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

---

Safari iOS의 Shadow DOM을 살펴보면 원하는 것이 (큰 중앙 재생 버튼 만 숨겨 짐) 다음과 같다는 것을 알 수 있습니다.

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

Ian의 대답은 텍스트 트랙을 포함한 모든 것을 숨 깁니다 (자막 ...)

---

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

controls= "false"

iOS의 기본 브라우저 인 Safari CSS의 경우이 해키 트릭을 시도 할 수도 있습니다.

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

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

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

---

Ian의 답변에 따라

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

모든 컨트롤이 숨겨집니다. 자동 재생되지 않는 배경 동영상에 적합합니다.

---

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

'<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>'

---

오늘 @ 2017 iOS 10에서는 다음과 같이 작동합니다.

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

---

재생 버튼을 제거 할 수 없습니다. 이 비디오 자리 표시자는 항상 문서에서 다음과 같이 나타납니다. iPhone Video PlaceHolder . 그러나 아마도 당신이 아이폰을 사용하고 있음을 감지하고 비디오 태그 대신 비디오에 대한 링크가있는 이미지를 표시 할 수 있습니다.

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

동영상은 동영상 태그처럼 플레이어에서 실행됩니다.

---

이 시도:

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

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

---

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

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

That might be useful if you want to hide it on Android as well as on iOS.

---

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

Didn't work for me on iOS, but

*::-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;
}

Worked perfect!

---

Yes you can do this! The trick is to "hide" the video controls, by not adding the "controls" attribute to your video tag. Then you let it be dynamically added a few seconds after the video starts to play, by appending the "controls" property to the tag using Javascript. Simply set the value to "controls" and it will dynamically appear in the DOM... as if you had added the controls to your video tag's HTML. Adjust the timer as needed.

<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>

ReferenceURL : https://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button