A simple solution is – just to ignore user interactions :-)
video {
pointer-events: none;
}
This method worked in my case.
video=getElementsByTagName('video');
function removeControls(video){
video.removeAttribute('controls');
}
window.onload=removeControls(video);
First of all, remove video's "controls" attribute.
For iOS, we could hide video's buildin play button by adding the following CSS pseudo selector:
video::-webkit-media-controls-start-playback-button {
display: none;
}
You could hide controls using CSS Pseudo Selectors like Demo: https://jsfiddle.net/g1rsasa3
//For Firefox we have to handle it in JavaScript _x000D_
var vids = $("video"); _x000D_
$.each(vids, function(){_x000D_
this.controls = false; _x000D_
}); _x000D_
//Loop though all Video tags and set Controls as false_x000D_
_x000D_
$("video").click(function() {_x000D_
//console.log(this); _x000D_
if (this.paused) {_x000D_
this.play();_x000D_
} else {_x000D_
this.pause();_x000D_
}_x000D_
});
_x000D_
video::-webkit-media-controls {_x000D_
display: none;_x000D_
}_x000D_
_x000D_
/* Could Use thise as well for Individual Controls */_x000D_
video::-webkit-media-controls-play-button {}_x000D_
_x000D_
video::-webkit-media-controls-volume-slider {}_x000D_
_x000D_
video::-webkit-media-controls-mute-button {}_x000D_
_x000D_
video::-webkit-media-controls-timeline {}_x000D_
_x000D_
video::-webkit-media-controls-current-time-display {}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>_x000D_
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->_x000D_
_x000D_
<video width="800" autoplay controls="false">_x000D_
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">_x000D_
</video>
_x000D_
There are two ways to hide video tag controls
Remove the controls
attribute from the video tag.
Add the css to the video tag
video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}
<video width="320" height="240" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</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);
}
Source: Stackoverflow.com