Code HTML5 pour video et audio

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Code HTML5 pour video et audio

    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


    Code HTML:
    <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

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



    - Code pour les vidéos youtube

    Code HTML:
    <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

    Code:
    .videoyoutube {
      max-width:100%;
      height:auto;
      }
    - Code pour l'audio

    Code HTML:
    <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

    Code:
    .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

  • #2
    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 l'image pour l'afficher en taille normale

Nom : 1.jpg 
Affichages : 1 
Taille : 38,3 Ko 
ID : 1805599

    Cliquez sur l'image pour l'afficher en taille normale

Nom : 2.jpg 
Affichages : 1 
Taille : 35,1 Ko 
ID : 1805600

    Cliquez sur l'image pour l'afficher en taille normale

Nom : 3.jpg 
Affichages : 1 
Taille : 34,3 Ko 
ID : 1805601

    • 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 l'image pour l'afficher en taille normale

Nom : 1.jpg 
Affichages : 1 
Taille : 37,4 Ko 
ID : 1805598
    • 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.
    Dernière édition par saranyayendif à 09/06/2016, 08h04 Raison: mistakes

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X