Comment puis-je faire un DIV visible en haut de l'HTML5 vidéo en plein écran?
Mon but ultime est d'avoir un lien apparaît en haut de la vidéo lorsque la vidéo a atteint la fin. À l'aide de la JW Joueurs fonctionnalité j'ai trouvé comment avoir le lien apparaît lorsque la vidéo est terminée, mais uniquement dans la vue standard. Si l'utilisateur visionne la vidéo en plein écran, le lien ne s'affiche pas. J'ai fait beaucoup de lecture et de comprendre que lorsqu'il est en mode plein écran de la vidéo est en flash et je ne peux pas remplacer les fonctions de flash sans intégrer le lien dans le fichier swf, dont je ne veux pas faire.
Ce que j'ai fait est de supprimer le bouton fullscreen dans le JW Player lecteur vidéo à l'aide de la peau. Puis j'ai créé un bouton pour afficher la vidéo en plein écran en utilisant le HTML5 plein écran de la fonctionnalité. (Je comprends que IE ne fonctionnera pas avec cette...c'est très bien pour l'instant). Je suis aussi capable de créer un plein écran de modification de l'état de l'écouteur d'événement pour que mon lien apparaît sur le dessus de la vidéo. Mais il ne fonctionne pas.
Peu importe comment je le style de la DIV qui détient le lien, il n'apparaît pas sur la vidéo.
Quelqu'un peut me pointer dans la bonne direction?
Merci pour toute aide que quelqu'un peut me donner.
Exemple de Code:
#container{
position:relative;
z-index:0;
}
#overlay {
visibility:hidden;
width: 700px;
height:50px;
color:#FFF;
position: absolute;
top: 532px;
margin:8px;
padding:5px;
background-color:#000;
text-align:center;
}
#overlayfullscreen{
visibility:hidden;
text-align:center;
color:#FFF;
font-size:26px;
z-index: 1000;
position: absolute;
top: 800px;
margin:8px;
padding:5px;
overlay:hidden;
}
<div id="container">
Loading the player, if not working please update your browser.
</div>
<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>
var path = '<?php echo $video_path ?>';
jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,
file: "<?php echo $full_video_path ?>",
height: <?php echo $height ?>,
width: <?php echo $width ?>,
skin: '<?php echo $skin ?>',
events: {
onComplete: function(){
document.getElementById('overlay').style.visibility = 'visible';
}
}
});
document.addEventListener("mozfullscreenchange", function ()
{
document.getElementById('overlayfullscreen').style.visibility = 'visible';
}, false);
OriginalL'auteur bryankerk | 2013-04-02
Vous devez vous connecter pour publier un commentaire.
Le problème est que la vidéo est affichée
absolutely
. Vous pouvez faire de votre lien ontposition: absolute
et qui devrait le faire.OriginalL'auteur What have you tried
C'est un truc simple, vous devez ajouter la valeur maximale de z-index qui est (z-index: 2147483647;) dans l'élément de superposition. Cette astuce permettra de résoudre votre problème.
Est ici mise à jour de votre violon:
http://jsfiddle.net/TcpX5/36/
Cela ne fonctionne pas dans le mobile.
pas de travail en 2018 (essayé sur Chrome 71.0.3578.80)
OriginalL'auteur Carmijoon
J'ai mis en place une petite démo, je suis à l'aide d'une vidéo HTML5, pas de Flash Player, mais le comportement doit être la même: http://jsfiddle.net/sandro_paganotti/TcpX5/
Pour basculer en plein écran je suggère d'utiliser écran rempli (https://github.com/sindresorhus/screenfull.js) que, fondamentalement, les poignées de petites différences entre Firefox et Chrome.
Voici le code, il suffit de remplacer le
<video>
élément avec votre Lecteur JW mise en œuvre:HTML
CSS
Javascript
Une dernière remarque: jsfiddle interdire le mode plein écran (source: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle) pour voir la démo, vous devez modifier manuellement jsfiddle iframe à l'aide de chrome devtools ou firebug, comme spécifié dans le lien ci-dessus.
OriginalL'auteur Sandro Paganotti