Affichage d'une video sur smartphone android
Bonjour à tous.
Je me présente : Développeur maintenant retraité, j'ai surtout développé en Pascal Delphi des applis sur cahier des charges.
Aprèqs quelque années, je me suis remis au développement (ça me manquait trop...) pour faire un petit site web pour un ami.
L'appli : C'est un site web très simple avec'une page principale en html5 / css3 /javascript sur laquelle un bouton lance une video.
J'ai choisi de ne pas utiliser l'attribut controls de la balise <video>, et de gérer mes propres boutons (play/pause/fermer).
Lorsqu'on lance la vidéo, un div recouvre entièrement la page, et le player s'affiche lorsque la video est prête a jouer. Plus tard une barre de progression sera affichée avant.
Voici le code de la partie video :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <div id="player">
<video id="mavideo" preload="auto" onmouseout="cacheboutons()" onmouseover="afficheboutons()" >
<source src="video/mavideo.mp4" type="video/mp4" />
Votre navigateur ne supporte pas HTML5. Il est peut-être trop ancien.<br>
</video>
</div>
<!--Bouton play video-->
<div>
<svg id="play" class="play" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick="RepriseVideo()" onmouseover="afficheboutons()" >
<circle id="playstroke" stroke="#fff" stroke-width="4" fill-opacity=".2" cx="25" cy="25" r="23">
</circle>
<polygon fill="#fff" stroke="#968E8E" stroke-width="1"
points="15,10 40,25 15,40" />
</svg>
</div>
<!--Bouton pausevideo-->
<div>
<svg id="pause" class="pause" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick="PauseVideo()" onmouseover="afficheboutons()">
<rect x="0" y="3" width="90%" height="90%" rx="10" stroke-width="4" stroke="#fff" fill-opacity="0"/> ></rect>
<line x1="17" y1="12" x2="17" y2="38" stroke-width="6" stroke="#fff" />
<line x1="28" y1="12" x2="28" y2="38" stroke-width="6" stroke="#fff" />
</svg>
</div>
<!--Bouton fermer video-->
<div>
<svg id="fermer" class="fermer" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick="StopVideo()" onmouseover="afficheboutons()">
<line x1="7" y1="7" x2="40" y2="40" stroke-width="6" stroke="#fff" />
<line x1="7" y1="40" x2="40" y2="7" stroke-width="6" stroke="#fff" />
</svg>
</div> |
J'ai associé à l'id "player et aux élements 'bouton' le code css :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| #player {
background:#941213;
display:none;
position:absolute;
top:-32px;
width:100%; height:108%;
text-align:center;
z-index:200;
}
#mavideo {
Background-color:#941213;
height:96%
}
.play {
position:absolute;
display:none;
width:6%;
height:6%;
top:5px;
left:46%;
}
.pause {
position:absolute;
display:none;
width:6%;
height:6%;
top:5px;
left:46%;
}
.fermer {
position: absolute;
display:none;
width:6%;
height:6%;
top: 10px;
left:56%;
cursor: pointer;
} |
Au départ ces éléments sont masqués et c'est un script js qui les gèrent dynamiquement :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| var CtrlVideo = document.getElementById("mavideo");
var player = document.getElementById("player");
var mapause=document.getElementById("pause");
var monplay=document.getElementById("play");
var fermer=document.getElementById("fermer");
var decalp=0;
var decalf=0;
var widthp=0;
var widthv=0;
var marge=0;
var okvideo=true;
var id= "";
var width=0;
var elem = document.getElementById("barre");
/* var buff= CtrlVideo.buffered.end(0);
var duree= CtrlVideo.duration;
*/
// fonction de ré-affichage du bouton RepriseVideo
$(function () {
$("#mavideo").bind("ended", function() {
PauseVideo();
});
});
// pour détecter le changement d'orientation
window.onorientationchange = function() {
calculeposition();
}
//on ecoute l'énement 'click' sur le bouton de lancement
lecture.addEventListener("click", chargervideo, false);
// fonction de chargemen/lancement de la vidéo
function chargervideo() {
CtrlVideo.load();
demarrer.style.display="none"; // on cache le bouton de lancement
while (CtrlVideo.readyState < CtrlVideo.HAVE_METADATA)
{
}
modifBarre(); // futur pour gérer une progressbar perso
}
function modifBarre() {
A developper...
}
function LectureVideo(){
// // on affiche le div qui contient le player. il recouvre entièrement la page.
player.style.display="block";
// on calcule la position des boutons play/pause/fermer pour qu'ils soient en haut et à gauche/droite
calculeposition();
// on affiche le bouton 'fermer' qui reste toujours apparent.
fermer.style.display="block";
// on lance l'affichage de la vidéo
RepriseVideo();
}
// lance la vidéo, on cache le bouton 'play' et on affiche le bouton 'pause'
function RepriseVideo(){
calculeposition();
monplay.style.transitionDuration=".6s";
monplay.style.opacity="0";
monplay.style.display="none";
mapause.style.transitionDuration=".6s";
mapause.style.opacity="1";
mapause.style.display="block";
CtrlVideo.play();
}
// met la video en pause la vidéo, on cache le bouton 'pause' et on affiche le bouton 'play'
function PauseVideo(){
calculeposition();
mapause.style.transitionDuration=".6s";
mapause.style.opacity="0";
mapause.style.display="none";
monplay.style.transitionDuration=".6s";
monplay.style.opacity="1";
monplay.style.display="block";
CtrlVideo.pause();
/* if(okvideo) {
okvideo = false;
RepriseVideo();
}
*/
}
//On stoppe la video et on masque le player et les boutons play/pause/fermer et on montre le bouton de lancement
function StopVideo(){
CtrlVideo.currentTime = 0;
CtrlVideo.pause();
fermer.style.display="none";
monplay.style.display="none";
mapause.style.display="none";
player.style.display="none";
demarrer.style.display="block";
progression.style.display="none";
}
//on recalcule la position des boutons pour tenir compte du chagement d'orientation
function calculeposition() {
widthv=CtrlVideo.offsetWidth;
widthp=player.offsetWidth;
marge=CtrlVideo.offsetWidth*.02;
decalp=(widthp/2)-(widthv/2)+marge;
decalf=(widthp/2)+(widthv/2)-marge-widthp*.06;
mapause.style.left=decalp;
monplay.style.left=decalp;
fermer.style.left=decalf;
} |
Cela fonctionne correctement sur IOS, mais sur Android le démarrage est plus long et surtout au lancement le player est en fond noir avant que la video ne s'affiche pendant un temps plus ou moins long (variable)
Comment puis-je régler ce problème ?
Toutes les remarques et suggestions seront les bienvenues.
Merci d'avance de votre aide.
