Je souhaite créer un site Web avec un arrière-plan vidéo HTML5.
J'ai un court clip mp4 1080p que je veux utiliser (20s). J'ai l'intention d'exécuter la vidéo dans un format boîte aux lettres (5: 2 ish), en plein écran derrière le contenu de la page (pour un exemple, voir le site Web de Paypal: https://www.paypal.com/uk/webapps/mpp/home )
Quels seraient les meilleurs paramètres d'exportation dans Premiere CC à cet effet?
Vous devez exporter plusieurs versions pour s'adapter à différents navigateurs. Avec HTML5, vous pouvez proposer différentes versions de la vidéo et le navigateur choisira automatiquement la première prise en charge. Par exemple, jetez un œil au code source du site paypal auquel vous avez fait référence:
<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>
Comme vous pouvez le voir, ils proposent à la fois un mp4 (codec H264) et une version webm de la vidéo. Ce seraient également de bonnes options pour vous.
De plus, vous devriez essayer de garder les vidéos aussi petites que possible, afin que les visiteurs du site avec une connexion Internet lente puissent également la regarder. À cette fin, vous devez exporter la vidéo avec 720p au lieu de 1080p (personne ne verra la différence, surtout si la vidéo est en arrière-plan) et viser un débit inférieur à 1 Mbit / s. Par exemple, la vidéo paypal utilise un débit d'environ 700 Kbit / s. Si vous n'avez pas besoin de l'audio, vous pouvez exporter sans audio ou avec un faible débit audio, soit 96 Kbit / s.
Vous pouvez également enregistrer la vidéo du site Web sur votre ordinateur et vérifier le codec, le débit binaire et d'autres paramètres, par exemple avec MediaInfo ou des programmes similaires.
Étant donné que cette question reçoit encore beaucoup de vues, je voulais ajouter des informations à jour. À l'heure actuelle, tous les navigateurs modernes prennent en charge MP4 (MPEG-4 / H.264), et cela fait suffisamment longtemps que vous ne pourrez plus proposer que MP4 pour la plupart des projets. Consultez le lien ci-dessus pour un tableau de compatibilité des navigateurs afin de vous assurer que tous les navigateurs que votre projet doit prendre en charge peuvent lire MP4. N'oubliez pas d'utiliser AAC pour la piste audio, pas MP3, car il est pris en charge par moins de navigateurs.
Néanmoins, vous pouvez et devez proposer une vidéo WebM en premier <source>, car elle présente une meilleure compression, donc les utilisateurs d'un forfait de données limité vous remercieront. Je voulais juste ajouter que si vous êtes limité en termes d'espace disque, de temps de rendu ou d'une autre variable qui rend difficile l'offre de WebM, MP4 est tout ce dont vous avez besoin maintenant.
De plus, étant donné que ma réponse d'origine incluait quelque chose à propos de l'audio, une conclusion supplémentaire qui n'est pas strictement liée: les fournisseurs de navigateurs répriment les vidéos de lecture automatique (vidéo qui commence à jouer automatiquement après le chargement de la page, sans interaction de l'utilisateur), surtout si la vidéo contient de l'audio . Par exemple, Safari n'autorisera la lecture automatique des vidéos que si la vidéo ne contient pas de piste audio ou si la vidéo est mise en sourdine (en utilisant l'attribut correspondant sur l' <video>élément). Donc, si vous n'avez pas besoin de la piste audio, exportez votre vidéo sans celle-ci (la lecture automatique de vidéos avec audio est UX désagréable de toute façon). Et si vous avez besoin de l'audio, gardez à l'esprit que certains navigateurs bloqueront la lecture automatique, alors assurez-vous d'inclure une image d'espace réservé à l'aide de l' attribut poster .
Comme le dit MoritzLost , downscale. Peut-être mettre un lien quelque part vers la version complète pour les personnes intéressées. Un rez inférieur réduira également l'utilisation des ressources côté client. Même une mise à l'échelle vers 640p, 576p ou même 480p peut être bonne, selon le contenu et la façon dont il sera toujours visible derrière le texte de votre page.
De plus, étant donné que TOUT LE MONDE qui visite votre site chargera cette vidéo, cela vaut la peine de prendre plus de peine pour vous assurer de tirer le maximum de qualité par bitrate. Esp. si vous ne prévoyez pas de changer la vidéo très souvent. Pour h.264, cela signifie alimenter une source sans perte en x264 avec un préréglage = veryslow, crf = 26(ou une cible de débit binaire à 2 passes). x264 est le meilleur encodeur h.264. (Des tests indépendants de divers encodeurs h.264 l'ont confirmé.) Il a beaucoup d'algorithmes vraiment intelligents pour trouver des façons de créer un très petit fichier qui a l'air bien, avec suffisamment de temps CPU. (Et peut fonctionner rapidement si vous en avez besoin, mais le temps de codage n'est pas vraiment pertinent pour ce cas d'utilisation: coder une fois, télécharger et jouer de nombreuses fois.)
Ne lisez PAS l'audio par défaut lorsque votre page se charge. J'espère que les gens sensés le savent déjà, mais MoritzLost parlait d'audio. Les pages qui lisent automatiquement l'audio sont largement détestées et considérées comme mauvaises.
Si vous avez un lien vers une version pleine qualité de la vidéo, vous pouvez inclure l'audio avec cela. 96 Ko / s suffisent pour que la stéréo AAC sonne parfaitement. 64kb / s sonnera toujours bien. (tant que vous n'utilisez pas un mauvais encodeur, par exemple quelque chose dans ffmpeg autre que libfdk-aac.
J'ai regardé la vidéo de paypal. (afficher les informations sur la page -> médias -> trouver la vidéo -> enregistrer sous).
mediainfo production:
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 : [email protected]
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
Ils ont donc utilisé x264 via Handbrake, mais ils ont du mal à choisir un compromis temps de processeur / taux de distorsion approprié. ref=1,me=hex,subme=2ressemble au veryfastpreset. ( x264 --fullhelppour voir en quoi chaque préréglage diffère medium, qui utilise les paramètres par défaut pour tout.) Heureusement pour eux, le crf 23paramètre de qualité par défaut est à peu près adapté à leur cas d'utilisation. Ils auraient pu économiser, je suppose, un autre débit de 20% par rapport aux 1273 kb / s qu'ils ont obtenu de crf23 en utilisant de meilleurs paramètres, comme veryslow, ou même juste mediumou slow.
Ils ont également décidé de se limiter au profil principal h.264, pour la compatibilité avec certains appareils Android / iOS plus anciens, ce qui est malheureusement toujours une bonne idée, je suppose. ( --profile Main). La vidéo qui utilise plus de débit que nécessaire pour la qualité est une sorte de bête noire, donc cela m'énerve vraiment que les gens continuent de distribuer les codes de profil Baseline. Le profil principal ne peut pas utiliser 8x8dct, ce qui fait aussi beaucoup mal, mais au moins il peut utiliser CABAC pour économiser environ 15% de débit par rapport à CAVLC, indépendamment du rez-de-chaussée absolu / de tout autre paramètre.
IDK s'il est possible avec la vidéo HTML5 d'avoir un flux de profil de base, principal et élevé disponible. Je sais que vous pouvez avoir des alternatives mp4 et webm, mais ce ne sont que des conteneurs.
Je suis à peu près d'accord avec tout ce que dit MoritzLost .
Je voulais juste ajouter une capture d'écran des paramètres de la fenêtre d'exportation pour aider à définir les valeurs sur Premiere Pro.
J'appuie généralement sur commande-M (Mac) pour afficher l'écran d'exportation et je le définirais comme vous le voyez ci-dessous.
Le paramètre important à noter est les paramètres de débit binaire, je le définirais sur 1 Mbps VBR et autoriserais jusqu'à 2,4 pour les scènes qui obtiennent beaucoup d'activité à un moment particulier.
Essayez de viser une taille de fichier de 1 Mo. (La vidéo sendmoney de Paypal était de 1,2 Mo pendant 13 secondes, pas d'audio)
