HTML Video Automator - 11-esra-1-tourangeau-edite

11-esra-1-tourangeau-edite

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

Instructions pour ajouter la vidéo sur une page web

Dans wordpress avec le plug-in VideoJS: Copier simplement le code ci-dessous dans la page ou l'article.
[video mp4="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.mp4" webm="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.webm" poster="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.png" preload="true" width="640" height="360"]

Dans une page Jahia UNIL avec l'extension VideoJS

Premièrement, activer l'extension VideoJS pour la page. Si ce n'est pas déjà fait.

Ensuite, dans FCK Editor, en mode source, ajouter le code de la vidéo.

<!-- 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="565" height="317" controls preload poster="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.png">
    <source src="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.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="565" height="317" 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/347/11-esra-1-tourangeau-edite.png', {'url': 'http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.mp4','autoPlay':false,'autoBuffering':true}]}" />
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.png" width="565" height="317" 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/347/11-esra-1-tourangeau-edite.mp4">MP4</a>,
  <a href="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.webm">WebM</a>
</p>
<!-- End VideoJS -->

Dans Moodle UNIL: Copier simplement le lien ci-dessous dans le texte d'un cours.
http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.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/347/11-esra-1-tourangeau-edite.png">
    <source src="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.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/347/11-esra-1-tourangeau-edite.png', {'url': 'http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.mp4','autoPlay':false,'autoBuffering':true}]}" />
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.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/347/11-esra-1-tourangeau-edite.mp4">MP4</a>,
  <a href="http://av.unil.ch/hva/347/11-esra-1-tourangeau-edite.webm">WebM</a>
</p>
<!-- End VideoJS -->