webentwicklung-frage-antwort-db.com.de

Wie mache ich einen Schnappschuss von HTML5-JavaScript-basierten Video-Playern?

Eigentlich habe ich eine HTML5-Seite mit JavaScript-Funktion, mit der ich eine wmv-Videodatei abspielen kann. Ich muss einen Schnappschuss machen, wenn das Video abgespielt wird (mit Pause oder ohne) und in einem beliebigen Bildformat JPG oder BMP was auch immer . Jede Hilfe wird es schätzen . Danke.

<!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>
19
Ahmed MEZRI

Um ein Videoframe in eine Bilddatei zu kopieren, müssen Sie das Video ordnungsgemäß laden, das Bild auf eine Leinwand kopieren und in eine Datei exportieren. Dies ist durchaus möglich, aber es gibt ein paar Stellen, an denen Sie in Schwierigkeiten geraten können. Lassen Sie uns also Schritt für Schritt vorgehen.

1) Laden Sie das Video

Um die Pixel zu erfassen, müssen Sie das Video in ein <video>-Tag laden, nicht in eine iframe oder object oder embed. Die Datei muss von einem Webserver stammen, auf dem sich die Webseite selbst befindet (es sei denn, Sie verwenden cross-Origin-Header , was kompliziert ist und möglicherweise in Ihrem Browser nicht funktioniert. Dies ist eingeschränkt durch Browser aus Sicherheitsgründen Der Code lädt das Video aus dem lokalen Dateisystem, was nicht funktioniert.

Sie müssen auch das richtige Dateiformat laden. IE9 + kann WMV abspielen, es ist jedoch unwahrscheinlich, dass dies mit einem anderen Browser möglich ist. Wenn möglich, laden Sie mehrere Quellen mit webm, mp4 und idealerweise 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) Als Nächstes erstellen Sie die Leinwand und einen Zeichnungskontext. Sie müssen es zwar nicht einmal an das DOM anhängen, aber Sie müssen es auf die Größe einstellen, bei der Sie das resultierende Bild speichern möchten. In diesem Beispiel wird davon ausgegangen, dass Sie eine feste Dimension haben. Wenn Sie möchten, können Sie diese auf ein Vielfaches der Videogröße einstellen. Stellen Sie einfach sicher, dass Sie das Ereignis in einem Ereignis 'loadedmetadata' des Videos ausführen, da die Videodimensionen nicht sofort verfügbar sind.

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) Nehmen Sie das Bild auf der Leinwand auf und speichern Sie es in einer Datei. Setzen Sie diesen Code in ein onclick -Ereignis auf eine Schaltfläche oder in einen Timer - Sie möchten jedoch entscheiden, wann das Bild erfasst wird. Verwenden Sie die drawImage-Methode. ([Dieser Artikel] bietet eine gute Erklärung, einschließlich der Sicherheitsbedenken. Für Videos ist dies dasselbe wie für ein Bild.)

//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) Exportieren der Bilddatei

Die jpg-Datei wird jetzt als Data URI gespeichert. Hierbei handelt es sich um eine lange JavaScript-Zeichenfolge, die eine kodierte Version der vollständigen Binärdatei darstellt. Es liegt an Ihnen, was Sie damit anfangen sollen. Sie können es direkt in ein img-Element einfügen, indem Sie es einfach auf src: myImage.src = dataUri; setzen.

Wenn Sie es in einer Datei speichern möchten, müssen Sie es auf einen Server hochladen. Hier ist ein gutes Tutorial , wie das geht.

Wie üblich sind alle oben genannten Funktionen auf Browser beschränkt, die dies unterstützen. Wenn Sie sich an wmv video halten, sind Sie auf Internet Explorer 9+ beschränkt. 6-8 unterstützen weder das Video-Tag noch die Leinwand. Wenn Sie weitere Videoformate hinzufügen können, können Sie Firefox (3.5+) und Chrome verwenden.

50
brianchirls

Sie können eine Kopie des aktuellen Videos mit der Funktion drawImage() in einem Canvas-Element speichern.

Ich habe ein vollständiges Beispiel, dessen Code Sie unter Video/Canvas screenshot anzeigen können, das Sie auf die richtige Spur bringen soll.

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