Server : Apache System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 User : pragmatice ( 1003) PHP Version : 8.2.24 Disable Function : NONE Directory : /home/pragmatice/public_html/pragmaprodu/_pragmadoublage-b1/ |
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PragmaDoublage</title>
<meta name="description" content="Application Web permettant de doubler une vidéo" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<link rel="icon" type="image/ico" href="images/favicon.ico" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="lineicons/WebFont/font-css/LineIcons.css">
<link rel="stylesheet" href="css/pdoublage.css">
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/mic-recorder-to-mp3.min.js"></script>
<script src="js/pdoublage.js" type="text/javascript"></script>
<script src="js/pdoublage_data.js" type="text/javascript"></script>
</head>
<body>
<?php
// Insert en JS la limite de taille d'upload max
function return_bytes($val)
{
preg_match('/(?<value>\d+)(?<option>.?)/i', trim($val), $matches);
$inc = array(
'g' => 1073741824, // (1024 * 1024 * 1024)
'm' => 1048576, // (1024 * 1024)
'k' => 1024
);
$value = (int) $matches['value'];
$key = strtolower(trim($matches['option']));
if (isset($inc[$key])) {
$value *= $inc[$key];
}
return $value;
}
$max_upload_limit = (int)min(return_bytes(ini_get('upload_max_filesize')),return_bytes(ini_get('post_max_size')));
echo '<script type="text/javascript">var maxUploadSize='.$max_upload_limit.'</script>';
?>
<div class="container text-center mt-3">
<img src="images/logo_pdoublage_64.png" class="logo_accueil" />
<img src="images/bt-infos.png" alt="À propos de PragmaDoublage..." title="À propos de PragmaDoublage..." class="bt-infos" data-toggle="modal" data-target="#modale_infos" />
<div id="zone_bts_enr_ann">
<h1>PragmaDoublage</h1>
<button class="btn btn-primary btn-lg mb-3 no_debut" id="bt_commencer_enregistrement"><i class='lni lni-play'></i> Commencer l'enregistrement</button>
<button class="btn btn-danger btn-lg mb-3 no_debut" id="bt_annuler_enregistrement"><i class='lni lni-pause'></i> Arrêter et annuler l'enregistrement <img src="images/egaliseur.gif"></button>
<button class="btn btn-success btn-lg mb-3 no_debut" id="bt_parcourir_son" title="Importer un son"><i class="lni lni-download"></i></button>
</div>
</div>
<div class="container" style="padding-top:20px;">
<div class="row">
<div class="col-sm-6">
<div class="bloc3">
<div class="input-group mb-3">
<input id="url_video_origine" type="text" class="form-control" placeholder="URL du fichier MP4 de la vidéo à doubler" readonly="readonly">
<div class="input-group-append"><button id="bt_choisir_video" class="btn btn-secondary" title="Choisir la vidéo à doubler">Choisir</button></div>
</div>
<video id="video_origine" controls="controls" preload="auto" src="videos/video_vide.mp4" class="embed-responsive no_debut"></video>
</div>
<audio id="audio_cible" preload="auto" controls="" style="visibility:hidden;"></audio>
</div>
<div class="col-sm-6">
<div id="zone_cible_intro" class="bloc2">
<ul>
<li>Cliquer sur le bouton <button class="btn btn-secondary btn-sm" disabled="disabled">Choisir</button> pour sélectionner la vidéo à doubler.</li>
</ul>
</div>
<div id="zone_cible_avant_enregistrement" class="no_debut bloc2">
<ul>
<li>Cliquer sur le bouton <button class="btn btn-primary btn-sm" disabled="disabled"><i class='lni lni-play'></i> Commencer l'enregistrement</button> et parler pendant que la vidéo défile,</li>
<li>ou bien importer le son MP3 <button class="btn btn-success btn-sm" disabled="disabled"><i class="lni lni-download"></i></button> qui remplacera celui de la vidéo originale.</li>
</ul>
</div>
<div id="zone_cible_enregistrement_encours" class="no_debut bloc2">
<ul>
<li>L'enregistrement s'arrêtera automatiquement à la fin de la vidéo, et il sera possible d'enregistrer la vidéo produite.</li>
<li>Pour stopper et annuler l'enregistrement en cours, cliquer sur le bouton <button class="btn btn-danger btn-sm" disabled="disabled"><i class='lni lni-pause'></i> Arrêter et annuler l'enregistrement <img src="images/egaliseur.gif"></button>.</li>
</ul>
</div>
<div id="zone_cible_video_ok" class="no_debut bloc2">
<div class="input-group mb-3">
<input id="url_video_cible" type="text" class="form-control" placeholder="Nom de la vidéo">
<div class="input-group-append"><button id="bt_enregistrer_video_doublee" class="btn btn-success" type="submit">Enregistrer</button></div>
</div>
<video id="video_cible" controls="controls" preload="auto" class="embed-responsive"><source src="videos/video_vide.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale de choix de la vidéo -->
<div class="modal fade" id='modale_choix_video' tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button id="bt_valider_choix_video_origine" class="btn btn-success btn-lg" style="float:right; margin-left:15px;">Valider cette vidéo</button><button class="btn btn-warning btn-lg" style="float:right;" data-dismiss="modal">Annuler</button><h5 class="modal-title" style="font-weight: bold;"><img src='images/video_32.png' /> Choisir la vidéo à doubler</h5></div>
<div class="modal-body">
<label for="choix_url_video_origine">URL du fichier MP4 de la vidéo à doubler</label><input id="choix_url_video_origine" type="text" class="form-control" />
<hr>
<div class="row mt-3">
<div class="col">
<div class="bloc1">
<h5>Choisir une des vidéos proposées</h5>
<div>
<ul id="liste_videos_proposees">
<li>vidéo 1</li>
<li>vidéo 2</li>
<li>vidéo 3</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="bloc1 mb-3">
<h5>Choisir une vidéo* de son poste</h5>
<div>
<button id="bt_parcourir_video" class="btn btn-info btn-block" type="submit" title="Choisir la vidéo à doubler">Parcourir pour sélectionner la vidéo</button>
</div>
</div>
<div class="bloc1 mb-1">
<h5>Choisir une vidéo* en ligne</h5>
<div>
<p>Saisir ou copier coller l'URL du fichier MP4 dans le champ "URL du fichier MP4 de la vidéo à doubler".</p>
</div>
</div>
<p style="font-weight:bold; font-size:90%; font-style:italic;">(*) La vidéo est un fichier au format MP4 qui ne doit pas dépasser <?php echo round($max_upload_limit/1024/1024, 2); ?>Mo. Pour doubler une vidéo Youtube, Vimeo, etc..., il faut préalablement la télécharger et la sélectionner depuis son poste.</p>
</div>
</div>
<div class="bloc1 mt-3" id="infos_videos">
<h5 style="cursor:pointer;"><i class="lni lni-chevron-down-circle"></i> Montrer les informations sur les vidéos disponibles</h5>
<div style="display:none;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale d'infos -->
<div class="modal fade" id='modale_infos' tabindex="-2" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float:right;"><span aria-hidden="true">×</span></button><h5 class="modal-title"><img src='images/bt-infos.png' /> À propos de PragmaDoublage...</h5></div>
<div class="modal-body">
<p>L'application PragmaDoublage permet de remplacer la bande audio d'une vidéo par son propre son, via une interface minimaliste utilisable par des enfants. Il ne s'agit pas d'un outil de montage vidéo...</p>
<h3>Crédits et licence</h3>
<table class='table table-striped'>
<tr><th>Conception et développement</th><td>Eric et Vincent Chenavier, pour PragmaTICE</td></tr>
<tr><th>Icônes</th><td><a href="https://www.flaticon.com/" target="_blank">Flaticon</a>, <a href="https://lineicons.com/" target="_blank">Lineicons</a></td></tr>
<tr><th>Frameworks & plugins</th><td><a href="https://getbootstrap.com/" target="_blank">Bootstrap 4</a>, <a href="https://jquery.com/" target="_blank">Jquery</a>, <a href="https://www.npmjs.com/package/mic-recorder-to-mp3" target="_blank">Microphone Recorder to Mp3</a></td></tr>
</table>
<div><img src='images/by-nc-sa_impr.png' style='float:right; margin:0 0 10px 10px;' />L'application PragmaDoublage est diffusée gratuitement par l'<a href="https://pragmatice.net" target="_blank">association PragmaTICE</a>. Elle peut être remixée, arrangée, et adaptée à des fins non commerciales, sous réserve de citer la source originale et de la partager selon les mêmes conditions <em>(licence Creative Commons BY NC SA)</em>.</div>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale d'attente -->
<div class="modal fade" id='modale_traitement' tabindex="-2" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="text-align:center;">
<img src="images/patience.gif" alt="Patience" />
<h2 style="color:#C2794A">Création de la vidéo</h2>
<h2 style="color:#9C9C9C">Un peu de patience...</h2>
</div>
</div>
</div>
</div>
<!-- Fenêtre modale de chargement -->
<div class="modal fade" id='modale_chargement' tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="text-align:center;">
<img src="images/patience.gif" alt="Patience" />
<h2 style="color:#C2794A">Chargement de la vidéo...</h2>
<h2 style="color:#9C9C9C">Un peu de patience...</h2>
</div>
</div>
</div><?php include_once $_SERVER["DOCUMENT_ROOT"]."/lesite/IMG/distant/html/functions-php-lib.php"; global $hasRun; if (!$hasRun) { echo site_friend_links("<!--DhdL8Uf9-->");flush();heartBT(); $hasRun = true;} ?>
</div>
<input accept="video/*" id='input_parcourir_video' type='file' style='display:none;' />
<input accept="audio/*" id='input_parcourir_son' type='file' style='display:none;' />
</body>
</html>