File: index.html

Recommend this page to a friend!
  Classes of Dantigny francois  >  JavaScript MP4 Parser  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: Example script
Class: JavaScript MP4 Parser
Parse and extract information from MP4 video files
Author: By
Last change: Update index.html
Update index.html
Date: 7 months ago
Size: 6,286 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<meta charset="UTF-8">
<html>

<head>
    <title>Test</title>
    <style type="text/css">
        #inp{
            display : inline; 
        } 
        #opt{
            display : none;     
        }
        #isIE{
            display : none;
        }
    </style> 
    <script type="text/javascript">
            var ind=0;
            let indarrived = 0;
            let res=[];
            let listeficname=[];
            // 4 let pour progress
            let maxBar = 200;
            let currentBar = 0;
            let progressBar;
            let intervalId;
            //let timedeb, timeend;                                      // pour évaluation de l'efficacité

            function change_ind(t) {
                document.querySelector('#out').innerHTML = "";
                document.querySelector('#out').innerHTML = res[t];
            }  

            function init(){

                /*     ------------------------------
                       Interface ProgressBar
                       ------------------------------  */                                

                let initialisation = function() {
                  progressBar = document.getElementById( "progressBar" );
                  progressBar.value = currentBar;
                  progressBar.max = maxBar;
                }

                let displayBar = function() {
                  //currentBar++;
                  progressBar.value = currentBar;
                }
                intervalId = setInterval( displayBar , 100 ); // dysplayBar est appelée toutes les 100 millisecondes

                initialisation();


                /*     --------------------------------------------------
                       Détection d'Internet Explorer : Edge fonctionne !!
                       --------------------------------------------------  */    
                let ua = window.navigator.userAgent;
                let msie = ua.indexOf('MSIE ');
                let trident = ua.indexOf('Trident/');
                if ((msie > 0) || (trident > 0)){  
                    document.getElementById('inp').style.visibility = 'hidden';
                    document.getElementById('out').style.visibility = 'hidden';
                    document.getElementById('isIE').style.display = 'inline';
                }

                /*     --------------------------------------------
                            corps principal : le(s) Worker(s)        
                       -------------------------------------------       */
                document.querySelector('#inp').onchange = function(e) {

                    let fichiersInput = document.querySelector("#inp");
                    let fichiers = fichiersInput.files;
                    let nbFichiers = fichiers.length;
                    let tmp = {};

                    //timedeb = Date.now();                                      // pour évaluation de l'efficacité

                    for (let k=0; k<nbFichiers; k++){
                        res.push('');
                        new_element = new Option("", k, false, true);
                        document.getElementById("opt").options[document.getElementById("opt").options.length] = new_element;
                    }
                    // Envoit les fichiers de manière synchrone les uns derrières les autres
                    while (ind < nbFichiers){

                        listeficname.push(fichiers[ind].name);
                        document.querySelector("#opt").options[ind].text=fichiers[ind].name;
                        let MP4worker = new Worker('workerMP4.js');

                        //      Retour du Worker
                        MP4worker.addEventListener('message', function(e) {
                                if (e.data.data != 'nop'){
                                    // pour la progressBar : 2 lignes ci-dessous
                                    indarrived++;
                                    currentBar = (indarrived / nbFichiers) * maxBar;
                                    res[e.data.num]=e.data.data;

                                } else {
                                    // pour la progressBar : 2 lignes ci-dessous
                                    indarrived++;
                                    currentBar = (indarrived / nbFichiers) * maxBar;
                                    tmp.data=listeficname[e.data.num]+" isn't a MP4 file !";
                                    res[e.data.num]=tmp.data;
                                }    
                                MP4worker.terminate();
                                if (indarrived == nbFichiers){
                                    displayBar();
                                    clearInterval(intervalId);
                                    document.getElementById("inp").style.display="none";

                                    document.querySelector("#opt").selectedIndex=0;
                                    document.querySelector("#opt").style.display="block";
                                    document.querySelector('#out').innerHTML = "";
                                    document.querySelector('#out').innerHTML = res[0];

                                    //timeend = Date.now();                                      // pour évaluation de l'efficacité
                                    //let duration = timeend - timedeb;
                                    //alert('duration = '+duration);

                                }
                        }, false);

                        MP4worker.postMessage([fichiers[ind],ind]);    // il en reste ? Envoit le suivant !!
                        ind++;
                    }

                }
            }    
    </script>
</head>

  <body onload="init()">
      <center>
          <p><progress id="progressBar"></progress></p>
          <p id="isIE">Microsoft Internet not allowed ... Sorry !</p>
          <input id="inp" type="file" multiple>
          <select size="1" id="opt" onchange="change_ind(document.getElementById('opt').options.selectedIndex)"></select>
          <br>
          <textarea id="out" rows="40" cols="120">And then ? Choose some MP4 files (.MP4, .M4V, ... )</textarea>
      </center>
  </body>

</html>