video-html5: Ist es möglich, Thumbnails von Videos auf eine bestimmte Zeit?

Ich dies verwenden, um einen video-player auf browser

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Bevor Klick auf spielen, es zeigt ein Bild aus dem Anfang von dem video, aber in den meisten meiner Videos, zuerst mehrere Sekunden schwarzer Bildschirm. Ist es möglich, um Ihr Bild zu einem bestimmten Zeitpunkt des Videos, wie "0:00:15", ohne die Erzeugung von Miniaturansichten für das video?

InformationsquelleAutor Mee | 2014-03-24
  1. 6

    Vielleicht hilft: (ich habe es nicht getestet. Auch Sie könnten in der Lage sein, die "poster" - Attribut des video auf die src des Bildobjekts. Probieren Sie es einfach. =) )

    <video width="320" height="240" controls id="video">
    <source src="video.mp4" type="video/mp4">
</video>

    $(document).ready(function() {


            var time = 15;
            var scale = 1;

            var video_obj = null;

            document.getElementById('video').addEventListener('loadedmetadata', function() {
                 this.currentTime = time;
                 video_obj = this;

            }, false);

            document.getElementById('video').addEventListener('loadeddata', function() {
                 var video = document.getElementById('video');

                 var canvas = document.createElement("canvas");
                 canvas.width = video.videoWidth * scale;
                 canvas.height = video.videoHeight * scale;
                 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                 var img = document.createElement("img");
                img.src = canvas.toDataURL();
                $('#thumbnail').append(img);

                video_obj.currentTime = 0;

            }, false);

        });

    Quelle 1
    Quelle 2

    • Es wird starten Sie die Wiedergabe an der eingestellten Zeit in "Zeit" variable, aber ich will es zum spielen beginnen, nur Bild von 0:00:15
    • Versuchen Sie, den ganzen code in das Ereignis-Funktion. Also nach diesem.currentTime;... Nach dem Anhängen fertig ist, setzen Sie die Zeit auf 0 zurück. Lassen Sie mich wissen, wenn das funktioniert. =)
    • Ich füge diese am Ende von Skript: "Dokument.getElementById('video').addEventListener('loadedmetadata', function() { es.currentTime = 0; }, false);" springen Sie zurück zu der beginnen, aber so tun, die Miniaturansicht, die erwartet wird, um eingenommen zu werden bei 0:00:15
    • Ich bearbeitet meine Antwort. Hoffentlich werde arbeiten wie diese. =)
    • jsfiddle.net/Etr4F/843 Es funktioniert nicht =(
    • Haben die videos gehostet werden, unter der gleichen domain, ich weiß nicht ganz warum. Dieses Beispiel funktioniert in chrome und safari, aber nicht in firefox: Klick Mich. Dies ist, weil firefox nicht unterstützt mp4. zumindest nicht unter mac os, windows ich denke, es ist. Man könnte jetzt verstecken die video-und-display, und spielen Sie es, wenn der Benutzer auf das thubnail Bild. viel Glück.
    • Vielen, vielen Dank!

    InformationsquelleAutor Dafen
  2. 7

    Mithilfe der poster Attribut ist der einfachste Weg zu gehen. Immer ein Vorschau Bild des Videos aus einer anderen Zeit als der Beginn ist genau das, was es ist entworfen, für.

    http://www.w3schools.com/tags/att_video_poster.asp

    Versuchen, um eine Funktion dynamisch schnappen Sie sich ein weiteres segment des Videos zu verwenden, da die poster wird zweifellos erstellen Sie mehr Latenz und overhead, für den Kunden negativ auf die UX.

    • Bitte nicht den link nichts von W3Schools, Sie sind nur kopieren von Inhalten von Mozilla Developer Network zum Beispiel für Gewinn.
    InformationsquelleAutor jpostdesign
  3. 5

    Ich möchte nur hinzufügen, eine weitere Sache in diesem ich denke, Sie vergaß hinzuzufügen, " preload="metadata" - Attribut im video-tag wie die unten

    <video preload="metadata" width="320" height="240" controls>
      <source src="video.mp4#t=15" type="video/mp4">
    </video>

    und noch eins möchte ich hinzufügen, dass dies nicht video startet nach 15 Sekunden, das dauert nur ein screenshot aus dem video und machen es wie ein Erster Blick in das video

    InformationsquelleAutor Developer
  4. 0

    Fügen Sie #t=15, um Ihre video-Quelle, wie unten

    <video width="320" height="240" controls>
  <source src="video.mp4#t=15" type="video/mp4">
</video>

    Dieser startet video nach 15 Sekunden.

    • Das macht die Frage nicht beantworten.
    • Das Video startet in 15 Sek und die thumbnails funktionieren nicht auf dem Handy.
    InformationsquelleAutor Chetan Jain
Schreibe einen Kommentar