Discussion :

[tabkelm]

bonjour,

Voici une page web lue par Chrome:

dans laquelle je clique sur le carré blanc creux pour mettre en plein écran.
Dans l'inspecteur,l'élément cliqué correspondant est représenté par cet extrait de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<button class="ytp-size-button ytp-button" aria-keyshortcuts="t" data-title-no-tooltip="Mode cinéma" aria-label="Mode cinéma Raccourci clavier t" title="Mode cinéma (t)">
  <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
    <use class="ytp-svg-shadow" xlink:href="#ytp-id-22"></use>
    <path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-22"></path>
  </svg>
</button>

Dans cet extrait de code,qu'est exactement:
a)le nom de classe ?
b)le nom de l'élément ?

merci de votre aide

[NoSmoking]

Bonjour,
j'ai du mal à comprendre la motivation de la demande

<button class="ytp-size-button ytp-button">
avec :

• le nom des classes
• le nom de l'élément

[tabkelm]

Quand j'affiche le coide source de cette page web,je ne trouve pas cet extrait de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<button class="ytp-size-button ytp-button" aria-keyshortcuts="t" data-title-no-tooltip="Mode cinéma" aria-label="Mode cinéma Raccourci clavier t" title="Mode cinéma (t)">
  <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
    <use class="ytp-svg-shadow" xlink:href="#ytp-id-22"></use>
    <path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-22"></path>
  </svg>
</button>

Je suppose qu'il doit se trouver quelque part dans les ressources de cette page mais laquelle ressource?
cf inspecteur->Sources

[zeltron54]

Bonsoir,

Même réponse que dans ton autre demande: https://www.developpez.net/forums/d2...video-youtube/
pour le mode plein écran envoi de la touche "F" key code 2 avec shift
Pour le mode cinéma envoi la touche "T" key code 17 avec la touche shift
soit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
tell application "System Events"
		tell application process "Google chrome"
			key code 17 using {shift down}
		end tell
	end tell

[tabkelm]

ce n'est pas une bonne réponse !
J'ai demandé où se trouve cet extrait de code?

[Pytet]

Pas sûr d'avoir bien compris la demande.

Si tu inclus la vidéo Youtube dans une balise iframe de ta page web :
- En consultant le code source de ta page web dans le navigateur (Ctrl + U) : tu peux voir uniquement la balise iframe dans le code html, ce qui est normal.
- En consultant le code source avec l'inspecteur dans le navigateur : tu peux voir le code html qui est chargé par youtube dans la balise iframe. Néanmoins, tu ne peux que consulter et pas modifier ce code car il est défini par le site youtube.

[tabkelm]

navigateur utilisé Chrome

effectivement,j'ai enfin trouvé dans :
inpecteur->Eléments
cet extrait de code
mais pas dans le code source de la page web

a)Laquelle sélection à recopier dans un fichier texte vide auquel on modifie l'extension en html reproduit cette même page web?:
-si je sélectionne tout le code source de la page web
-si je sélectionnais tout le contenu de inpecteur->Eléments

b)Je cherche un petit tuto expliquant mieux la différence entre le code source de la page web et le contenu de inpecteur->Eléments

c)ainsi qu'un petit tuto expliquant la différence entre le contenu de inpecteur->Eléments et le contenu de inpecteur->Sources

[Doksuri]

les elements generes en javascript n'apparaitron pas dans le code source de la page.

le code source de la page est tout le HTML + CSS + JS que le serveur a envoye au client (navigateur)
l'inspecteur d'element affiche "l'arbre" "live" de la page (apres interpretation du JS & CSS)

le code source est "statique"
l'inspecteur est "dynamique"

[tabkelm]

...et l'inspecteur sources?
pardon ! j'ai trouvé ceci sur internet:

"La principale différence est que "Afficher la source" affiche le code HTML qui a été transmis du serveur Web à votre navigateur. Inspecter les éléments est un outil de développement permettant d'examiner l'état de l'arborescence DOM après que le navigateur a appliqué sa correction d'erreur et après que Javascript ait manipulé le DOM"