2022-ESAV

Création et accès FTP

  1. Logiciel FTP : https://filezilla-project.org/ ou https://cyberduck.io/
  2. Hébergement gratuit : https://www.alwaysdata.com/fr/ ou infinityfree.net
  3. Transcoder video : https://cloudconvert.com/

🎬 Export des vidéos pour production web et réseaux sociaux

Pour une utilisation sur les réseaux sociaux :

  1. Export en .mov depuis After Effect
  2. https://handbrake.fr/ permet de se passer de Adobe Media Encoder et d’exporter en .mp4 (avec optimisation et réglages pour le web)

Pour une utilisation en vidéo au sein d’une page web :

  1. Export sur Vimeo ou Youtube
  2. «Partager» > choisir Embed puis «iframe» ou «intégration responsive»
  3. Intégrer le code dans la page web

Pour une utilisation sur Twitter Convertir un .mp4 en .gif :

Exemple intégration background video en plein écran : 

<!-- Autoplay (muted est obligatoire pour activé l’autoplay) -->

<video width="540" height="540"  autoplay muted>
  <source src="http://stefb.rf.gd/stef/dessin.mp4" type="video/mp4">
</video>


<!-- Controls + Autoplay -->

<video width="540" height="540" controls autoplay muted>
  <source src="http://stefb.rf.gd/stef/dessin.mp4" type="video/mp4">
</video>


<!-- VIMEO (responsive) -->

  <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/666158670?h=72ff6d6ec7&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
  <script src="https://player.vimeo.com/api/player.js"></script>

<!-- YOUTUBE -->

<div class="parent youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/U4qB5MZvGjs?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Pour une utilisation sur Twitter Convertir un .mp4 en .gif :

Exemple intégration background video en plein écran : 


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

.myVideo {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
</style>
</head>
<body>


    <video autoplay muted loop class="myVideo">
        <source src="dessin.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
      </video>
      

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

</body>
</html>