Commit 120d571a authored by Alain Takoudjou's avatar Alain Takoudjou

Add play button to video custom controls

If autoplay is not working on browser, user can play the video with this button
parent f39347f1
...@@ -568,6 +568,10 @@ textarea.form-reply { ...@@ -568,6 +568,10 @@ textarea.form-reply {
text-align: center; text-align: center;
} }
.video-controls .video-play {
font-size: 0.85em;
}
.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{ .video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
opacity: .2; opacity: .2;
color: #c8c8c8 color: #c8c8c8
......
...@@ -231,6 +231,9 @@ ...@@ -231,6 +231,9 @@
<div id="videocontrols-template" class="invisible"> <div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay"> <div class="video-controls vc-overlay">
<div class="controls-button controls-left"> <div class="controls-button controls-left">
<span class="video-play" title="Play video">
<i class="fas fa-play"></i>
</span>
<span class="volume" title="Volume"> <span class="volume" title="Volume">
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i> <i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" > <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
......
...@@ -1166,6 +1166,14 @@ function setVolumeButton(button, muted) { ...@@ -1166,6 +1166,14 @@ function setVolumeButton(button, muted) {
* @param {HTMLElement} container * @param {HTMLElement} container
*/ */
function registerControlHandlers(media, container) { function registerControlHandlers(media, container) {
let play = getVideoButton(container, 'video-play');
if(play) {
play.onclick = function(event) {
event.preventDefault();
media.play();
};
}
let volume = getVideoButton(container, 'volume'); let volume = getVideoButton(container, 'volume');
if (volume) { if (volume) {
volume.onclick = function(event) { volume.onclick = function(event) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment