modification de la vidéo interactive
DESCRIPTION
Modification de la vidéo interactive. L’Oréal. La vidéo démarrera directement lors de l’arrivée sur la page . Dis moi s’il y a quelques choses à faire de ton coté. Modification des boutons dans l’ascenseur ainsi que l’ordre. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/1.jpg)
Modification de la vidéo interactive
L’Oréal
![Page 2: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/2.jpg)
![Page 3: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/3.jpg)
La vidéo démarrera directement lors de l’arrivée sur la page.
Dis moi s’il y a quelques choses à faire de ton coté.
![Page 4: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/4.jpg)
Modification des boutons dans l’ascenseur ainsi que l’ordre.
Lors du clique sur l’une des entrées, suppression de la vidéo intermédiaire. A la place, on fait une disparition en fade-out noir et apparition dans le couloir en fade-in noir (suppression également de la vidéo de sortie d’ascenseur).
![Page 5: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/5.jpg)
Modification du style et des textes des boutons dans les couloirs.
![Page 6: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/6.jpg)
Mise en place de roll-over sur les boutons « métiers ».Chaque métier dispose donc :- d’une image- d’un texte
Il faut prévoir que la zone texte peut être de 2 lignes. Dans ce cas, la zone texte s’agrandit vers le haut. Cf exemple slide 12.
Il faut faire attention que la typo reste lisible dans le flash.
Au roll-over sur le nom du métier, le bloc apparait en passant derrière le bouton métier. Cf exemple slide 16-17-18
![Page 7: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/7.jpg)
Une fois que le roll-over est actif (avec image + texte visible), il devient cliquable et lance la vidéo correspondante au clic.
![Page 8: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/8.jpg)
Modification du player vidéo.
Comme tu peux le voir, la barre du player se situe au plus bas de la vidéo (en noir et blanc).
![Page 9: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/9.jpg)
Lorsque la souris va rentrer dans la zone de la vidéo, le bouton « pause » s’affiche. Lorsque l’on sort de la zone vidéo, le « pause » disparait.
Le but étant que lors de la lecture d’une vidéo, si je clique dans la zone vidéo, la vidéo se mette en pause.
![Page 10: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/10.jpg)
Une fois que la vidéo est en pause, le bouton « play « apparait.
A ce moment là, au clic dans la zone vidéo, la lecture reprend (et le bouton play disparait).
![Page 11: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/11.jpg)
![Page 12: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/12.jpg)
![Page 13: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/13.jpg)
![Page 14: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/14.jpg)
![Page 15: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/15.jpg)
![Page 16: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/16.jpg)
![Page 17: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/17.jpg)
![Page 18: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/18.jpg)
![Page 19: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/19.jpg)
![Page 20: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/20.jpg)
![Page 21: Modification de la vidéo interactive](https://reader036.vdocuments.site/reader036/viewer/2022070422/56816417550346895dd5cb6a/html5/thumbnails/21.jpg)
Ecran final des vidéos.Cette écran arrivera à la fin de chaque vidéo.
Il me semble que l’on peut les insérer nous même. Tu confirmes ?