ฉันต้องการสร้างเว็บไซต์ที่มีพื้นหลังวิดีโอ HTML5
ฉันมีคลิป mp4 สั้น ๆ ที่ฉันต้องการใช้ (ยุค 20) ฉันต้องการเปิดวิดีโอในรูปแบบกล่องจดหมาย (5: 2 ish) เต็มหน้าจอด้านหลังเนื้อหาของหน้าเว็บ (ตัวอย่างเช่นดูเว็บไซต์ของ Paypal: https://www.paypal.com/uk/webapps/mpp/home )
การตั้งค่าการส่งออกที่ดีที่สุดใน Premiere CC สำหรับจุดประสงค์นี้คืออะไร
คำตอบ:
คุณควรส่งออกหลายรุ่นเพื่อรองรับเบราว์เซอร์ที่แตกต่างกัน ด้วย HTML5 คุณสามารถนำเสนอวิดีโอเวอร์ชันต่าง ๆ และเบราว์เซอร์จะเลือกวิดีโอแรกที่สนับสนุนโดยอัตโนมัติ ตัวอย่างเช่นลองดูซอร์สโค้ดของเว็บไซต์ paypal ที่คุณอ้างถึง:
<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 codec) และวิดีโอ webm นั่นจะเป็นตัวเลือกที่ดีสำหรับคุณเช่นกัน
นอกจากนี้คุณควรพยายามทำให้วิดีโอมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้เพื่อให้ผู้เยี่ยมชมเว็บไซต์ที่มีอินเทอร์เน็ตช้าก็สามารถดูได้เช่นกัน สำหรับวัตถุประสงค์นั้นคุณควรส่งออกวิดีโอที่มีความละเอียด 720p แทนที่จะเป็น 1080p (ไม่มีใครเห็นความแตกต่างโดยเฉพาะอย่างยิ่งหากวิดีโออยู่ในพื้นหลัง) และตั้งเป้าหมายให้บิตเรตต่ำกว่า 1 Mbit / s ตัวอย่างเช่นวิดีโอ paypal ใช้อัตราบิตประมาณ 700 Kbit / s หากคุณไม่ต้องการเสียงคุณสามารถส่งออกโดยไม่มีเสียงหรือบิตเรตเสียงต่ำเช่น 96 Kbit / s
คุณยังสามารถบันทึกวิดีโอจากเว็บไซต์ไปยังคอมพิวเตอร์ของคุณและตรวจสอบตัวแปลงสัญญาณบิตเรตและพารามิเตอร์อื่น ๆ เช่นกับMediaInfoหรือโปรแกรมที่คล้ายกัน
เนื่องจากคำถามนี้ยังคงได้รับการดูจำนวนมากฉันต้องการเพิ่มข้อมูลที่เป็นปัจจุบัน เมื่อถึงตอนนี้เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ MP4 (MPEG-4 / H.264) และใช้เวลานานพอที่คุณจะได้รับการเสนอที่ดีเพียง MP4 สำหรับโครงการส่วนใหญ่ ตรวจสอบลิงค์ด้านบนเพื่อดูตารางความเข้ากันได้ของเบราว์เซอร์เพื่อให้แน่ใจว่าเบราว์เซอร์ทั้งหมดที่โครงการของคุณต้องการเพื่อรองรับสามารถเล่น MP4 โปรดจำไว้ว่าให้ใช้ AAC สำหรับแทร็กเสียงไม่ใช่ MP3 เนื่องจากเบราว์เซอร์รองรับน้อยกว่า
ถึงกระนั้นคุณสามารถและควรเสนอวิดีโอ WebM เป็นรายการแรก<source>เนื่องจากมีการบีบอัดที่ดีกว่าดังนั้นผู้ใช้ในแผนข้อมูลที่ จำกัด จะขอบคุณ ฉันแค่อยากจะเพิ่มว่าถ้าคุณถูก จำกัด ในแง่ของพื้นที่ดิสก์เวลาแสดงผลหรือตัวแปรอื่น ๆ ที่ทำให้การเสนอ WebM เป็นเรื่องยาก MP4 เป็นสิ่งที่คุณต้องการในตอนนี้
นอกจากนี้เนื่องจากคำตอบดั้งเดิมของฉันมีบางอย่างเกี่ยวกับเสียงสิ่งที่ต้องซื้อเพิ่มอีกหนึ่งอย่างที่ไม่เกี่ยวข้องกันอย่างเข้มงวด: ผู้ขายเบราว์เซอร์จะถอดรหัสวิดีโอเล่นอัตโนมัติ (วิดีโอที่เริ่มเล่นโดยอัตโนมัติหลังจากโหลดหน้าเว็บโดยไม่มีการโต้ตอบกับผู้ใช้) โดยเฉพาะอย่างยิ่ง . ตัวอย่างเช่นSafari จะอนุญาตเฉพาะวิดีโอเล่นอัตโนมัติหากวิดีโอไม่มีแทร็กเสียงหรือวิดีโอถูกปิดเสียง (ใช้แอตทริบิวต์ที่เกี่ยวข้องใน<video>องค์ประกอบ) ดังนั้นหากคุณไม่ต้องการแทร็กเสียงให้ส่งออกวิดีโอของคุณโดยไม่ใช้อันใดอันหนึ่ง (วิดีโอที่เล่นอัตโนมัติพร้อมเสียงเป็น UX ที่น่ารังเกียจอยู่ดี) และหากคุณต้องการเสียงโปรดจำไว้ว่าเบราว์เซอร์บางตัวจะบล็อกการเล่นอัตโนมัติดังนั้นโปรดรวมภาพตัวยึดตำแหน่งโดยใช้แอตทริบิวต์poster
ในฐานะที่เป็นMoritzLost กล่าวว่า , downscale อาจวางลิงค์ไปที่เวอร์ชันเต็มสำหรับคนที่สนใจ Lower rez จะลดการใช้ทรัพยากรในฝั่งไคลเอ็นต์ แม้การลดขนาดเป็น 640p, 576p หรือ 480p อาจดีขึ้นอยู่กับเนื้อหาและการมองเห็นจะยังคงอยู่หลังข้อความของหน้าเว็บของคุณ
นอกจากนี้เนื่องจากทุกคนที่เข้าชมเว็บไซต์ของคุณจะโหลดวิดีโอนี้คุณควรมีปัญหาเพิ่มเติมเพื่อให้แน่ใจว่าคุณบีบคุณภาพต่อบิตเรตเท่าที่คุณจะทำได้ Esp หากคุณไม่ได้วางแผนที่จะเปลี่ยนวิดีโอบ่อยมาก สำหรับ h.264 นั่นหมายถึงการป้อนแหล่งข้อมูลแบบไม่สูญเสียไปยังx264ด้วย preset = veryslow, crf = 26(หรือเป้าหมายบิตเรตแบบ 2 รอบ) x264 เป็นตัวเข้ารหัส h.264 ที่ดีที่สุด (การทดสอบตัวเข้ารหัส h.264 ที่เป็นอิสระได้ยืนยันสิ่งนี้) มันมีอัลกอริทึมที่ฉลาดมากสำหรับการหาวิธีในการสร้างไฟล์เล็ก ๆ ที่ดูดีให้เวลา CPU ที่เพียงพอ (และสามารถทำงานได้อย่างรวดเร็วหากคุณต้องการ แต่เวลาการเข้ารหัสไม่เกี่ยวข้องกับกรณีการใช้งานจริง: เข้ารหัสครั้งเดียวดาวน์โหลดและเล่นหลายครั้ง)
ห้ามเล่นเสียงตามค่าเริ่มต้นเมื่อโหลดหน้าเว็บของคุณ หวังว่าคนที่มีสติจะรู้เรื่องนี้อยู่แล้ว แต่ MoritzLost กำลังพูดถึงเรื่องเสียง หน้าเว็บที่เล่นอัตโนมัติเสียงเกลียดและถือว่าเป็นความชั่วร้ายอย่างกว้างขวาง
หากคุณมีลิงก์ไปยังวิดีโอคุณภาพเต็มรูปแบบคุณสามารถรวมเสียงไว้ด้วย 96kb / s เพียงพอสำหรับสเตอริโอ AAC เพื่อเสียงที่ยอดเยี่ยม 64kb / s จะยังคงดีอยู่ (ตราบใดที่คุณไม่ได้ใช้โปรแกรมเปลี่ยนไฟล์ที่ไม่ดีเช่นอะไรใน ffmpeg นอกเหนือจากlibfdk-aacนั้น
ฉันดูวิดีโอของ paypal (ดูข้อมูลหน้า -> สื่อ -> ค้นหาวิดีโอ -> บันทึกเป็น)
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 ผ่าน Handbrake แต่พวกเขาเลือกที่จะเลือก CPU-time และอัตราการบิดเบือนที่เหมาะสม ref=1,me=hex,subme=2ดูเหมือนว่าที่veryfastตั้งไว้ล่วงหน้า ( x264 --fullhelpเพื่อดูว่าแต่ละค่าที่ตั้งล่วงหน้าแตกต่างกันmediumซึ่งใช้การตั้งค่าเริ่มต้นสำหรับทุกสิ่ง) โชคดีสำหรับพวกเขาการcrf 23ตั้งค่าคุณภาพเริ่มต้นนั้นเหมาะสมกับกรณีการใช้งานของพวกเขา พวกเขาอาจจะช่วยฉันเดาอีกบิตเรต 20% จาก 1273kb / s ที่พวกเขาได้รับจาก crf23 โดยใช้การตั้งค่าที่ดีกว่าเช่นveryslowหรือแม้เพียงแค่หรือmediumslow
พวกเขายังตัดสินใจ จำกัด ตัวเองเป็นโปรไฟล์หลัก h.264 สำหรับการใช้งานร่วมกับอุปกรณ์ Android / iOS รุ่นเก่าซึ่งยังคงเป็นความคิดที่ดี ( --profile Main) วิดีโอที่ใช้บิตเรตมากกว่าที่จำเป็นสำหรับคุณภาพนั้นเป็นสัตว์เลี้ยงที่ฉุนเฉียวดังนั้นมันทำให้ฉันรำคาญใจจริง ๆ ที่ผู้คนยังคงเผยแพร่การเข้ารหัสโปรไฟล์ Baseline โปรไฟล์หลักไม่สามารถใช้ 8x8dct ซึ่งสร้างความเสียหายได้เล็กน้อยเช่นกัน แต่อย่างน้อยก็สามารถใช้ CABAC เพื่อบันทึกบิตเรต 15% เทียบกับ CAVLC โดยไม่คำนึงถึง rez / bitrate / การตั้งค่าอื่น ๆ
IDK หากเป็นไปได้ด้วยวิดีโอ HTML5 ที่จะมีสตรีมพื้นฐาน, หลักและสตรีมโปรไฟล์สูง ฉันรู้ว่าคุณสามารถมีทางเลือก mp4 และ webm ได้ แต่นั่นเป็นเพียงแค่คอนเทนเนอร์
ผมสวยมากเห็นด้วยกับทุกอย่างที่MoritzLost ไม่ว่าจะเป็น
ฉันแค่อยากจะเพิ่มภาพหน้าจอของการตั้งค่าหน้าต่างการส่งออกเพื่อช่วยในการตั้งค่าในรอบปฐมทัศน์มืออาชีพ
ฉันมักจะกด command-M (Mac) เพื่อเปิดหน้าจอการส่งออกและฉันจะตั้งค่าตามที่คุณเห็นด้านล่าง
การตั้งค่าที่สำคัญที่ควรทราบคือการตั้งค่าบิตเรตฉันจะตั้งค่าเป็น 1Mbps VBR และอนุญาตให้สูงถึง 2.4 สำหรับฉากที่ได้รับกิจกรรมจำนวนมากในเวลาใดเวลาหนึ่ง
พยายามตั้งเป้าขนาดไฟล์ 1MB (วิดีโอ sendmoney ของ Paypal คือ 1.2MB เป็นเวลา 13 วินาทีไม่มีเสียง)
