Allgemeine Video-Websites können einen Screenshot des vom Benutzer hochgeladenen Videos erstellen, nachdem der Benutzer es hochgeladen hat, und ihn dann als Anzeigebild des Videos verwenden. Eine solche Funktion kann auch im Projekt eingeführt werden, um Benutzern ein gutes Erlebnis zu bieten, anstatt Benutzer aufzufordern, ein zusätzliches Anzeigebild hochzuladen.
Rendering:
Es sieht immer noch sehr gut aus. Der Kerncode ist sehr einfach:
1 2 3 4 5 6 |
|
Der Kerncode besteht nur aus diesen Zeilen. Bei Verwendung von ctx.drawImage kann der erste Parameter das Videoobjekt sein, und dann wird die DataUrl über die Leinwand abgerufen und dem zugewiesen IMG-Tag. Das sind die Kernpunkte.
Sehen Sie sich das gesamte Beispiel unten an:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
|
Sowohl HTML als auch CSS sind recht einfach.
Sehen Sie sich hauptsächlich den Js-Code an:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
|
Es sollte beachtet werden, dass nach Erhalt der Attribute und einiger Vorgänge im Video. canplay event , achten Sie darauf,EventLinstener zu entfernen, andernfalls wird diese Methode ständig aufgerufen, wenn die Wiedergabe angehalten wird. Wenn auf das Ereignis geklickt wird, wird das Video angehalten. Anschließend wird an der Position des Videos ein Bild generiert, mithilfe der JQuery-Animation an die Position des Miniaturbilds verschoben. Anschließend wird das Dokument entfernt und das Miniaturbild angezeigt , was zu einem Animationseffekt führt.
Sie können Vorgänge wie das Hochladen der Bilder selbst hinzufügen. Es gibt noch einen weiteren sehr wichtigen Punkt: Auf Canvas.toDataURL("image/png"); muss möglicherweise auf dem Server zugegriffen werden. Ich habe die geschriebene Seite nach Belieben gezogen, andernfalls wird dies der Fall sein Sicherheitsfrage melden.
Das Obige ist der Inhalt eines HTML5-CSS3-Imitierungsbeispiels für die Youku-Video-Screenshot-Funktion. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!