mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-22 16:45:58 +01:00
Code Activity

Add play button to video custom controls

Browse source 
If autoplay is not working on browser, user can play the video with this button
This commit is contained in:
Alain Takoudjou 2020-12-15 15:20:53 +01:00 committed by Juliusz Chroboczek
parent 6b4d351295
commit bdfa793a8d
3 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/galene.css
View file

@ -525,6 +525,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

3
static/galene.html
View file

@ -229,6 +229,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" >

8
static/galene.js
View file

@ -1166,6 +1166,14 @@ function setVolumeButton(muted, button, slider) {
* @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) {