Ich möchte eine Website mit einem HTML5-Videohintergrund erstellen.
Ich habe einen kurzen 1080p-mp4-Clip, den ich verwenden möchte (20s). Ich beabsichtige, das Video im Letterbox-Format (5: 2 ish) im Vollbildmodus hinter dem Seiteninhalt auszuführen (ein Beispiel finden Sie auf der Paypal-Website: https://www.paypal.com/uk/webapps/mpp/home ).
Was wären die besten Exporteinstellungen in Premiere CC für diesen Zweck?
Antworten:
Sie sollten mehrere Versionen exportieren, um sie für verschiedene Browser anzupassen. Mit HTML5 können Sie verschiedene Versionen des Videos anbieten und der Browser wählt automatisch die erste Version aus, die unterstützt wird. Schauen Sie sich zum Beispiel den Quellcode der Paypal-Website an, auf die Sie verwiesen haben:
<video autoplay="autoplay" muted="muted" poster="none">
<source src="https://www.paypalobjects.com/webstatic/mktg/wright/videos/send-money.mp4" type="video/mp4">
<source src="https://www.paypalobjects.com/webstatic/mktg/wright/videos/send-money.webm" type="video/webm">
</video>
Wie Sie sehen können, bieten sie sowohl eine mp4- (H264-Codec) als auch eine webm-Version des Videos an. Das wären auch gute Optionen für Sie.
Außerdem sollten Sie versuchen, die Videos so klein wie möglich zu halten, damit Website-Besucher mit langsamem Internet sie auch ansehen können. Zu diesem Zweck sollten Sie das Video mit 720p anstelle von 1080p exportieren (niemand wird den Unterschied bemerken, besonders wenn sich das Video im Hintergrund befindet) und eine Bitrate unter 1 Mbit / s anstreben. Beispielsweise verwendet das Paypal-Video eine Bitrate von etwa 700 Kbit / s. Wenn Sie das Audio nicht benötigen, können Sie ohne Audio oder mit einer niedrigen Audio-Bitrate exportieren, dh 96 Kbit / s.
Sie können das Video auch von der Website auf Ihrem Computer speichern und den Codec, die Bitrate und andere Parameter überprüfen, z. B. mit MediaInfo oder ähnlichen Programmen.
Da diese Frage immer noch sehr häufig gestellt wird, wollte ich einige aktuelle Informationen hinzufügen. Mittlerweile unterstützen alle modernen Browser MP4 (MPEG-4 / H.264) und das schon so lange, dass Sie für die meisten Projekte nur MP4 anbieten können. Überprüfen Sie den obigen Link für eine Browser-Kompatibilitätstabelle, um sicherzustellen, dass alle Browser, die Ihr Projekt unterstützen muss, MP4 wiedergeben können. Denken Sie daran, AAC für den Audiotrack zu verwenden, nicht MP3, da es von weniger Browsern unterstützt wird.
Dennoch können und sollten Sie ein WebM-Video als erstes anbieten <source>, da es eine bessere Komprimierung bietet, sodass sich Benutzer mit einem eingeschränkten Datenplan bei Ihnen bedanken. Ich wollte nur hinzufügen, dass MP4 alles ist, was Sie jetzt brauchen, wenn Sie in Bezug auf Speicherplatz, Renderzeit oder eine andere Variable, die es schwierig macht, WebM anzubieten, beschränkt sind.
Da meine ursprüngliche Antwort auch etwas mit Audio zu tun hatte, gibt es noch einen weiteren Aspekt, der nicht unbedingt im Zusammenhang steht: Die Browser-Anbieter gehen gegen Autoplay-Videos vor (Videos, die nach dem Laden der Seite automatisch ohne Benutzerinteraktion abgespielt werden), insbesondere, wenn das Video Audio enthält . Safari lässt beispielsweise die automatische Wiedergabe von Videos nur zu, wenn das Video keine Audiospur enthält oder das Video stummgeschaltet ist (mithilfe des entsprechenden Attributs für das <video>Element). Wenn Sie die Audiospur nicht benötigen, exportieren Sie Ihr Video ohne eine (das automatische Abspielen von Videos mit Audio ist ohnehin unangenehm für UX). Und wenn Sie das Audio benötigen, denken Sie daran, dass einige Browser die automatische Wiedergabe blockieren. Stellen Sie daher sicher, dass Sie ein Platzhalterbild mit dem Poster- Attribut einfügen .
Wie MoritzLost sagt , verkleinern. Vielleicht setzen Sie irgendwo einen Link zur Vollversion für Interessierte. Ein niedrigeres Niveau verringert auch die Ressourcennutzung auf der Clientseite. Abhängig vom Inhalt und der Sichtbarkeit des Texts auf Ihrer Seite kann sogar eine Verkleinerung auf 640p, 576p oder sogar 480p sinnvoll sein.
Da JEDER, der Ihre Website besucht, dieses Video lädt, lohnt es sich, zusätzliche Anstrengungen zu unternehmen, um sicherzustellen, dass Sie so viel Qualität pro Bitrate wie möglich erzielen. Esp. Wenn Sie nicht vorhaben, das Video sehr oft zu ändern. Für H.264, das bedeutet eine lossless Quelle Einspeisen x264 mit voreingestellten = veryslow, crf = 26(oder 2-Pass - Bitrate Ziel). x264 ist der beste h.264 Encoder. (Unabhängige Tests verschiedener h.264-Encoder haben dies bestätigt.) Es verfügt über eine Reihe wirklich cleverer Algorithmen, mit denen sich bei genügend CPU-Zeit eine wirklich kleine Datei erstellen lässt, die gut aussieht. (Und kann bei Bedarf schnell ausgeführt werden, aber die Codierungszeit ist für diesen Anwendungsfall nicht wirklich relevant: einmal codieren, VIELE Male herunterladen und abspielen.)
Spielen Sie NICHT standardmäßig Audio ab, wenn Ihre Seite geladen wird. Hoffentlich wissen das schon gesunde Leute, aber MoritzLost hat über Audio gesprochen. Seiten, die Audio automatisch abspielen, sind weithin verabscheut und werden als böse angesehen.
Wenn Sie einen Link zu einer Vollversion des Videos haben, können Sie auch Audio hinzufügen. 96kb / s reichen aus, damit AAC-Stereo hervorragend klingt. 64kb / s klingen immer noch gut. (solange du keinen schlechten Encoder verwendest, zB irgendetwas in ffmpeg außer libfdk-aac.
Ich habe mir das Video von paypal angesehen. (Seiteninfo anzeigen -> Medien -> Video suchen -> Speichern unter).
mediainfo Ausgabe:
General
Complete name : /f/p/home-signup.mp4
Format : MPEG-4
Format profile : Base Media / Version 2
Codec ID : mp42
File size : 10.9 MiB
Duration : 1mn 11s
Overall bit rate : 1 276 Kbps
Movie name : Homepage SignUp - Alan Version
Album/Performer : Sorgel, Chase(AWF)
Composer : Sorgel, Chase(AWF)
Description : This video is about Homepage SignUp - Alan Version
Encoded date : UTC 2014-03-13 16:26:17
Tagged date : UTC 2014-03-13 16:26:29
Writing application : HandBrake 0.9.9 2013051800
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : Main@L4.0
Format settings, CABAC : Yes
Format settings, ReFrames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 1mn 11s
Bit rate : 1 273 Kbps
Width : 1 280 pixels
Height : 720 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 30.000 fps
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.046
Stream size : 10.9 MiB (100%)
Writing library : x264 core 130 r2273 b3065e6
Encoding settings : cabac=1 / ref=1 / deblock=1:0:0 / analyse=0x1:0x111 / me=hex / subme=2 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=12 / lookahead_threads=4 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=1 / keyint=300 / keyint_min=30 / scenecut=40 / intra_refresh=0 / rc_lookahead=10 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=20000 / vbv_bufsize=25000 / crf_max=0.0 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Encoded date : UTC 2014-03-13 16:26:17
Tagged date : UTC 2014-03-13 16:26:29
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709
Also haben sie x264 über die Handbremse verwendet, aber sie sind schlecht darin, einen angemessenen Kompromiss zwischen CPU-Zeit und Geschwindigkeitsverzerrung zu finden. ref=1,me=hex,subme=2sieht aus wie das veryfastPreset. ( Um x264 --fullhelpzu sehen, wie sich die einzelnen Voreinstellungen unterscheiden medium, werden die Standardeinstellungen für alle verwendet.) Zum Glück ist die Standardqualitätseinstellung crf 23für den jeweiligen Anwendungsfall ungefähr richtig. Sie hätten sparen können, wenn sie bessere Einstellungen, wie veryslow, oder sogar einfach mediumoder, verwendet hätten, um weitere 20% Bitrate von den 1273kb / s zu schätzen, die sie von crf23 erhalten hatten slow.
Sie beschlossen auch, sich auf das Hauptprofil von h.264 zu beschränken, um mit einigen älteren Android- / iOS-Geräten kompatibel zu sein, was meiner Meinung nach leider immer noch eine gute Idee ist. ( --profile Main). Ein Video, das mehr Bitrate verwendet als für die Qualität benötigt wird, ist eine Art Pet Peeve. Es ärgert mich wirklich, dass die Leute weiterhin Baseline-Profil-Codierungen vertreiben. Das Hauptprofil kann nicht 8x8dct verwenden, was ebenfalls sehr weh tut, aber es kann mit CABAC mindestens 15% Bitrate gegenüber CAVLC einsparen, unabhängig von der absoluten Rez / Bitrate / anderen Einstellungen.
IDK, wenn es mit HTML5-Video möglich ist, einen Baseline-, Main- und High-Profile-Stream zur Verfügung zu haben. Ich weiß, dass Sie mp4- und webm-Alternativen haben können, aber das sind nur Container.
Ich stimme mit allem überein, was MoritzLost sagt .
Ich wollte nur einen Screenshot der Einstellungen des Exportfensters hinzufügen, um die Einstellung der Werte in Premiere Pro zu erleichtern.
Normalerweise drücke ich Befehl-M (Mac), um den Exportbildschirm aufzurufen. Und ich würde ihn so einstellen, wie Sie es unten sehen.
Die wichtige Einstellung, die zu beachten ist, ist die Bitrate. Ich würde sie auf 1 Mbit / s VBR einstellen und bis zu 2,4 für Szenen zulassen, die zu einem bestimmten Zeitpunkt viel Aktivität aufweisen.
Versuchen Sie, eine Dateigröße von 1 MB anzustreben. (Paypals Sendmoney-Video war 13 Sekunden lang 1,2 MB groß, kein Audio)
