Month: April 2014

Posted on

Video du site des 2 Caps

Ci-après une video du site des 2 Caps dans le Nord-Pas-de-Calais.

Le lecteur est jwplayer sur le serveur Base; le fichier est un mp4 sur Dropbox.

Cette version ne vaut que pour IE 8 et pour OPera 12.16.

Mais pour compatibilité avec Chrome, le code “embed” a été imbriqué dans un code “video” html5  avec le fichier mp4 de sorte que Opera 12.16 ne lit plus la video (il faudrait proposer en alternative pour html5 un fichier “ogg”). 

 

Posted on

Audioplayer html5

Ce modèle intégré ne permet pas de jouer la liste faute du script !
 
Une solution efficace consiste à placer un fichier html sur un serveur hôte : elle contiendra le script et éventuellement la feuille de sytle qui permet de modeler la playlist à l’état d’attente et après séletion d’un fichier audio.
Cette formule permet de placer des versions “ogg” et “mp3” pour la compatibilité des navigateurs.
Exemple avec ce fichier
Posted on

Lecteur AUDIO HTML5

Exemple de lecteur selon le codage html5 : compatibilité CHROME…

V. notamment  ce site pour audio et video, code html5

Incompatibilité IE8 et Opera 12.16 (qui affiche le lecteur sans effet) !

1. Le fichier est un mp3, hébergé sur un serveur (Base).

2.  Ce second exemple est une intégration Html5 à partir d’un fichier mp3 hébergé sur Dropbox.

attention ! Le code à insérer N’est PAS le code de partage du lien, MAIS le code obtenu pour téléchargement (par clic droit sur le bouton “télécharger” après avoir demandé le lien) : il est du type

[https://dl.dropboxusercontent.com/s/n° de référence/nom du fichier;mp3?dl=1&token_hash=la clé d’autorisation]

 Voir exemple avec le lecteur “Dewplayer” incompatible avec Chrome dans Vivaldi !

3. Exemple HTML5 avec 2 fichiers son,  un en ogg et  un en mp3 (ordre pour opera 12.16) 

4. Une solution compatible consiste à imbriquer dans les balises le code d’un lecteur flash pour le fichier mp3 

Posted on

Lecteurs audio Dewplayer, ligne, etc.

Ci-dessous, un exemple de lecteur audio à partir du module dewplayer.

1. Le code est uniquement de type “object”

Chant du fado

 2. Code “embed” seul

 

Un fado par Amalia Rodrigues

3. Ci-après, le même avec codes “object-embed” imbriqués :

Même chant qu'en 1

4. Version dewplayer avec fichier sur Dropbox  (code mebed)

Attention ! Le code à insérer N’est PAS le code de partage du lien, MAIS le code obtenu

 pour téléchargement (par clic droit sur le bouton “télécharger” après avoir demandé le

lien) : il est du type

[https://dl.dropboxusercontent.com/s/n° de référence/nom du fichier;mp3?dl=1&token_

hash=la clé d’autorisation]

A noter : seul le fichier son (mp3) est sur Dropbox. il est impossible d’y placer efficacement le fichier dewplayer.swf.

5. Un lecteur flash mp3 en ligne

 

Voir lecteur audio HTML5  ici

Posted on

Cadres avec texte

“Cadre important”=> pour signaler une info importante

Cadre important:

Idéal pour mettre une information en valeur sur son site. Pour réaliser un cadre similaire, il suffit de se servir du code présenté ci-dessous en utilisant “copier/coller”. Nous pouvons vérifier cette adaptation par l’exemple que voici puisque nous continuons à taper le texte sans modifier le code initial…..

N.-B.: le texte peut être placé en-dessous du titre => placer un [div] avant le texte  et reporter le code [/div] après tout le texte. Et en fait, le cadre s’allonge au gré de la dimension du texte.

On peut aussi, créer un paragraphe à l’intérieur codes [p] et [/p] comme ci-après.

Cadre cinéma

  Cadre cinéma:

Rien de mieux pour un site qui a pour thématique le cinéma. Une utilisation originale pourrait être de mettre des vignettes d’un film dedans. Pour se servir de ce cadre, il suffit de recopier ou de copier/coller le code présent juste en dessous. Le code de couleur peut être modifié.

Le cadre est extensible selon la longueur du texte !

Cadre relief rose-rouge

Cadre 2: L’utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.

 

Cadre vert partie bordé, partie relief

Cadre 1: L’utilisation de ce cadre est simple, il suffit de copier/coller le code présent juste en dessous de ce cadre.

 

 Cadre dentelé gris

Cadre orignal: Pour mettre en place ce cadre il suffit de copier-coller le code ci-dessous. Pour personnaliser ce cadre, il est possible de modifier la couleur de fond (c’est-à-dire le code e3e3e3).

 

Cadre d’information mauve AVEC POINT D’INTERROGATION en tête

?

Cadre d’information: Ce cadre est idéal pour insérer un texte informatif que les lecteurs repéreront facilement. Pour l’utiliser il suffit de copier/coller le code ci-dessous.

 

Texte avec mise en couleur = code [<span style=”color:(nomcouleur)” ou n° “#800000;”(exemple)>texte</span>]

ou code [font color=”(nomcouleur)”>texte</font> accepté et qui est transposé automatiquement dans le  précédent code.

Rem. : attribut [<b(old)>….</b>] autorisé

Exemple 

Essai de texte vert

Du NOUVEAU sur le blog<<<<<<<<<<<<
>>>>>>>>>>> Page LIENS : des videos du K3 2003, 2004, 2005, 2006, 2007Et maintenant le film sur le Lot (2005) et aussi sur la Hollande (1999) en page “Liens”