Saya ingin membuat situs web dengan latar belakang video HTML5.
Saya memiliki klip 1080p mp4 pendek yang ingin saya gunakan (20-an). Saya bermaksud menjalankan video dalam format kotak surat (5: 2 ish), layar penuh di belakang konten halaman (misalnya, lihat situs web Paypal: https://www.paypal.com/uk/webapps/mpp/home )
Apa pengaturan ekspor terbaik di Premiere CC untuk tujuan ini?
Jawaban:
Anda harus mengekspor beberapa versi untuk mengakomodasi berbagai browser. Dengan HTML5, Anda dapat menawarkan berbagai versi video dan browser akan secara otomatis memilih yang pertama yang didukung. Misalnya, lihat kode sumber situs web paypal yang Anda referensikan:
<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>
Seperti yang Anda lihat, mereka menawarkan video mp4 (H264 codec) dan versi webm. Itu akan menjadi pilihan yang baik untuk Anda juga.
Selain itu, Anda harus mencoba untuk menjaga video sekecil mungkin, sehingga pengunjung situs dengan internet lambat juga dapat menontonnya. Untuk tujuan itu, Anda harus mengekspor video dengan 720p bukan 1080p (tidak ada yang akan melihat perbedaannya, terutama jika video di latar belakang) dan bertujuan untuk bitrate di bawah 1 Mbit / s. Misalnya, video paypal menggunakan bitrate sekitar 700 Kbit / s. Jika Anda tidak membutuhkan audio, Anda dapat mengekspor tanpa audio atau dengan bitrate audio yang rendah, yaitu 96 Kbit / s.
Anda juga dapat menyimpan video dari situs web ke komputer Anda dan memeriksa codec, bitrate, dan parameter lainnya misalnya dengan MediaInfo atau program serupa.
Karena pertanyaan ini masih mendapatkan banyak pandangan, saya ingin menambahkan beberapa informasi terbaru. Sekarang, semua browser modern mendukung MP4 (MPEG-4 / H.264), dan sudah cukup lama Anda hanya akan menawarkan MP4 untuk sebagian besar proyek. Periksa tautan di atas untuk tabel kompatibilitas browser untuk memastikan semua browser yang dibutuhkan oleh proyek Anda dapat memutar MP4. Ingatlah untuk menggunakan AAC untuk trek audio, bukan MP3, karena didukung oleh lebih sedikit browser.
Namun, Anda dapat dan harus menawarkan video WebM sebagai yang pertama <source>, karena fitur kompresi yang lebih baik, sehingga pengguna dengan paket data terbatas akan berterima kasih. Saya hanya ingin menambahkan bahwa jika Anda terbatas dalam hal ruang disk, waktu render atau variabel lain yang membuatnya sulit untuk menawarkan WebM, MP4 adalah semua yang Anda butuhkan saat ini.
Juga, karena jawaban awal saya termasuk sesuatu tentang audio, satu takeaway tambahan yang tidak sepenuhnya terkait: Vendor browser menindak video autoplay (video yang mulai diputar secara otomatis setelah memuat halaman, tanpa interaksi pengguna), terutama jika video berisi audio . Misalnya, Safari hanya akan mengizinkan video putar otomatis jika video tidak mengandung trek audio, atau video dibisukan (menggunakan atribut yang sesuai pada <video>elemen). Jadi, jika Anda tidak memerlukan trek audio, ekspor video Anda tanpa itu (memutar video otomatis dengan audio adalah UX yang menjengkelkan). Dan jika Anda memang membutuhkan audio, perlu diingat bahwa beberapa browser akan memblokir autoplay, jadi pastikan untuk menyertakan gambar placeholder menggunakan atribut poster .
Seperti kata MoritzLost , turunkan . Mungkin menaruh tautan di suatu tempat ke versi berkualitas penuh untuk orang-orang yang tertarik. Rez yang lebih rendah juga akan menurunkan penggunaan sumber daya di sisi klien. Bahkan menurunkan skala ke 640p, 576p, atau bahkan 480p mungkin baik, tergantung pada kontennya, dan seberapa terlihat itu masih berada di belakang teks halaman Anda.
Juga, karena SEMUA ORANG yang mengunjungi situs Anda akan memuat video ini, ada baiknya mengambil masalah ekstra untuk memastikan Anda memeras kualitas sebanyak per bitrate yang Anda bisa. Esp. jika Anda tidak berencana untuk mengubah video terlalu sering. Untuk h.264, itu berarti mengumpankan sumber lossless ke x264 dengan preset = veryslow, crf = 26(atau target bitrate 2-pass). x264 adalah encoder h.264 terbaik. (Pengujian independen terhadap berbagai encoder h.264 telah mengkonfirmasi ini.) Ia memiliki banyak algoritma yang sangat pintar untuk menemukan cara membuat file yang sangat kecil yang terlihat bagus, mengingat waktu CPU yang cukup. (Dan dapat berjalan cepat jika Anda membutuhkannya, tetapi waktu penyandian tidak benar-benar relevan untuk kasus penggunaan ini: penyandian sekali, unduh dan mainkan BANYAK kali.)
JANGAN memutar audio secara default saat halaman Anda dimuat. Semoga orang waras sudah tahu ini, tetapi MoritzLost berbicara tentang audio. Halaman yang memutar audio secara otomatis sangat dibenci dan dianggap jahat.
Jika Anda memiliki tautan ke versi video berkualitas penuh, Anda dapat menyertakan audio dengan itu. 96kb / s sudah cukup untuk stereo AAC terdengar sangat baik. 64kb / s masih terdengar bagus. (selama Anda tidak menggunakan encoder yang buruk, misalnya apa pun di ffmpeg selain libfdk-aac.
Saya telah melihat video paypal. (lihat info halaman -> media -> cari video -> save as).
mediainfo keluaran:
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
Jadi mereka menggunakan x264 via Handbrake, tetapi mereka payah dalam memilih pengorbanan waktu CPU yang tepat vs tingkat-distorsi. ref=1,me=hex,subme=2sepertinya sudah veryfastdisetel. ( x264 --fullhelpuntuk melihat perbedaan masing-masing preset medium, yang menggunakan pengaturan default untuk semuanya.) Beruntung bagi mereka, pengaturan crf 23kualitas default hampir tepat untuk kasus penggunaannya. Mereka bisa menyelamatkan saya kira 20% bitrate lain dari 1273kb / s yang mereka dapatkan dari crf23 dengan menggunakan pengaturan yang lebih baik, seperti veryslow, atau bahkan hanya mediumatau slow.
Mereka juga memutuskan untuk membatasi diri ke profil utama h.264, untuk dibandingkan dengan beberapa perangkat Android / iOS yang lebih lama, yang sayangnya masih merupakan ide yang bagus, saya kira. ( --profile Main). Video yang menggunakan bitrate lebih banyak dari yang dibutuhkan untuk kualitasnya agak mengesalkan, jadi saya sangat kesal karena orang-orang masih mendistribusikan encode profil Baseline. Profil utama tidak dapat menggunakan 8x8dct, yang agak menyakitkan juga, tetapi setidaknya dapat menggunakan CABAC untuk menghemat sekitar 15% bitrate vs CAVLC, terlepas dari rez / bitrate absolut / pengaturan lainnya.
IDK jika memungkinkan dengan video HTML5 untuk memiliki aliran profil dasar, utama, dan tinggi. Saya tahu Anda dapat memiliki alternatif mp4 dan webm, tetapi itu hanya wadah.
Saya cukup setuju dengan semua yang dikatakan MoritzLost .
Saya hanya ingin menambahkan tangkapan layar pengaturan jendela ekspor untuk membantu mengatur nilai pada premiere pro.
Saya biasanya menekan command-M (Mac) untuk membuka layar ekspor dan saya akan mengaturnya seperti yang Anda lihat di bawah ini.
Pengaturan penting yang perlu diperhatikan adalah pengaturan Bitrate, saya akan mengaturnya menjadi 1Mbps VBR, dan memungkinkan setinggi 2,4 untuk adegan yang mendapatkan banyak aktivitas pada waktu tertentu.
Cobalah membidik ukuran file 1MB. (Video pengirim uang Paypal adalah 1,2 MB selama 13 detik, tanpa audio)
