Code HTML5 pour video et audio

[saranyayendif]

Re : Code HTLM5 pour video et audio

Pour ajouter des vidéos

Par exemple, regardez ce video share

• Connectez-vous à votre administrateur Joomla
• Sélectionnez "Composants => Yendif Video Share => Vidéos"
• Cliquez sur "Nouveau" pour ajouter une nouvelle vidéo ou "Modifier" pour faire des changements dans la vidéo existante. Ensuite, remplissez le formulaire selon les instructions suivantes,

• Cliquez sur Enregistrer en haut de la page
• Félicitations, vous avez ajouté une vidéo avec succès. Suivez les mêmes étapes pour ajouter d'autres vidéos.

Pour ajouter Audio

Par exemple, regardez ce music share

• Connectez-vous à votre administrateur Joomla
• Sélectionnez "Composants => Yendif Musique Share => Songs"
• Cliquez sur "Nouveau" pour ajouter une nouvelle chanson ou "Modifier" pour faire des changements dans la chanson existante. Ensuite, remplissez le formulaire selon les instructions suivantes,

• Cliquez sur Enregistrer en haut de la page
• Félicitations, vous avez ajouté avec succès une chanson. Suivez les mêmes étapes pour ajouter d'autres chansons.

[Coucoux]

Bonjour,

la discussion que je suivais a été fermée. Alors je viens la compléter en vous faisant part des codes HTML5 que j'utilise pour insérer des vidéos et audios dans mes articles directement avec du code, sans passer par des plugins ou composants.

Les vidéos en 4/3 ont toutes été converties en .MP4, .WEBM et .OGV avec Miro Converter, petit logiciel très simple d'utilisation. Idem pour l'audio en .OGG.


- Code pour les vidéos en 4/3

<div align="center">
<video class="video43" controls="controls" preload="none">
    <source src="images/videos/Amazon_Kingfisher.mp4.mp4" type="video/mp4" />
    <source src="images/videos/Amazon_Kingfisher.webmsd.webm" type="video/webm" />
    <source src="images/videos/Amazon_Kingfisher.oggtheora.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" width="400" height="320" data="images/videos/Amazon_Kingfisher.mp4.mp4">
        <param name="movie" value="images/videos/Amazon_Kingfisher.mp4.mp4" />
        <param name="wmode" value="transparent" />    
    <!--[if IE]>
    <embed src="images/videos/Amazon_Kingfisher.mp4.mp4" type="application/x-shockwave-flash" width="400" height="320" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed>
    <![endif]-->
Vous n'avez pas de navigateur moderne, ni Flash installé...<br/> veuillez mettre à jour votre navigateur ou basculer vers Firefox ou Chrome
    </object>
</video>
</div>

le code css pour la classe est ajouté dans mon custom.css

.video43 {
  width:400px;
  max-width:100%;
  height:auto;
  }

- Code pour les vidéos youtube

<div align="center">
<iframe width="400" height="300" src="https://www.youtube.com/embed/8UzL_HMppQw" frameborder="0" allowfullscreen>Vous n'avez pas de navigateur moderne, <br/> veuillez mettre à jour votre navigateur ou basculer vers Firefox ou Chrome</iframe>
</div>

le code css pour la classe est ajouté dans mon custom.css

.videoyoutube {
  max-width:100%;
  height:auto;
  }

- Code pour l'audio

<div align="center">
<audio  class="audiowd" controls="controls" preload="none">
    <source src="images/audio/whales_sounds1.oggvorbis.ogg" type="audio/ogg" />
    <source src="images/audio/whales_sounds1.mp3" type="audio/mpeg" />
Vous n'avez pas de navigateur moderne, <br/> veuillez mettre à jour votre navigateur ou basculer vers Firefox ou Chrome
</audio>
</div>

et le css

.audiowd {
  max-width:100%;
  height:auto;
  }

Ces codes fonctionnent très bien sous Firefox et Chrome mais rien n'apparaît sous Internet Explorer.

Bonne journée