TUTO Player(s) dans HTML

de **aazerty** » Mar 25 Juin 2013 19:53

Bonjour ,

Le but de ce tutorial n'est pas d'indiquer comment insérer le lien d'une vidéo dans une page HTML ,
( NB: la vidéo se situant sur le web ) .
Ceci pouvant être effectué facilement , voir ci-dessous :

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <meta name="Boon" content="width=device-width; height=device-height;"></meta> </head> <body marginwidth="0" marginheight="0"> <p><center><strong><u>Skecth</u></strong></center></p> <div align=center> <A href="http://www.youtube.com/watch?v=fyX3D-XW5os">Dany Boon - Le pitbull ( 5mn45 )</A> </div> </body> </html>

Mais , d'insérer des vidéos déjà téléchargées ( et stockées sur l'ordi. ) dans une page HTML .

Dans l'exemple proposé , nous allons avoir 12 vidéos .

: Brulures_6sur12.JPG (29.72 Kio) Vu 17851 fois

de **aazerty** » Mar 25 Juin 2013 19:53

Télécharger "fichiers_player.zip" , il contient :
_ jwplayer.js
_ swfobject.js
_ player.swf
_ Liste_pour_player.bat
_ Brulures.htm
_ Z_explications_html.txt

fichiers_player.zip: (156.39 Kio) Téléchargé 861 fois

====================
Créer un répertoire "player" et y placer :
_ Brulures.htm
_ Z_explications_html.txt
_ jwplayer.js
_ swfobject.js

Créer un sous-répertoire "fichiers" et y placer :
_ jwplayer.js <= doublon
_ swfobject.js <= doublon
_ player.swf
_ Liste_pour_player.bat
====================
=== ORGANISATION ===

: Z_player.JPG (38.54 Kio) Vu 17850 fois

====================
====================
Édit du 26 juin , à 13H
Ouvrir "Liste_pour_player.bat" pour y effectuer une modif concernant FFMPEG .
Remplacer ".\ffmpeg.exe" (12 fois) par l'adresse exacte de ffmpeg .
Exemple : "C:\abcd\ffmpeg.exe"
Sauvegarder le batch "Liste_pour_player.bat" , puis le lancer , il va télécharger 12 vidéos : "01_02.flv" à "01_13.flv"
====================
====================
Lancer "Brulures.htm" afin de visionner les vidéos .
====================
====================
Pour comprendre la structure du fichier "Brulures.htm" , lire "Z_explications_html.txt" .
====================
Cordialement .

de **aazerty** » Mer 26 Juin 2013 01:30

Améliorations concernant le player ; modifier le fichier "Brulures.htm"
=============================
1) dans l'exemple précédent , nous utilisons le player standard :
Les commandes de celui-ci sont en bas , avec l'instruction : controlbar: 'bottom',

2) nous pouvons utiliser un autre "skin" : "beelden.zip" à placer dans /fichiers .
Ce qui nous donne une instruction ( remplaçant controlbar: 'bottom',) : skin: src="./fichiers/beelden.zip",

beelden.zip: (17.06 Kio) Téléchargé 831 fois

On constate que durant le visionnage les commandes s'effacent .

: Z_commandes.JPG (60.2 Kio) Vu 17819 fois

de **aazerty** » Mer 26 Juin 2013 21:36

Ci-dessous le code d'une page HTML , affichant une vidéo présente sur le web

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <meta name="Grands Brûlés" content="width=device-width; height=device-height;"> </meta> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="jwplayer.js"></script> </head> <body marginwidth="0" marginheight="0"> <p><center><Font size=+2><strong><u>Brûlures</u></strong></Font></center></p> <div align=center> <table> <object width="300" height="170"> <param name="movie2" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf"> </param> <param name="flashvars" value="src=http://www.allodocteurs.fr/upload/article/ad_brulures_intro_310512.flv"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="170" flashvars="src=http://www.allodocteurs.fr/upload/article/ad_brulures_intro_310512.flv"> </embed> </object> <div align=center><p><strong><u>Brûlures Intro</u></strong></p></div> <br><br> </table> </div> </body> </html>

A+ .

TUTO Player(s) dans HTML

TUTO Player(s) dans HTML

Re: TUTO Player(s) dans HTML

Re: TUTO Player(s) dans HTML

Re: TUTO Player(s) dans HTML

Qui est en ligne