Tôi muốn tạo một trang web với nền video HTML5.
Tôi có một đoạn phim ngắn 1080p 1080p mà tôi muốn sử dụng (20s). Tôi dự định chạy video ở định dạng hộp thư (5: 2 ish), toàn màn hình phía sau nội dung trang (ví dụ: xem trang web của Paypal: https://www.paypal.com/uk/webapps/mpp/home )
Cài đặt xuất tốt nhất trong Premiere CC cho mục đích này là gì?
Câu trả lời:
Bạn nên xuất nhiều phiên bản để phù hợp với các trình duyệt khác nhau. Với HTML5, bạn có thể cung cấp các phiên bản khác nhau của video và trình duyệt sẽ tự động chọn phiên bản đầu tiên được hỗ trợ. Ví dụ: hãy xem mã nguồn của trang web paypal mà bạn đã giới thiệu:
<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>
Như bạn có thể thấy, họ cung cấp cả mp4 (codec H264) và phiên bản webm của video. Đó sẽ là những lựa chọn tốt cho bạn.
Hơn nữa, bạn nên cố gắng giữ các video càng nhỏ càng tốt, để khách truy cập trang web có internet chậm cũng sẽ có thể xem nó. Với mục đích đó, bạn nên xuất video với 720p thay vì 1080p (không ai sẽ thấy sự khác biệt, đặc biệt là nếu video ở chế độ nền) và nhắm đến tốc độ bit dưới 1 Mbit / s. Ví dụ: video paypal sử dụng bitrate khoảng 700 Kbit / s. Nếu bạn không cần âm thanh, bạn có thể xuất mà không có âm thanh hoặc với tốc độ bit âm thanh thấp, tức là 96 Kbit / s.
Bạn cũng có thể lưu video từ trang web vào máy tính của mình và kiểm tra codec, bitrate và các tham số khác, ví dụ như với MediaInfo hoặc các chương trình tương tự.
Vì câu hỏi này vẫn nhận được rất nhiều lượt xem, tôi muốn thêm một số thông tin cập nhật. Cho đến nay, tất cả các trình duyệt hiện đại đều hỗ trợ MP4 (MPEG-4 / H.264) và trong một thời gian đủ dài, bạn sẽ chỉ cung cấp MP4 cho hầu hết các dự án. Kiểm tra liên kết ở trên để biết bảng tương thích trình duyệt để đảm bảo tất cả các trình duyệt mà dự án của bạn cần hỗ trợ có thể phát MP4. Hãy nhớ sử dụng AAC cho bản nhạc âm thanh, không phải MP3, vì nó được hỗ trợ bởi ít trình duyệt hơn.
Tuy nhiên, bạn có thể và nên cung cấp video WebM như lần đầu tiên <source>, vì nó có tính năng nén tốt hơn, vì vậy người dùng trên gói dữ liệu hạn chế sẽ cảm ơn bạn. Tôi chỉ muốn nói thêm rằng nếu bạn bị giới hạn về không gian đĩa, thời gian kết xuất hoặc một số biến khác gây khó khăn cho việc cung cấp WebM, MP4 là tất cả những gì bạn cần bây giờ.
Ngoài ra, vì câu trả lời ban đầu của tôi bao gồm một cái gì đó về âm thanh, một điều bổ sung không liên quan chặt chẽ: Các nhà cung cấp trình duyệt đang bẻ khóa các video tự động phát (video bắt đầu phát tự động sau khi tải trang, không có tương tác của người dùng), đặc biệt là nếu video có âm thanh . Ví dụ: Safari sẽ chỉ cho phép tự động phát video nếu video không chứa đoạn âm thanh hoặc video bị tắt tiếng (sử dụng thuộc tính tương ứng trên thành <video>phần). Vì vậy, nếu bạn không cần theo dõi âm thanh, hãy xuất video của bạn mà không cần một video (tự động phát video với âm thanh là UX đáng ghét). Và nếu bạn cần âm thanh, hãy nhớ rằng một số trình duyệt sẽ chặn tự động phát, vì vậy hãy đảm bảo bao gồm hình ảnh giữ chỗ bằng thuộc tính poster .
Như MoritzLost nói , hạ thấp. Có thể đặt một liên kết ở đâu đó đến phiên bản chất lượng đầy đủ cho những người quan tâm. Rez thấp hơn cũng sẽ sử dụng tài nguyên thấp hơn ở phía khách hàng. Ngay cả việc thu nhỏ xuống 640p, 576p hoặc thậm chí 480p cũng có thể tốt, tùy thuộc vào nội dung và mức độ hiển thị của nó vẫn sẽ ở phía sau văn bản của trang của bạn.
Ngoài ra, vì MỌI NGƯỜI truy cập trang web của bạn sẽ tải video này, đáng để gặp thêm rắc rối để đảm bảo bạn đạt được chất lượng trên mỗi bitrate nhiều nhất có thể. Đặc biệt nếu bạn không định thay đổi video thường xuyên. Đối với h.264, điều đó có nghĩa là cung cấp nguồn không tổn thất cho x264 với giá trị đặt trước = veryslow, crf = 26(hoặc mục tiêu bitrate 2-pass). x264 là bộ mã hóa h.264 tốt nhất. (thử nghiệm độc lập với nhiều bộ mã hóa h.264 đã xác nhận điều này.) Nó có rất nhiều thuật toán thực sự thông minh để tìm cách tạo ra một tệp thực sự nhỏ trông đẹp, đủ thời gian CPU. (Và có thể chạy nhanh nếu bạn cần, nhưng thời gian mã hóa không thực sự phù hợp với trường hợp sử dụng này: mã hóa một lần, tải xuống và chơi NHIỀU lần.)
KHÔNG phát âm thanh theo mặc định khi tải trang của bạn. Hy vọng mọi người lành mạnh đã biết điều này, nhưng MoritzLost đã nói về âm thanh. Các trang tự động phát âm thanh bị ghê tởm và bị coi là xấu xa.
Nếu bạn có liên kết đến phiên bản video chất lượng đầy đủ, bạn có thể bao gồm âm thanh với điều đó. 96kb / s là đủ để âm thanh nổi AAC phát ra âm thanh tuyệt vời. 64kb / s vẫn sẽ có âm thanh tốt. (miễn là bạn không sử dụng một bộ mã hóa xấu, ví dụ như mọi thứ trong ffmpeg ngoài libfdk-aac.
Tôi đã xem video của paypal. (xem thông tin trang -> phương tiện -> tìm video -> lưu dưới dạng).
mediainfo đầu ra:
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
Vì vậy, họ đã sử dụng x264 thông qua Handbrake, nhưng họ không chọn cách đánh đổi thời gian CPU phù hợp so với tỷ lệ biến dạng. ref=1,me=hex,subme=2trông giống như veryfastcài đặt trước. ( x264 --fullhelpđể xem mỗi cài đặt trước khác nhau như thế nào medium, sử dụng các cài đặt mặc định cho mọi thứ.) May mắn thay cho chúng, crf 23cài đặt chất lượng mặc định phù hợp với trường hợp sử dụng của chúng. Họ có thể đã lưu Tôi đoán thêm 20% bitrate từ 1273kb / giây họ nhận được từ crf23 bằng cách sử dụng các cài đặt tốt hơn, như veryslow, hoặc thậm chí chỉ mediumhoặc slow.
Họ cũng quyết định giới hạn bản thân ở h.264 Cấu hình chính, để tương thích với một số thiết bị Android / iOS cũ hơn, thật đáng buồn vẫn là một ý tưởng hay, tôi đoán vậy. ( --profile Main). Video sử dụng nhiều bitrate hơn mức cần thiết cho chất lượng là một loại tiểu cảnh thú cưng, vì vậy nó thực sự làm tôi khó chịu khi mọi người vẫn phân phối mã hóa hồ sơ cơ sở. Cấu hình chính không thể sử dụng 8x8dct, điều này cũng gây tổn thương khá nhiều, nhưng ít nhất nó có thể sử dụng CABAC để tiết kiệm khoảng 15% bitrate so với CAVLC, bất kể rez / bitrate tuyệt đối / bất kỳ cài đặt nào khác.
IDK nếu video HTML5 có thể có sẵn luồng cơ bản, Chính và luồng cấu hình cao. Tôi biết bạn có thể có các lựa chọn thay thế mp4 và webm, nhưng đó chỉ là các thùng chứa.
Tôi khá đồng ý với mọi thứ mà MoritzLost đang nói .
Tôi chỉ muốn thêm ảnh chụp màn hình của cài đặt cửa sổ xuất để giúp cài đặt các giá trị trên Premiere pro.
Tôi thường nhấn lệnh-M (Mac) để hiển thị màn hình xuất khẩu Và tôi sẽ thiết lập nó như bạn thấy bên dưới.
Cài đặt quan trọng cần lưu ý là cài đặt Bitrate, tôi sẽ đặt nó thành VBR 1Mbps và cho phép cao tới 2,4 cho các cảnh có nhiều hoạt động tại một thời điểm cụ thể.
Cố gắng nhắm đến kích thước tệp 1MB. (Video sendmoney của Paypal là 1,2 MB trong 13 giây, không có âm thanh)
