HTML5 비디오 배경으로 웹 사이트를 만들고 싶습니다.
사용하고 싶은 짧은 1080p mp4 클립이 있습니다 (20 초). 비디오를 페이지 내용 뒤에 전체 화면으로 레터 박스 형식 (5 : 2 ish)으로 실행하려고합니다 (예 : Paypal 웹 사이트 : https://www.paypal.com/uk/webapps/mpp/home 참조 )
이러한 목적으로 Premiere CC에서 가장 좋은 내보내기 설정은 무엇입니까?
HTML5 배경 비디오의 인코딩 설정
답변:
다른 브라우저에 맞게 여러 버전을 내 보내야합니다. HTML5를 사용하면 다양한 버전의 비디오를 제공 할 수 있으며 브라우저는 지원되는 첫 번째 버전을 자동으로 선택합니다. 예를 들어, 참조한 페이팔 웹 사이트의 소스 코드를 살펴보십시오.
<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>
보시다시피 mp4 (H264 코덱) 및 webm 버전의 비디오를 모두 제공합니다. 이것들은 당신에게도 좋은 옵션이 될 것입니다.
또한, 인터넷이 느린 사이트 방문자도 볼 수 있도록 비디오를 가능한 작게 유지해야합니다. 이를 위해 1080p 대신 720p로 비디오를 내보내고 (특히 비디오가 백그라운드에있는 경우 차이를 보지 못함) 1Mbit / s 미만의 비트 전송률을 목표로해야합니다. 예를 들어, 페이팔 비디오는 약 700Kbit / s의 비트 전송률을 사용합니다. 오디오가 필요하지 않은 경우 오디오없이 또는 오디오 비트 전송률이 낮은 (예 : 96Kbit / s)로 내보낼 수 있습니다.
비디오를 웹 사이트에서 컴퓨터로 저장하고 코덱, 비트 전송률 및 기타 매개 변수 (예 : MediaInfo 또는 유사한 프로그램)를 확인할 수 있습니다.
2018 년 11 월 업데이트
이 질문은 여전히 많은 견해를 가지고 있기 때문에 최신 정보를 추가하고 싶었습니다. 현재 모든 최신 브라우저는 MP4 (MPEG-4 / H.264)를 지원하며 오랫동안 대부분의 프로젝트에서 MP4 만 제공 할 수있을 정도로 오래 동안 사용되었습니다. 프로젝트가 지원해야하는 모든 브라우저에서 MP4를 재생할 수 있는지 확인하려면 브라우저 호환성 표에 대한 위의 링크를 확인하십시오. 더 적은 수의 브라우저에서 지원되므로 MP3가 아닌 오디오 트랙에 AAC를 사용해야합니다.
그럼에도 불구하고 WebM 비디오 <source>는 더 나은 압축 기능을 갖추고 있기 때문에 WebM 비디오를 첫 번째로 제공 할 수 있으며 제공해야합니다. 따라서 제한된 데이터 요금제를 사용하는 사용자는 감사 할 것입니다. 디스크 공간, 렌더링 시간 또는 WebM을 제공하기 어려운 다른 변수에 제한이 있다면 MP4 만 있으면됩니다.
또한 내 원래 답변에는 오디오에 관한 내용이 포함되어 있기 때문에 엄격하게 관련이없는 추가 정보가 있습니다. 브라우저 공급 업체는 자동 재생 비디오 (페이지를로드 한 후 자동으로 시작되는 비디오, 특히 비디오가 오디오를 포함하는 경우)에서 자동 분해하고 있습니다. . 예를 들어 Safari는 비디오에 오디오 트랙이 없거나 비디오가 음소거 된 경우 ( <video>요소 의 해당 속성을 사용하여) 자동 재생 비디오 만 허용 합니다. 따라서 오디오 트랙이 필요하지 않으면 비디오 트랙없이 비디오를 내보내십시오 (오디오로 비디오 자동 재생은 어차피 UX입니다). 오디오가 필요한 경우 일부 브라우저는 자동 재생을 차단하므로 포스터 속성을 사용하여 자리 표시 자 이미지를 포함해야 합니다.
으로 MoritzLost는 말한다 , 다운 스케일. 어쩌면 관심있는 사람들을 위해 풀 버전의 링크를 넣으십시오. rez가 낮을수록 클라이언트 측의 자원 사용량도 줄어 듭니다. 내용에 따라 640p, 576p 또는 480p로 다운 스케일링해도 좋을 수 있으며 페이지 텍스트 뒤에 표시되는 정도에 따라 달라질 수 있습니다.
또한 귀하의 사이트를 방문하는 모든 사람이이 비디오를로드 할 것이므로 가능한 한 비트 전송률 당 품질을 최대한 높이려면 추가 문제를 해결해야합니다. Esp. 비디오를 자주 변경하지 않으려는 경우 H.264의 경우, 의미가 무손실 소스 공급 것을 x264를 소정 =으로 veryslow, crf = 26(또는 목표 비트 레이트를 2 단계). x264는 최고의 h.264 인코더입니다. (다양한 h.264 인코더를 독립적으로 테스트 한 결과이를 확인할 수 있습니다.) 충분한 CPU 시간이 주어지면 아주 작은 파일을보기 좋게 만드는 방법을 찾기위한 많은 영리한 알고리즘이 있습니다. (필요한 경우 빠르게 실행할 수 있지만 인코딩 시간은이 사용 사례와 실제로 관련이 없습니다. 한 번 인코딩하고 다운로드하여 여러 번 재생하십시오.)
페이지가로드 될 때 기본적으로 오디오를 재생하지 마십시오. 제정신이 아닌 사람들은 이미 이것을 알고 있지만 MoritzLost는 오디오에 대해 이야기하고있었습니다. 오디오를 자동 재생하는 페이지는 널리 혐오되며 악의적 인 것으로 간주됩니다.
최고 품질의 비디오로 연결되는 링크가있는 경우 해당 비디오에 오디오를 포함시킬 수 있습니다. 96kb / s로 AAC 스테레오 사운드가 우수합니다. 64kb / s는 여전히 좋은 소리를냅니다. (잘못된 인코더를 사용하지 않는 한 (예 : ffmpeg 이외의 것)) libfdk-aac.
편집하다:
나는 페이팔의 비디오를 보았다. (페이지 정보보기-> 미디어-> 비디오 찾기-> 다른 이름으로 저장).
mediainfo 산출:
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
따라서 핸드 브레이크를 통해 x264를 사용했지만 적절한 CPU 시간 대 속도 왜곡 트레이드 오프를 선택하는 데 어려움을 겪었습니다. 사전 설정 ref=1,me=hex,subme=2처럼 보입니다 veryfast. ( x264 --fullhelp모든 사전 설정이와 어떻게 다른지 보려면 medium모든 기본 설정을 사용합니다.) 다행히 기본 crf 23품질 설정은 사용 사례에 적합합니다. 그들은 내가 1,273킬로바이트에서 또 다른 20 %의 비트 레이트를 추측에는 요 저장 한 수 / 그들은 같은 더 나은 설정을 사용하여 crf23에서 가져온 s의 veryslow, 또는 단지 medium또는 slow.
또한 슬프게도 좋은 아이디어 인 일부 구형 안드로이드 / iOS 기기와의 호환성을 위해 h.264 메인 프로파일로 제한하기로 결정했습니다. ( --profile Main). 품질에 필요한 것보다 더 많은 비트 전송률을 사용하는 비디오는 일종의 애완 동물이기 때문에 사람들이 여전히 기준 프로파일 인코딩을 배포한다는 사실을 귀찮게합니다. 메인 프로파일은 8x8dct를 사용할 수 없으므로 상당히 아프지 만 적어도 CABAC를 사용하여 절대 rez / bitrate / 기타 설정에 관계없이 CAVLC에 비해 약 15 %의 비트 레이트를 절약 할 수 있습니다.
HTML5 비디오를 사용하여베이스 라인, 메인 및 하이 프로파일 스트림을 사용할 수있는 경우 IDK. mp4 및 webm 대안을 사용할 수는 있지만 컨테이너 일뿐입니다.
나는 MoritzLost가 말하는 모든 것에 거의 동의 한다 .
프리미어 창에서 값을 설정하는 데 도움이되는 내보내기 창 설정의 스크린 샷을 추가하고 싶었습니다.
나는 보통 command-M (Mac)을 눌러 내보내기 화면을 불러오고 아래에서 보는 것처럼 설정합니다.
주목해야 할 중요한 설정은 비트 전송률 설정이며, 1Mbps VBR로 설정하고 특정 시간에 많은 활동을하는 장면의 경우 최대 2.4까지 허용합니다.
1MB 파일 크기를 목표로하십시오. (Paypal의 sendmoney 비디오는 13 초 동안 1.2MB였으며 오디오는 없었습니다)
