web-dev-qa-db-fra.com

Comment prendre un instantané du lecteur vidéo basé sur HTML5-JavaScript?

En fait, j'ai une page HTML5 avec une fonction JavaScript qui me permet de lire un fichier vidéo wmv . Je dois prendre un instantané lorsque la vidéo est en cours de lecture (avec pause ou sans) et enregistrée dans un format d'image quelconque, JPG ou BMP peu importe ... toute aide vous sera utile ... merci.

<!DOCTYPE HTML>

    <html>
        <head>
            <title>HTML5 video</title>        
    <script type="text/javascript">
        function checkPlay() {
            var myVideo = document.getElementById("myVid");
            var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>';
            try {
                var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv");
                if ((canPlay == "no") || (canPlay == "")) {
                    myVideo.innerHTML = ytStr;
                }
                new MediaElement(v, { success: function (media) { media.play(); } });
            } catch (err) {
                myVideo.innerHTML = ytStr;
            }
        }
    </script>
        </head>
        <body onload="checkPlay()">
          <div id="myVid"/>

      </body>
    </html>
javascripthtml5webhtml5-videosnapshot
19
Ahmed MEZRI

Copier une image vidéo dans un fichier image implique de charger correctement la vidéo, de copier l'image sur une toile et de l'exporter dans un fichier. C'est tout à fait possible, mais il y a quelques endroits où vous pouvez avoir des problèmes, alors allons-y un à un.

1) Chargement de la vidéo

Pour capturer les pixels, vous devez charger la vidéo dans une balise <video> et non dans une variable iframe ou object ou embed. Et le fichier doit provenir d'un serveur Web, identique à celui de la page Web elle-même (sauf si vous utilisez les en-têtes cross-origin , ce qui est compliqué et peut ne pas fonctionner dans votre navigateur. Ceci est limité par le navigateur pour des raisons de sécurité: votre code charge la vidéo à partir du système de fichiers local, ce qui ne fonctionnera pas.

Vous devez également charger le bon format de fichier. IE9 + peut jouer au WMV, mais il est peu probable qu'un autre navigateur le fasse. Si vous le pouvez, chargez plusieurs sources , en utilisant webm, mp4 et idéalement ogg/theora.

var container = document.getElementById("myVid"),
    video = document.createElement('video'),
    canCapture = true;
if (!video.canPlayType('video/wmv')) {
    /* If you don't have multiple sources, you can load up a Flash fallback here
       (like jPlayer), but you won't be able to capture frames */
    canCapture = false;
    return;
}
video.src = 'myvideo.wmv';
container.appendChild(video);
video.play(); //or put this in a button click handler if you want your own controls

2) Créez ensuite le canevas et un contexte de dessin. En réalité, vous n'avez même pas besoin de l'attacher au DOM, mais vous devez définir la taille à laquelle vous souhaitez enregistrer l'image résultante. Pour cet exemple, supposons que vous ayez une dimension fixe en tête, mais si vous le souhaitez, vous pouvez la définir sur un multiple de la taille de la vidéo. Assurez-vous simplement que vous exécutez cela dans un événement "Loadmetadata" sur la vidéo, car les dimensions de la vidéo ne seront pas disponibles immédiatement.

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.

3) Capturez l'image sur la toile et enregistrez-la dans un fichier. Placez ce code dans un événement onclick sur un bouton ou dans une minuterie - comme vous voulez décider quand l'image sera capturée. Utilisez la méthode drawImage. ([Cet article] fournit une bonne explication, y compris les problèmes de sécurité. C'est la même chose pour la vidéo que pour une image.)

//draw image to canvas. scale to target dimensions
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'

4) Exporter le fichier image

Le fichier jpg est maintenant enregistré en tant que Data URI , qui est une longue chaîne javascript représentant une version codée du fichier binaire complet. C'est à vous de faire quoi. Vous pouvez le placer directement dans un élément img en le définissant simplement avec src: myImage.src = dataUri;.

Si vous souhaitez l'enregistrer dans un fichier, vous devez le télécharger sur un serveur. Voici un bon tutoriel sur la façon de le faire.

Comme d'habitude, tout ce qui précède est réservé aux navigateurs qui le prennent en charge. Si vous vous en tenez à la vidéo wmv, vous êtes quasiment limité à Internet Explorer 9+. 6-8 ne supportent ni la balise video ni le canevas. Si vous pouvez ajouter d'autres formats vidéo, vous pouvez utiliser Firefox (3.5+) et Chrome.

50
brianchirls

Vous pouvez prendre une copie de la vidéo actuelle et la stocker dans un élément de toile à l'aide de la fonction drawImage().

J'ai un exemple complet dont vous pouvez voir le code sur Video/canvas screenshot , ce qui devrait vous mettre sur la bonne voie.

10
Ian Devlin
<html>
<body>

  <video controls>
    <source src="C:/Users/ganesha/Desktop/Aararum.mp4" type="video/mp4"></source>
  </video>
  <canvas id="canvas" width="640" height="480"></canvas>
  <button id="snap" onclick="snap()">Snap Photo</button>

  <!-- start the script ... within that declare variables as follows... -->
  <script>
  var video=document.querySelector('video');
  var canvas=document.querySelector('canvas');
  var context=canvas.getContext('2d');
  var w,h,ratio;

  //add loadedmetadata which will helps to identify video attributes

  video.addEventListener('loadedmetadata', function() {
    ratio = video.videoWidth/video.videoHeight;
    w = video.videoWidth-100;
    h = parseInt(w/ratio,10);
    canvas.width = w;
    canvas.height = h;
  },false);

  function snap() {
    context.fillRect(0,0,w,h);
    context.drawImage(video,0,0,w,h);
  }
  </script>

</body>
</html>
7
Sijin Parambath
Sample code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

</head>
<body>
<h2>Upload,Save and Download video </h2>
<form method="POST" action="" enctype="multipart/form-data">
<input type="file" name="video" id="upload"/>
</...>

<script>
var input = document.getElementById('upload');

input.addEventListener('change', function(event){
var file = this.files[0];
var url = URL.createObjectURL(file);

var video = document.createElement('video');
video.src = url;

var snapshot = function(){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    var img_data = canvas.toDataURL('image/jpg');
    var filename = file.name;
    var filename = filename.split('.').slice(0, -1).join('.');



    document.getElementById("thumb").value = filename;
    $.post("thumb-saver.php", { 
        base:img_data, 
        output:"thumbnails/"+ filename +  '.jpg'
    }, function( data ) {
            //alert(data);
    });

    video.removeEventListener('canplay', snapshot);
 };

video.addEventListener('canplay', snapshot);
});
</script>
0
Chirag Patel