HTML Video Automator

4-darsy HD

Téléchargez cette vidéo: MP4, WebM

Instructions pour ajouter la vidéo sur une page web

Dans wordpress: Copier simplement le code ci-dessous dans la page ou l'article.
[video mp4="http://av.unil.ch/hva/3617/4-darsy_hd.mp4" webm="http://av.unil.ch/hva/3617/4-darsy_hd.webm" poster="http://av.unil.ch/hva/3617/4-darsy_hd.png" preload="true" width="640" height="360"]

Dans une page Jahia UNIL

Ajoutez un conteneur vidéo à votre page avec le bouton nommé "Vidéo"
Spécifiez la taille de la vidéo:
- hauteur: 360
- largeur: 640
Sous "Adresse de la vidéo", collez le lien vers le format mp4:
http://av.unil.ch/hva/3617/4-darsy_hd.mp4
Au besoin, configurez les autres options et cliquez sur "Sauver"

Dans Moodle UNIL: Copier simplement le lien ci-dessous dans le texte d'un cours.
http://av.unil.ch/hva/3617/4-darsy_hd.html?d=640x360

Méthode universelle: Dans une page web statique

Tout d'abord, copier le code suivant dans l'en-tête <head> du document HTML. S'il ne s'y trouve pas déjà.

<!-- Begin VideoJS Head -->
<script src="http://podcast.unil.ch/videojs/current/video.js"></script>
<link rel="stylesheet" href="http://podcast.unil.ch/videojs/current/video-js.css" media="screen" title="Video JS">
<script type="text/javascript" charset="utf-8">
  // Add VideoJS to all video tags on the page when the DOM is ready
  VideoJS.setupAllWhenReady();
</script>
<!-- End VideoJS Head-->

Ensuite, ajouter le code de la vidéo dans la page.

<!-- Begin VideoJS -->
<div class="video-js-box">
  <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
  <video class="video-js" width="640" height="360" controls preload poster="http://av.unil.ch/hva/3617/4-darsy_hd.png">
    <source src="http://av.unil.ch/hva/3617/4-darsy_hd.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://av.unil.ch/hva/3617/4-darsy_hd.webm" type='video/webm; codecs="vp8, vorbis"' />
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" 
      data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" 
        value="config={'playlist':['http://av.unil.ch/hva/3617/4-darsy_hd.png', {'url': 'http://av.unil.ch/hva/3617/4-darsy_hd.mp4','autoPlay':false,'autoBuffering':true}]}" />
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="http://av.unil.ch/hva/3617/4-darsy_hd.png" width="640" height="360" alt="Poster Image" 
        title="No video playback capabilities." />
    </object>
  </video>
</div>
<!-- Download links provided for devices that can't play video in the browser. -->
<p>
  <strong>Téléchargez cette vidéo:</strong>
  <a href="http://av.unil.ch/hva/3617/4-darsy_hd.mp4">MP4</a>,
  <a href="http://av.unil.ch/hva/3617/4-darsy_hd.webm">WebM</a>
</p>
<!-- End VideoJS -->