반응형
HTML5 비디오 // 컨트롤을 완전히 숨기기
HTML5 비디오 컨트롤을 완전히 숨기려면 어떻게해야합니까?
<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>
거짓은 작동하지 않았습니다. 어떻게 수행됩니까?
건배.
이렇게 :
<video width="300" height="200" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>
controls
A는 부울 속성 :
참고 : 부울 속성에는 "true"및 "false"값이 허용되지 않습니다. 거짓 값을 나타내려면 속성을 모두 생략해야합니다.
데모와 같은 CSS 의사 선택기를 사용하여 컨트롤을 숨길 수 있습니다. https://jsfiddle.net/g1rsasa3
//For Firefox we have to handle it in JavaScript
var vids = $("video");
$.each(vids, function(){
this.controls = false;
});
//Loop though all Video tags and set Controls as false
$("video").click(function() {
//console.log(this);
if (this.paused) {
this.play();
} else {
this.pause();
}
});
video::-webkit-media-controls {
display: none;
}
/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->
<video width="800" autoplay controls="false">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
간단한 해결책은 – 사용자 상호 작용을 무시하는 것입니다. :-)
video {
pointer-events: none;
}
우선, 비디오의 "controls"속성을 제거하십시오.
iOS의 경우 다음 CSS 의사 선택기를 추가하여 비디오의 내장 재생 버튼을 숨길 수 있습니다.
video::-webkit-media-controls-start-playback-button {
display: none;
}
이 방법은 제 경우에 효과적이었습니다.
video=getElementsByTagName('video');
function removeControls(video){
video.removeAttribute('controls');
}
window.onload=removeControls(video);
document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);
function initialiseMediaPlayer() {
mediaPlayer = document.getElementById('media-video');
mediaPlayer.controls = false;
mediaPlayer.addEventListener('volumechange', function(e) {
// Update the button to be mute/unmute
if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
else changeButtonType(muteBtn, 'mute');
}, false);
mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);
}
참고URL : https://stackoverflow.com/questions/14161516/html5-video-completely-hide-controls
반응형
'Programing' 카테고리의 다른 글
mysql에서 전역 sql_mode 설정 (0) | 2020.11.03 |
---|---|
왜 파이썬 3.6.1이 AttributeError를 던지는가 : 모듈 'enum'에 'IntFlag'속성이 없나요? (0) | 2020.11.03 |
파일 또는 어셈블리 'WebGrease, Version = 1.5.1.25624, Culture = neutral, PublicKeyToken = 31bf3856ad364e35'또는 해당 종속성 중 하나를로드 할 수 없습니다. (0) | 2020.11.03 |
C ++에서 헤더 파일을 제거해야합니까? (0) | 2020.11.03 |
UITableViewCell을 선택하면 UIView backgroundColor가 사라집니다. (0) | 2020.11.03 |