Problème d'affichage vidéo en arrière-plan
Author: PEARSON J.
Visited 1536,
Followers 2,
Shared 0
Apparement si on insére une vidéo ( vérifié pour le moment avec youtube) en arriére plan on ne peut pas inserer un objet texte par dessus cela créé ce décalage de l'actionj de la souris . A la place on peut inserer un objet titre mais c'est plus contraignant . Tiens moi informé et bon wk à toi aussi .
a+ jp
Posted on the
Author
hello JIPER,
en rajout de mon dernier message :
- la page d'acceuil est toujours avec la vidéo stockée sur youtube , l'objet texte a été supprimé , il n'y a plus d'interférence . D"ailleurs j'en profite comment supprimer le bandeau noir supérieur où il y le nom de ma chaine, à voir + tard , etc .?? as-tu une solution ??
- j'ai ajouté la page 11 avec la même video en fond de page mais celle-ci a été stockée par FTP sur le serveur dans un dossier ( MEDIA) ainsi il n'y a pas de risque d'écrasement en cas de remodellage du site ( chargement seulement des dossiers modifiés) . Par contre demarrage auto , pas d'arrêt possible ( changement de page seulement) mais suppression du bandeau et objet texte sans interférence.
A vérifier , merci (https://www.lescitrons.re/test/index.html)
a+ jp
Salut JP,
J'ai sollicité l'aide de KolAsim qui est un Pro pour le fonctionnement des vidéos. Attendre son passage dès que possible...
@+, J.P.
(It > Fr) ... salut les gars, j'ai vu l'avertissement, mais je n'ai peut-être pas compris, désolé ...
... à la page 11 je ne vois pas la présence de vidéos Youtube ...
ciao
.
Ciao KolAsim,
La vidéo Youtube est sur la page d'accueil. La page 11 est un test de comparaison... Attendons que JP vienne éclairer ta lanterne pour ce qu'il veut mettre en place...
Ici la 1ère discussion que nous avions eu au sujet de la vidéo de J. Pearson :
https://helpcenter.websitex5.com/en/post/228720
Merci pour ton aide, ;o))
J.P.
Author
bien le bonjour à vous deux et un grnad merci à kolAsim de me consacrer cinq minutes ...
comme expliqué dans mon message du 15/06/2020/15h34 il y a un probléme en page acceuil si on installe une vidéo youtube en fond d'écran . Les nouvelles régles avec Chrome veulent que on active ou non le démarrage vidéo avec le fameux triangle rouge plein centre écran ( rouge quand on est dessus avec la souris donc actif) . Mais si on installe en plus un objet texte par dessus la vidéo , " l'accroche" du fameux triangle avec la souris se fait soit complétement à gauche ou complétement à droite de l'écran , on voit à ce moment là le triangle passer en rouge .
Afin de prouver qu'il s'agit bien de l'objet TEXTE qui pose probléme j'ai installé la même vidéo en page 11 mais sous une autre façon . J'ai stocké cette vidéo youtube sur mon serveur dans un dossier appelé MEDIA , de ce fait il n'y a plus de lien avec youtube . J'ai construit la page 11 avec en fond d'écran , la fameuse vidéo appelée sur le serveur dossier MEDIA , de ce fait démarrage automatique sans bandeau supérieur . En démonstration j'ai inséré un objet TEXTE qui ne géne plus le fonctionnement de la page .
QUESTION : comment faire pour construire une page d'acceuil avec une vidéo youtube donc démarrage par "triangle rouge" , insérer un ob jet TEXTE sans créer ce conflit ?
ai-je été assez clair ? merci pour votre aide
jpp
(Google | It > Fr) salut les gars, (considérez que je n'ai pas actuellement le programme)...
... à mon avis, pour les vidéos YouYube à utiliser comme arrière-plan, TUBULAR serait préféré, ce qui exclut l'audio et donc la lecture automatique fonctionne ...
...
... sinon, toujours si je comprends bien, et par rapport à l'arrière-plan vidéo YT du programme, en voyant la page actuelle test/index.html essayez d'utiliser mon code, pour voir si avec un bouton ajouté il fait ce que vous voulez réaliser ...
... le code doit être collé dans la page Propriétés, section Expert, 3ème option (/HEAD):
<script> $( document ).ready(function() { //script by *KolAsim*
srcK="https://www.youtube.com/embed/5shGeNpcWUo?enablejsapi=1&autoplay=1&loop=1&controls=0&disablekb=1&fs=0&showinfo=0&rel=0&playlist=5shGeNpcWUo";
$("#imPageRowGraphicsVideo_1").attr("src", srcK);
playK='<div id="play_K" style="position:absolute;top:50%;margin-top:-80px;left:50%;margin-left:-80px;z-index:100000;"><a href="#" class="play-video" ><img src="https://img.icons8.com/dotty/2x/circled-play.png" alt="PlaySfondo/ChiudiPulsante" title="PlaySfondo/ChiudiPulsante"></a></div>';
$('#imPageRowGraphics_1').append(playK) ;
$('a.play-video').click(function () {
$('#imPageRowGraphicsVideo_1_wrapper iframe')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');$('#play_K').hide();});}); </script>
.
ciao
.
Author
merci à kolASIM mais là cela me dépasse ..
JIPER , je suis sur la version EVO donc page acceuil évoquée , propriétés OK , section expert NON VU, et dans la section AVANCE son code doit être collé avant la balise HEAD OK , enfin il est demandé la définition du fichier créé ( html, php, etc )
que faire , merci JIPER
JPP
Re.. ;o)
Section Expert = Propriétés de la page, Onglet Avancées... En principe ta page devrait être en HTML non ?
@+, J.P.
(It > Fr) ... je pensais que c'était simple;
si vous connaissez bien le programme c'est très simple...
... rappelez-vous que le code n'est valide que pour la page ***/test/index.html
... comme anticipé, fais juste un simple copier/coller dans cette section:
>> Étape 3 - Plan > Fenêtre Propriétés de la page > Les options de la Section Avancées | ▪Code personnalisé: - (3°) > Avant la balise de fermeture </HEAD>
.
ciao a tutti
..............................
... si vous avez besoin de plus de précisions, prévenez-moi ...
.
Author
bonjour, effectivement c'est simple mais bon tout le monde n' a pas la dextérité de KolAsim...
j'ai fais un test , icone (cercles) un peu grossier , taille xxl ( je l'ai réduis c'est mieux ) mais pas le même centrage que YT . Le plus embétant c'est que cela n'écrase pas l'action de YT , son icone rouge est toujours là et il prime sur l'action de mise en route de la vidéo . Voili, voilà pour une premiére appréciation .
... j'ai vu que ça ne marche pas sur mon smartphone ...
Author
... pas grave . comme déjà indiqué j'ai enregistré la même vidéo YT dans un dossier sur mon serveur , installée en fond d'écran avec STYLE DE LIGNES, avantages je l'appelle directement à partir de la page de mon site , je peux y intégrer de l'objet texte et surtout du plein écran car la barre supérieur de YT a disparu ( la barre avec le nom de ma chaine , "à voir un peu plus tard", etc.) mais le démarrage est immédiat , arrêt seulement en changeant de page (vidéo toujours présente page 11 avec objet TEXTE "essai" ).
QUESTION : le but est de mettre cela en page acceuil , peut-on integrer au bas de l'écran une commande discrete de démarrage-arrêt vidéo, son on-off ?
merci encore , bonne journée
jpp
... Je ne sais pas si j'ai compris votre demande; ... voulez-vous un bouton EXTRA [Play/Pause] pour la vidéo d'arrière-plan (mp4) à la page 11?
ciao
.
Author
... LA PAGE 11 n'est qu'un test , la vidéo sera transférée en page d'acceuil ( en format MP4 ou probablement WEBM ) dons en fait le but est de tromper les nouvelles normes appliquées par les navigateurs => si il y a du son je coupe la vidéo .
Donc si on peut bloquer le son au chargement et contourner ainsi les normes sans empecher le téléchargement de la vidéo DONC avoir un bouton ( même milieu écran ) qui commande le son ( ON ou OFF ) ,
SAUF ERREUR DE MA PART ,,
encore merci ...jpp
(It > Fr) ... Je pense que ce que vous demandez dans ce cas est superflu, comme pour les vidéos * .m4 & * .webm ... il n'y a pas de problèmes, ... le programme les rend muettes ('muted') ...
... vous aurez remarqué qu'à la page 11 la vidéo de fond fonctionne également régulièrement dans le smartphone, évidemment sans audio ...
... afin que vous puissiez également l'appliquer dans la HOME ...
... lorsque vous l'avez fait, informez et envoyez le LIEN que je vais vérifier ...
... in extremis, si ce n'est pas bon, nous recourrons à mon code EXTRA le cas échéant ...
.
ciao
.
Author
... ouah , je me suis planté effectivement . Au chargement la vidéo est muétte ( en page acceuil qui a été changée) je n'avais pas fait attention .... Je voudrais que le prospect potentiel puisse activer ou desactiver le son si cela lui plait ( la vidéo se charge avec un bouton son milieu écran par exemple , au démarrage son off , avec action du prospect "JE VEUX DU SON DONC SON ON " est-ce possible ?
ps : d'ailleurs une fois que la vidéo est chargée , elle se joue en replay auto et avec le son automatiquement .
merci encore et désolé pour l'erreur jpp
... debe verificar sus dispositivos; ... te dije mi prueba antes ...
... verifique y deje saber el resultado ...
... entonces, si realmente lo desea, puede intentar con mi código EXTRA para agregar un botón de audio Sí / No para el fondo MP4-WEBM ...
.. (sería superfluo porque el audio de fondo siempre ha molestado) ...
.
Author
bonjour, désolé mais je n'ai pas compris ( translator italien ne reconnais pas )
bonne journée , jp
Salut JPP,
C'est de l'espagnol... KolAsim a du cliquer sur la mauvaise touche du traducteur... ;o)
@+, J.P.
... x > AUDIO YES | NO ...
>> (/TEST | HOME) > Étape 3 - Plan > Fenêtre Propriétés de la page > Les options de la Section Avancées | ▪Code personnalisé: (6°) > Avant la balise de fermeture </BODY>.
----code-----------------------------------------------------
<!-- script sound yes/no video background by KolAsim *x /BODY* -->
<script> // script sound yes/no video background by KolAsim
$( "body" ).append ('<a href="javascript:void(0)" id="mute"> <img id="imgK" src="https://img.icons8.com/ios-filled/2x/high-volume.png" onclick="muteK()" style="position:fixed;width:60px;bottom:40px;right:20px;z-index:30;background:rgba(255,255,255,0.5)" alt="sound yes/no" title="sound yes/no"></a>');
function muteK() {
if (imPageRowGraphicsVideo_1.muted === false) {
document.getElementById("imPageRowGraphicsVideo_1").muted = true;
document.getElementById("imgK").src = "https://img.icons8.com/ios-filled/2x/high-volume.png"; // https://img.icons8.com/ios-filled/2x/high-volume.png
} else {
document.getElementById("imPageRowGraphicsVideo_1").muted = false;
document.getElementById("imgK").src = "https://img.icons8.com/ios-filled/2x/mute.png"; // https://img.icons8.com/ios-filled/2x/mute.png
KA="KolAsim";
}
}
</script>
----------------------------------------------------
ciao
.
... sì ......... ...ciao
Author
oups !!! effectivement merci
je regarde son script
bonne journée , jpp
Author
bonjour KolAsim ,
ok tout va bien j'ai solutionné mon pb , merci encore pour votre efficacité , à +
jpp
... grazie, ciao