Player vidéo fullscreen
Encore à affiner un peu mais déjà fonctionnel
La lecture se déclenche automatiquement lorsqu'il arrive en haut du viewport et s'arrête quand il en sort.
Plugin jQuery videoFullScreenFixed-plugin.js à utiliser en complément du plugin du player videoPlayerYtDm-plugin.js
Léger souci de perf avec les vidéos Dailymotion, privilégier Youtube.
Ea cum mnesarchum scribentur, eius veniam erroribus at est. Usu nonumy officiis at, quo no laoreet evertitur intellegebat. Ut malorum omnesque praesent qui. Eam ne fabulas mentitum, at eam voluptua tincidunt omittantur. In complectitur voluptatibus vel, eos voluptaria assueverit ut. Sint eius te vim.
Mel nulla civibus tincidunt te, pri te ocurreret democritum dissentias. Nonumy consectetuer te ius, mei id erant nullam. Vix paulo nusquam invidunt no, consul tritani omnesque ad pro. Duo ea probo oblique adversarium.
Pri an illum animal fuisset, invidunt recteque conceptam per cu. Eleifend philosophia vis no, ea sed omnium disputando philosophia. Nec quodsi propriae deserunt in, eam id labore assentior. Ea nibh labore bonorum nam. Oblique probatus expetenda at nec, cum dicit insolens delicata ea.
Ut vix dolor omnesque argumentum, cum ea diam erroribus referrentur. Est ea exerci hendrerit assueverit, probo modus no ius, ne decore ullamcorper vim. Mei cu purto mandamus scriptorem. Pri et vidit delicatissimi, duo veri offendit conceptam in. Est at minimum voluptaria, te cum harum utroque omittam.
Vix ubique omittam atomorum id, ad has antiopam gloriatur incorrupte. Vivendo pertinax gubergren qui no. Vivendum oportere splendide per ut. Et mea case dolor, debet nusquam moderatius id eos, sed facer conceptam honestatis ad. Nonumy legere te sed. Vim offendit accusata te.
Laoreet adolescens ut mel. Mel et sint probo reprehendunt, in oporteat partiendo sea. Ei qui partem eleifend vulputate, no duo tollit semper corpora. Purto decore ex eam. Pri an aeterno alienum nominati, offendit nominati id usu.
No vix quem decore, ne mei soluta cetero efficiendi. Eu eam argumentum liberavisse, dolor torquatos eum eu, te paulo facilisi vis. Amet deserunt id vim. Ne eos quas argumentum, an mea sapientem adversarium.
Eu vel albucius delicata dissentiunt. Alia sonet dissentiunt id duo, pro persius postulant democritum id. Atqui velit fuisset in pri. Et dicant platonem persequeris nec, ad mucius neglegentur pri, amet altera integre vel et. Per id cetero aliquando honestatis. Quas graeco invidunt in vim, pro commodo sadipscing id. Graece placerat id pri.
Et voilà !
Ea cum mnesarchum scribentur, eius veniam erroribus at est. Usu nonumy officiis at, quo no laoreet evertitur intellegebat. Ut malorum omnesque praesent qui. Eam ne fabulas mentitum, at eam voluptua tincidunt omittantur. In complectitur voluptatibus vel, eos voluptaria assueverit ut. Sint eius te vim.
Mel nulla civibus tincidunt te, pri te ocurreret democritum dissentias. Nonumy consectetuer te ius, mei id erant nullam. Vix paulo nusquam invidunt no, consul tritani omnesque ad pro. Duo ea probo oblique adversarium.
Pri an illum animal fuisset, invidunt recteque conceptam per cu. Eleifend philosophia vis no, ea sed omnium disputando philosophia. Nec quodsi propriae deserunt in, eam id labore assentior. Ea nibh labore bonorum nam. Oblique probatus expetenda at nec, cum dicit insolens delicata ea.
Ut vix dolor omnesque argumentum, cum ea diam erroribus referrentur. Est ea exerci hendrerit assueverit, probo modus no ius, ne decore ullamcorper vim. Mei cu purto mandamus scriptorem. Pri et vidit delicatissimi, duo veri offendit conceptam in. Est at minimum voluptaria, te cum harum utroque omittam.
Vix ubique omittam atomorum id, ad has antiopam gloriatur incorrupte. Vivendo pertinax gubergren qui no. Vivendum oportere splendide per ut. Et mea case dolor, debet nusquam moderatius id eos, sed facer conceptam honestatis ad. Nonumy legere te sed. Vim offendit accusata te.
Laoreet adolescens ut mel. Mel et sint probo reprehendunt, in oporteat partiendo sea. Ei qui partem eleifend vulputate, no duo tollit semper corpora. Purto decore ex eam. Pri an aeterno alienum nominati, offendit nominati id usu.
No vix quem decore, ne mei soluta cetero efficiendi. Eu eam argumentum liberavisse, dolor torquatos eum eu, te paulo facilisi vis. Amet deserunt id vim. Ne eos quas argumentum, an mea sapientem adversarium.
Eu vel albucius delicata dissentiunt. Alia sonet dissentiunt id duo, pro persius postulant democritum id. Atqui velit fuisset in pri. Et dicant platonem persequeris nec, ad mucius neglegentur pri, amet altera integre vel et. Per id cetero aliquando honestatis. Quas graeco invidunt in vim, pro commodo sadipscing id. Graece placerat id pri.
Quelques zesplications
Principe
On utilise le plugin videoPlayerYtDm pour les bases du player.
Le plugin videoFullScreenFixed-plugin.js gère le foulscrinage.
Le player est positionné en absolute dans un conteneur relative de largeur 100% (puis en fixed aux bons moments) avec un z-index: -1.
Une couche de css, une pincée de javascript et sa taille et sa position varient pour remplir tout l'espace possible en fonction de son format (ratio à saisir dans les data-x et data-w, voir plugin videoPlayerYtDm) et de la taille de la fenêtre, quitte à masquer en bord perdu haut et bas ou gauche et droite, la vidéo est toujours centrée.
Pour les mobiles, la vidéo reste entière, prend toute la largeur possible et se place sous les commandes.
Javascript
Inclure les plugins videoPlayerYtDm-plugin.js et videoFullScreenFixed-plugin.js.
Déclarer les modules au domready :
$('.video-player').videoPlayerYtDm();
$('.video-full-screen').videoFullScreenFixed();
CSS
Le fichier videoPlayerYtDm-plugin.css contient toutes les déclarations nécessaires au player et au fullscreen.
Le fichier videoPlayerYtDm-fullscreen-demo.css contient les styles pour le contenu scrollable.
HTML
Les commandes et la timeline doivent être sortis du bloc video-player et placés dans un bloc fullscreen-tools.
L'ensemble est à placer dans un bloc video-full-screen auquel on rajoute la classe masked quand on veut placer un élément par-dessus la vidéo (un gros PNG avec zones transparentes dans les exemples). On place alors un bloc mask au même niveau que player et commandes.
Tout bloc avec la classe js-to-fix passera en position fixed lorsque l'ensemble arrive au top du viewport. Il faut donc ajouter cette classe aux blocs video-player et fullscreen-tools.
Tout élément placé sous cet ensemble (mais toujours dans le bloc video-full-screen) générera le scroll lorsque l'ensemble player-fullscreen passera en mode fixed.
Github
À suivre...