Base64 เป็นวิดีโอ

อินพุต Base64

แสดงตัวอย่างวิดีโอ

แปลงข้อมูลวิดีโอที่เข้ารหัส Base64 กลับเป็นไฟล์วิดีโอ MP4/WebM/OGG ที่เล่นได้ออนไลน์ รองรับการตรวจจับคำนำหน้า Data URL อัตโนมัติ การดำเนินการทั้งหมดทำในเบราว์เซอร์ในเครื่อง ข้อมูลวิดีโอไม่อัปโหลดไปยังเซิร์ฟเวอร์ เหมาะสำหรับการดีบักอินเทอร์เฟซ API แบ็กเอนด์ การตรวจสอบการเข้ารหัสวิดีโอ การกู้คืนวิดีโออินไลน์ฟรอนต์เอนด์ หลังถอดรหัสสามารถดูตัวอย่างเล่นและดาวน์โหลดได้โดยตรง

คำแนะนำที่เกี่ยวข้อง

วิดีโอเป็น Base64

เครื่องมือจัดการ padding Base64

ตัวตรวจสอบแฮชไฟล์

เข้ารหัสและถอดรหัส DES

บีบอัด JSON

เครื่องมือจัดรูปแบบ SQL

กรณีการใช้งาน

ดีบักอินเทอร์เฟซวิดีโอแบ็กเอนด์: เมื่อ API ส่งคืนข้อมูลวิดีโอที่เข้ารหัส Base64 ให้วางลงในเครื่องมือเพื่อดูตัวอย่างอย่างรวดเร็ว ตรวจสอบว่าอินเทอร์เฟซส่งคืนถูกต้องหรือไม่ โดยไม่ต้องเขียนโค้ดถอดรหัสฟรอนต์เอนด์
ตรวจสอบเอาต์พุตการเข้ารหัสวิดีโอ: หลังสร้างวิดีโอ Base64 โดยใช้ FFmpeg หรือบริการแปลงรหัสบนคลาวด์ ให้ถอดรหัสและเล่นเพื่อตรวจสอบว่าผลลัพธ์การแปลงรหัสเป็นปกติหรือไม่ ค้นหาปัญหาการเข้ารหัสเสียหาย
กู้คืนวิดีโออินไลน์ฟรอนต์เอนด์: แยกวิดีโออินไลน์ในรูปแบบ Data URL (data:video/mp4;base64,...) จาก HTML, CSS หรือ JavaScript กู้คืนเป็นไฟล์วิดีโอที่ดูได้
ตรวจสอบข้อมูลวิดีโออย่างรวดเร็ว: เปรียบเทียบว่าวิดีโอ Base64 สองรายการถอดรหัสได้เนื้อหาเดียวกันหรือไม่ หรือตรวจสอบว่ามีความเสียหายของข้อมูลในระหว่างการส่ง Base64 หรือไม่
ดูตัวอย่างวิดีโอสั้นชั่วคราว: สำหรับคลิปวิดีโอสั้นที่ไม่จำเป็นต้องบันทึกในเครื่อง ให้ดูตัวอย่างและเล่นในเครื่องมือโดยตรง ยืนยันเนื้อหาก่อนตัดสินใจดาวน์โหลด
แยกวิเคราะห์ข้อมูลโปรแกรมรวบรวมข้อมูลเว็บ: ข้อมูลวิดีโอที่เข้ารหัส Base64 ที่โปรแกรมรวบรวมข้อมูลเว็บจับได้ ให้กู้คืนเป็นไฟล์ที่เล่นได้อย่างรวดเร็วเพื่อตรวจสอบหรือวิเคราะห์เนื้อหา
ดีบักการพัฒนาไคลเอนต์: ในการพัฒนาแอปมือถือและมินิโปรแกรม เมื่อแบ็กเอนด์ส่งคืนวิดีโอ Base64 ให้ใช้เครื่องมือนี้ตรวจสอบความถูกต้องของข้อมูลก่อนพาการถอดรหัสไคลเอนต์
วัตถุประสงค์การสอนการสาธิต: ใช้เป็นเครื่องมือสาธิตออนไลน์เมื่ออธิบายหลักการเข้ารหัส Base64 เทคโนโลยี Data URL การใช้ Blob/URL.createObjectURL ของฟรอนต์เอนด์
ดูตัวอย่างไฟล์แนบอีเมล: ระบบอีเมลบางระบบแปลงไฟล์แนบเป็น Base64 เพื่อฝัง หลังจากแยกสามารถกู้คืนเนื้อหาวิดีโอเพื่อดูได้อย่างรวดเร็ว
ช่วยสร้างสถานการณ์ Bug ซ้ำ: เมื่อทีมทดสอบรายงาน Bug ที่เกี่ยวข้องกับวิดีโอ ให้ระบุข้อมูล Base64 นักพัฒนาสามารถกู้คืนวิดีโอเพื่อสร้างสถานการณ์ปัญหาซ้ำได้อย่างรวดเร็ว

วิธีการใช้งาน

รับข้อมูลวิดีโอ Base64: คัดลอกสตริงวิดีโอที่เข้ารหัส Base64 จากการตอบสนอง API บันทึก ซอร์สโค้ด HTML ฐานข้อมูล ฯลฯ รองรับทั้งที่มีและไม่มีคำนำหน้า Data URL
วางลงในพื้นที่อินพุต: วางข้อความ Base64 ที่คัดลอกมาลงในช่องอินพุตของเครื่องมือทั้งหมด เครื่องมือจะตรวจจับโดยอัตโนมัติว่ามีคำนำหน้า data:video/...;base64, หรือไม่
ยืนยันหรือเลือกรูปแบบ: หากอินพุตมีคำนำหน้า Data URL เครื่องมือจะจดจำ MIME type โดยอัตโนมัติ; หากเป็น Base64 บริสุทธิ์ ให้เลือกรูปแบบวิดีโอที่เกี่ยวข้อง (MP4/WebM/OGG) ด้วยตนเอง
คลิกปุ่มถอดรหัส: หลังคลิกปุ่มถอดรหัส เครื่องมือจะดำเนินการถอดรหัส Base64 การแปลง Uint8Array การสร้าง Blob ฯลฯ ในเบราว์เซอร์ในเครื่อง แสดงข้อความสถานะในระหว่างกระบวนการ
ดูข้อมูลวิดีโอ: หลังถอดรหัสเสร็จสมบูรณ์ ให้ดูข้อมูลพื้นฐานของวิดีโอ รวมถึงขนาดไฟล์ MIME type การยืนยันรูปแบบ ฯลฯ ตรวจสอบว่าการถอดรหัสสำเร็จหรือไม่
ดูตัวอย่างและเล่นวิดีโอ: ใช้โปรแกรมเล่น HTML5 ที่มีอยู่ในหน้าเพื่อดูตัวอย่างวิดีโอ ลากแถบความคืบหน้าเพื่อตรวจสอบว่าเนื้อหาวิดีโอสมบูรณ์ ภาพและเสียงเป็นปกติหรือไม่
ดาวน์โหลดไฟล์วิดีโอ: หลังยืนยันว่าวิดีโอถูกต้องแล้ว ให้คลิกปุ่มดาวน์โหลดเพื่อบันทึกวิดีโอ Blob ลงในเครื่อง ไฟล์จะจับคู่นามสกุลที่ถูกต้องโดยอัตโนมัติ (.mp4/.webm/.ogg)

คุณสมบัติ

การจดจำรูปแบบอินพุตอัจฉริยะ: ตรวจจับการเข้ารหัส Base64 บริสุทธิ์และรูปแบบ Data URL แบบเต็ม (คำนำหน้า data:video/...;base64,) โดยอัตโนมัติ สามารถถอดรหัสได้โดยไม่ต้องลบคำนำหน้าด้วยตนเอง
รองรับวิดีโอหลายรูปแบบ: รองรับ MIME type วิดีโอหลักที่เบราว์เซอร์สนับสนุนแบบเนทีฟอย่างสมบูรณ์ ได้แก่ MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)
ประมวลผลในเบราว์เซอร์: การถอดรหัส Base64 การสร้าง Blob และการดูตัวอย่างวิดีโอทั้งหมดทำในเบราว์เซอร์ของผู้ใช้ผ่าน JavaScript ข้อมูลวิดีโอไม่อัปโหลดไปยังเซิร์ฟเวอร์ใดๆ
เล่นดูตัวอย่างทันที: หลังถอดรหัสจะสร้างโปรแกรมเล่นวิดีโอ HTML5 อัตโนมัติ รองรับการเล่น หยุดชั่วคราว ลากแถบความคืบหน้า ปรับระดับเสียง เต็มหน้าจอ และส่วนควบคุมการเล่นที่สมบูรณ์
ดาวน์โหลดไฟล์ต้นฉบับ: บันทึกวิดีโอที่ถอดรหัสแล้วเป็นไฟล์ในเครื่องด้วยคลิกเดียว เลือกนามสกุลไฟล์ที่ถูกต้องโดยอัตโนมัติตาม MIME type (.mp4/.webm/.ogg)
ตรวจจับ MIME type อัตโนมัติ: จดจำรูปแบบวิดีโอจากคำนำหน้า Data URL โดยอัตโนมัติ ผู้ใช้ไม่จำเป็นต้องเลือกด้วยตนเอง; รองรับการระบุรูปแบบด้วยตนเองเมื่ออินพุตเป็น Base64 บริสุทธิ์
การตอบสนองความคืบหน้าถอดรหัสแบบเรียลไทม์: แสดงสถานะการประมวลผลเมื่อถอดรหัสข้อมูล Base64 ขนาดใหญ่ ป้องกันไม่ให้ผู้ใช้คิดว่าหน้าค้าง
แสดงข้อมูลเมตาของวิดีโอ: หลังถอดรหัสจะแสดงข้อมูลพื้นฐาน เช่น ขนาดวิดีโอ MIME type ระยะเวลา (เมื่อเล่นได้) ความละเอียด
ข้อความแสดงข้อผิดพลาดและการวินิจฉัย: ให้ข้อความข้อผิดพลาดที่ชัดเจนและคำแนะนำในการแก้ไขเมื่อรูปแบบอินพุตผิด การเข้ารหัส Base64 เสียหาย หรือรูปแบบวิดีโอไม่รองรับ
รองรับการลากและวางและวาง: รองรับการวางข้อความ Base64 โดยตรง การลากและวางไฟล์ข้อความไปยังพื้นที่อินพุต เพิ่มประสิทธิภาพการดีบัก
ซ่อมแซมปัญหาการเข้ารหัสอัตโนมัติ: จัดการปัญหารูปแบบทั่วไปโดยอัตโนมัติ เช่น อักขระเติม (=) ของ Base64 ขาดหาย อักขระว่าง อักขระขึ้นบรรทัดใหม่
เข้ากันได้ข้ามเบราว์เซอร์: รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด เช่น Chrome, Firefox, Safari, Edge ใช้มาตรฐาน atob และ Uint8Array API
การออกแบบที่ตอบสนอง: รองรับการใช้งานบนเดสก์ท็อปและอุปกรณ์มือถือ สามารถถอดรหัสและดูตัวอย่างวิดีโอสั้นบนโทรศัพท์และแท็บเล็ตได้ตามปกติ
รับประกันความเป็นส่วนตัวและความปลอดภัย: ข้อมูลวิดีโอประมวลผลในหน่วยความจำในเครื่องทั้งหมด ข้อมูลจะถูกลบทันทีเมื่อปิดหน้า ไม่ทิ้งแคชหรือบันทึกใดๆ

คำถามที่พบบ่อย

เครื่องมือ Base64 to Video รองรับรูปแบบวิดีโอใดบ้าง?

รองรับรูปแบบวิดีโอหลักที่เบราว์เซอร์สามารถเล่นได้แบบเนทีฟ: MP4 (video/mp4, การเข้ารหัส H.264+AAC), WebM (video/webm, การเข้ารหัส VP8/VP9+Vorbis/Opus), OGG (video/ogg, การเข้ารหัส Theora+Vorbis) โดยในนั้นรูปแบบ MP4 มีความเข้ากันได้ดีที่สุด เบราว์เซอร์สมัยใหม่และอุปกรณ์มือถือทั้งหมดรองรับ แนะนำให้ใช้เป็นลำดับแรก หากวิดีโอของคุณเป็นรูปแบบอื่น (เช่น MOV, AVI, MKV) จำเป็นต้องใช้ FFmpeg แปลงรหัสเป็น MP4(H.264+AAC) ก่อนเข้ารหัส Base64

อินพุตจำเป็นต้องมีคำนำหน้า data:video/mp4;base64 หรือไม่?

ไม่จำเป็น เครื่องมือรองรับรูปแบบอินพุตสองแบบ: ①สตริง Base64 บริสุทธิ์ (ไม่มีคำนำหน้าใดๆ); ②Data URL แบบเต็ม (มีคำนำหน้า data:video/xxx;base64,) เครื่องมือจะตรวจจับโดยอัตโนมัติว่าอินพุตมีคำนำหน้าหรือไม่ หากมีจะแยกเนื้อหา Base64 และจดจำ MIME type โดยอัตโนมัติ แนะนำให้คัดลอกเนื้อหาทั้งหมดที่ API ส่งคืนโดยตรง ไม่จำเป็นต้องประมวลผลคำนำหน้าด้วยตนเอง

หลังถอดรหัสสามารถเล่นวิดีโอในเบราว์เซอร์โดยตรงได้หรือไม่?

ได้ หลังถอดรหัสเสร็จสมบูรณ์ เครื่องมือจะสร้างโปรแกรมเล่นวิดีโอ HTML5 ในตัว รองรับฟังก์ชันการทำงานที่สมบูรณ์เช่น เล่น/หยุดชั่วคราว ลากแถบความคืบหน้า ปรับระดับเสียง เล่นแบบเต็มหน้าจอ คุณสามารถดูตัวอย่างเนื้อหาวิดีโอบนหน้าโดยตรง ยืนยันว่าภาพและเสียงเป็นปกติแล้วจึงตัดสินใจดาวน์โหลดลงในเครื่อง

รองรับการประมวลผลวิดีโอ Base64 ขนาดใหญ่หรือไม่? มีขีดจำกัดขนาดหรือไม่?

ตัวเครื่องมือเองไม่มีขีดจำกัดขนาดที่เข้มงวด แต่เบราว์เซอร์มีขีดจำกัดหน่วยความจำและประสิทธิภาพ การเข้ารหัส Base64 จะทำให้ขนาดวิดีโอเพิ่มขึ้นประมาณ 33% ในระหว่างการถอดรหัสเบราว์เซอร์จำเป็นต้องจัดสรรหน่วยความจำเพื่อเก็บสำเนาหลายชุดเช่น สตริง Base64 สตริงไบนารี Uint8Array Blob ฯลฯ การใช้หน่วยความจำสูงสุดอาจเป็น 3-5 เท่าของขนาดวิดีโอดั้งเดิม การประมวลผล Base64 ภายใน 5MB (สอดคล้องกับวิดีโอดั้งเดิมประมาณ 3.7MB) ค่อนข้างราบรื่น Base64 ที่เกิน 10MB อาจทำให้หน้าค้าง ไม่แนะนำให้ใช้วิธี Base64 กับวิดีโอขนาดใหญ่ แนะนำให้ใช้วิธีการอัปโหลดไฟล์แบบดั้งเดิมและการโหลด URL

ข้อมูลวิดีโอจะถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่? ความเป็นส่วนตัวปลอดภัยหรือไม่?

การถอดรหัสทั้งหมดดำเนินการในเบราว์เซอร์ของคุณในเครื่องโดยสมบูรณ์ผ่าน JavaScript ข้อมูลวิดีโอไม่อัปโหลดไปยังเซิร์ฟเวอร์ใดๆ และไม่มีการส่งคำขอเครือข่ายใดๆ หลังปิดหน้า ข้อมูลวิดีโอจะถูกลบออกจากหน่วยความจำของเบราว์เซอร์ทันที ไม่ทิ้งแคชหรือบันทึกใดๆ คุณสามารถตัดการเชื่อมต่อเครือข่ายแล้วใช้เครื่องมือนี้ได้ ฟังก์ชันถอดรหัสยังคงทำงานตามปกติ

เหตุใดวิดีโอหลังเข้ารหัส Base64 จึงใหญ่กว่าไฟล์ต้นฉบับ 1/3?

สิ่งนี้กำหนดโดยหลักการของการเข้ารหัส Base64 ไม่ใช่ปัญหาของเครื่องมือ Base64 เข้ารหัสข้อมูลไบนารีทุก 3 ไบต์ (24 บิต) ใหม่เป็นอักขระ ASCII 4 ตัว (แต่ละอักขระใช้ 1 ไบต์) ดังนั้นขนาดหลังเข้ารหัสจึงเป็น 4/3≈133% ของต้นฉบับ กล่าวคือขนาดเพิ่มขึ้นประมาณ 33% หากความยาวของข้อมูลดั้งเดิมไม่ใช่ผลคูณของ 3 ส่วนท้ายจะถูกเติมด้วยเครื่องหมาย = ขนาดที่เพิ่มขึ้นจริงประมาณ 33%-37% การเพิ่มขนาดนี้เป็นลักษณะทั่วไปของการเข้ารหัส Base64 ทั้งหมด ไม่ใช่ปัญหาของเครื่องมือนี้

เหตุใด MP4 Base64 ของฉันหลังถอดรหัสจึงเล่นไม่ได้?

MP4 เป็นเพียงรูปแบบคอนเทนเนอร์ การเข้ารหัสวิดีโอภายในต้องเป็นรูปแบบที่เบราว์เซอร์รองรับจึงจะเล่นได้ ใน 99% ของกรณี การเข้ารหัสวิดีโอไม่ใช่ H.264 หรือการเข้ารหัสเสียงไม่ใช่ AAC เช่น MP4 ภายในห่อหุ้มการเข้ารหัส H.265(HEVC), AV1 ฯลฯ เบราว์เซอร์อาจไม่สามารถเล่นได้ คุณสามารถใช้คำสั่ง FFmpeg ffmpeg -i input.mp4 เพื่อดูข้อมูลการเข้ารหัส หากไม่ใช่ H.264+AAC ให้ใช้คำสั่ง ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags +faststart output.mp4 แปลงรหัสแล้วจึงเข้ารหัสเป็น Base64 นอกจากนี้ยังต้องยืนยันว่า MIME type ถูกตั้งค่าเป็น video/mp4 ข้อมูล Base64 สมบูรณ์และไม่ถูกตัด

จะตรวจสอบได้อย่างไรว่าการเข้ารหัสวิดีโอของฉันเข้ากันได้กับเบราว์เซอร์?

แนะนำให้ใช้เครื่องมือ FFmpeg ตรวจสอบ: หลังติดตั้ง FFmpeg ให้ดำเนินการ ffmpeg -i yourvideo.mp4 ดูบรรทัด Video และ Audio ในข้อมูลเอาต์พุต บรรทัด Video ควรมี h264 (หรือ avc) บรรทัด Audio ควรมี aac ตัวอย่างเช่น: Stream #0:0(eng): Video: h264 (avc1/0x31637661...), Stream #0:1(eng): Audio: aac (mp4a/0x6134706D...) หากไม่ใช่การเข้ารหัสทั้งสองนี้ จำเป็นต้องแปลงรหัส คุณยังสามารถลากไฟล์วิดีโอดั้งเดิมไปที่หน้าต่างเบราว์เซอร์ Chrome โดยตรง หากเล่นได้โดยตรง แสดงว่าการเข้ารหัสเข้ากันได้กับเบราว์เซอร์

นามสกุลไฟล์วิดีโอที่ดาวน์โหลดหลังถอดรหัสคืออะไร?

เครื่องมือจะจับคู่นามสกุลไฟล์ที่ถูกต้องโดยอัตโนมัติตาม MIME type ที่คุณเลือก (หรือที่ตรวจพบโดยอัตโนมัติ): video/mp4 สอดคล้องกับ .mp4, video/webm สอดคล้องกับ .webm, video/ogg สอดคล้องกับ .ogv คุณไม่จำเป็นต้องแก้ไขนามสกุลด้วยตนเอง ไฟล์ที่ดาวน์โหลดสามารถเปิดได้โดยตรงด้วยโปรแกรมเล่นเริ่มต้นของระบบ

อักขระขึ้นบรรทัดใหม่และช่องว่างในสตริง Base64 มีผลต่อการถอดรหัสหรือไม่?

ไม่มีผล เครื่องมือจะจัดการอักขระว่างเช่น อักขระขึ้นบรรทัดใหม่(\n), อักขระคืนบรรทัด(\r), ช่องว่าง, แท็บในสตริง Base64 โดยอัตโนมัติ และจะลบอักขระเหล่านี้ก่อนถอดรหัส ดังนั้นแม้ว่า Base64 ของคุณจะอยู่ในรูปแบบหลายบรรทัด (เช่น รูปแบบ MIME ที่ขึ้นบรรทัดใหม่ทุก 76 อักขระ) หรือมีช่องว่างการจัดรูปแบบติดมาตอนคัดลอก ก็สามารถถอดรหัสได้ตามปกติ

ฟรอนต์เอนด์จะใช้ JavaScript เพื่อแปลง Base64 เป็นวิดีโอได้อย่างไร?

ลอจิกโค้ดหลักมีดังนี้: ①ลบคำนำหน้า Data URL เพื่อรับ Base64 บริสุทธิ์; ②ใช้ atob(base64Str) ถอดรหัสเป็นสตริงไบนารี; ③แปลงสตริงไบนารีเป็น Uint8Array (วนซ้ำแต่ละอักขระเพื่อรับ charCode); ④ใช้ new Blob([uint8Array], {type: 'video/mp4'}) สร้าง Blob; ⑤ใช้ URL.createObjectURL(blob) สร้าง URL ชั่วคราว; ⑥ตั้งค่า URL ให้กับ video.src ควรทราบว่าหลังใช้งานให้เรียก URL.revokeObjectURL(url) เพื่อปล่อยหน่วยความจำ หลีกเลี่ยงการรั่วไหลของหน่วยความจำ

วิดีโอ Data URL และวิดีโอ Blob URL มีความแตกต่างกันอย่างไร?

Data URL เขียนข้อมูล Base64 ทั้งหมดลงใน URL โดยตรง มีรูปแบบ data:video/mp4;base64,XXXX URL เองมีข้อมูลทั้งหมด; Blob URL คือการอ้างอิงชั่วคราวในรูปแบบ blob:// ที่สร้างโดย URL.createObjectURL() ซึ่งชี้ไปที่วัตถุ Blob ในหน่วยความจำของเบราว์เซอร์ URL เองสั้นมากและไม่มีข้อมูล Data URL ต้องแยกวิเคราะห์สตริง Base64 ทั้งหมดทุกครั้งที่ใช้งาน ประสิทธิภาพค่อนข้างแย่; Blob URL มีประสิทธิภาพมากกว่า เหมาะสำหรับการเล่นและการนำกลับมาใช้ใหม่ เครื่องมือนี้ภายในใช้วิธี Blob URL เพื่อใช้งานโปรแกรมเล่น

สถานการณ์ใดเหมาะที่จะใช้การเข้ารหัสวิดีโอ Base64? สถานการณ์ใดไม่เหมาะ?

สถานการณ์ที่เหมาะสม: ①วิดีโอสั้นภายในไม่กี่ MB (แอนิเมชันโหลด ข้อความแนะนำ แอนิเมชันไอคอน); ②Demo/เอกสารที่ต้องการฝังวิดีโอลงในไฟล์ HTML เดียว; ③ฝังวิดีโอขนาดเล็กในอีเมล์; ④ส่งต่อวิดีโอขนาดเล็กชั่วคราวเมื่อดีบักอินเทอร์เฟซ API สถานการณ์ที่ไม่เหมาะสม: ①วิดีโอที่เกิน 5MB (ขนาดเพิ่มขึ้น 33% สิ้นเปลืองแบนด์วิดท์มากเกินไป); ②วิดีโอที่ผู้ใช้อัปโหลด (ขนาดไม่สามารถควบคุมได้); ③วิดีโอยาวที่ต้องการการโหลดแบบสตรีมมิ่งหรือลากความคืบหน้า; ④วิดีโอที่ต้องการให้เบราว์เซอร์แคชเพื่อนำกลับมาใช้ใหม่ (Data URL ไม่สามารถแคชแยกต่างหาก); ⑤เนื้อหาวิดีโอสำหรับผู้ใช้ในสภาพแวดล้อมการผลิต (ควรใช้ CDN และ URL ไฟล์ภายนอก)

เหตุใดหลังถอดรหัสวิดีโอจึงเล่นได้ปกติบน Safari แต่กลับเล่นไม่ได้บน Chrome?

สถานการณ์นี้พบค่อนข้างน้อย โดยทั่วไปสาเหตุคือการเข้ารหัสวิดีโอ H.265(HEVC) — Safari รองรับ H.265 ได้ดีบน macOS และ iOS (มีการเร่งฮาร์ดแวร์) แต่ Chrome และ Firefox รองรับ H.265 อย่างจำกัด (ต้องการฮาร์ดแวร์และสัญญาอนุญาต) วิธีแก้ไขคือแปลงรหัสเป็นการเข้ารหัส H.264 ซึ่งเป็นการเข้ารหัสสากลที่ทุกเบราว์เซอร์รองรับ ในทางกลับกัน Chrome เล่นได้แต่ Safari เล่นไม่ได้เป็นเรื่องปกติมากกว่า โดยทั่วไปสาเหตุคือ Profile/Level การเข้ารหัสสูงเกินไปหรือ moov atom อยู่ที่ส่วนท้ายของไฟล์

การแปลงระหว่างวิดีโอ Base64 และไฟล์วิดีโอ จะสูญเสียคุณภาพภาพหรือไม่?

ไม่สูญเสียคุณภาพภาพ Base64 เป็นวิธีการเข้ารหัส ไม่ใช่การบีบอัดหรือแปลงรหัส มันเพียงทำการแปลงแบบแมปหนึ่งต่อหนึ่งระหว่างข้อมูลไบนารีและสตริงข้อความ เมื่อแปลงวิดีโอเป็น Base64 แล้วถอดรหัสกลับมา ข้อมูลไบนารีที่ได้รับจะเหมือนกับไฟล์วิดีโอดั้งเดิมทุกประการ (เหมือนกันทีละไบต์) จะไม่มีการสูญเสียคุณภาพภาพหรือเสียงใดๆ คล้ายกับการคัดลอกและวางไฟล์มากกว่าการแปลงแบบบีบอัด ตราบใดที่กระบวนการเข้ารหัสและถอดรหัส Base64 ถูกต้อง คุณภาพวิดีโอจะเหมือนกับไฟล์ต้นฉบับทุกประการ

การแก้ไขปัญหา

หลังถอดรหัส Base64 วิดีโอเล่นไม่ได้ HTML5 video แสดงรูปแบบไม่รองรับหรือหน้าจอดำ

ตั้งค่า MIME type ผิด: วิดีโอ MP4 ถูกตั้งค่าเป็น video/webm หรือประเภทอื่นที่ไม่ตรงกัน การเข้ารหัสวิดีโอไม่ใช่รูปแบบที่เบราว์เซอร์รองรับ: เช่น MP4 ภายในเป็นการเข้ารหัส H.265 แทนที่จะเป็น H.264 ข้อมูล Base64 ถูกตัดในระหว่างการคัดลอก ขาดส่วนเริ่มต้นหรือส่วนท้าย ทำให้ไฟล์เสียหาย การประมวลผลคำนำหน้า Data URL ผิดพลาด: ถอดรหัสคำนำหน้าเป็น Base64 ด้วย หรือลบอักขระเริ่มต้นของ Base64 โดยไม่ได้ตั้งใจเมื่อลบคำนำหน้า วิดีโอดั้งเดิมเสียหายเอง หรือเป็นรูปแบบพิเศษที่เบราว์เซอร์ไม่รองรับ ความละเอียดวิดีโอเกินขีดจำกัดของเบราว์เซอร์ หรือใช้รูปแบบพิกเซลที่เบราว์เซอร์ไม่รองรับ (เช่น 10-bit YUV) ส่วนหัวไฟล์วิดีโอ (ftyp atom) เสียหาย เบราว์เซอร์ไม่สามารถจดจำรูปแบบคอนเทนเนอร์ MP4 ได้

ฟังก์ชัน atob() ส่ง InvalidCharacterError การถอดรหัสล้มเหลว

สตริง Base64 มีอักขระผิดกฎหมาย: ชุดอักขระมาตรฐาน Base64 มีเฉพาะ A-Z, a-z, 0-9, +, /, = ทั้งหมด 65 อักขระ ไม่ได้ลบคำนำหน้า Data URL data:video/mp4;base64, ส่งไปยัง atob() โดยตรง มีอักขระว่างเช่น ขึ้นบรรทัดใหม่ \n, คืนบรรทัด \r, ช่องว่าง, แท็บปนอยู่ในสตริง เมื่อคัดลอกจาก Word/หน้าเว็บ ฯลฯ มีการนำเข้าเครื่องหมายวรรคตอนภาษาจีน อักขระเต็มความกว้าง หรืออักขระพิเศษที่มองไม่เห็น สตริง Base64 ถูกเข้ารหัส URL (เครื่องหมายบวก + กลายเป็น %2B, เครื่องหมายทับ / กลายเป็น %2F) จำเป็นต้องถอดรหัส URL ก่อน ความยาวสตริง Base64 ไม่ใช่ผลคูณของ 4 และการขาดอักขระเติม= ทำให้การตรวจสอบ atob ล้มเหลว ภาษาแบ็กเอนด์บางภาษา (เช่น Java, Python) ตัวเข้ารหัส Base64 ใช้ตัวแปรที่ปลอดภัยต่อ URL (ใช้ - และ _ แทน + และ /)

วิดีโอเล่นได้ปกติใน Chrome/Firefox แต่เล่นไม่ได้บน Safari

Safari มีข้อกำหนดที่เข้มงวดมากขึ้นสำหรับ Profile และ Level ของการเข้ารหัส H.264 การกำหนดค่าระดับสูงเช่น High Profile Level 5.1 อาจไม่รองรับ moov atom (ข้อมูลเมตา) ของไฟล์ MP4 อยู่ที่ส่วนท้ายของไฟล์แทนที่จะเป็นจุดเริ่มต้น Safari ต้องรอให้ดาวน์โหลดทั้งหมดก่อนจึงจะเล่นได้ การเข้ารหัสเสียงไม่ใช่ AAC Safari รองรับเสียงอื่นๆ เช่น MP3 ในคอนเทนเนอร์ MP4 ได้ไม่ดี ความละเอียดวิดีโอหรือบิตเรตสูงเกินไป เกินความสามารถในการถอดรหัสฮาร์ดแวร์ของ Safari (โดยเฉพาะ iOS Safari) ใช้คุณสมบัติการเข้ารหัสที่ Safari ไม่รองรับ เช่น ความลึกสี 10-bit คุณสมบัติ H.264 บางอย่าง iOS Safari กำหนดให้วิดีโอต้องตั้งค่าแอตทริบิวต์ playsinline จึงจะเล่นแบบอินไลน์ได้ มิฉะนั้นจะเป็นเต็มหน้าจอหรือเล่นไม่ได้ Safari มีข้อกำหนดเกี่ยวกับอัตราการสุ่มตัวอย่างแทร็กเสียง อัตราการสุ่มตัวอย่างที่ไม่ใช่มาตรฐาน (เช่น ไม่ใช่ 44.1kHz/48kHz) อาจทำให้การเล่นล้มเหลว

เมื่อถอดรหัสวิดีโอ Base64 ขนาดใหญ่หน้าค้าง เบราว์เซอร์ล่ม

JavaScript เป็นเธรดเดี่ยว การถอดรหัส atob() และการแปลง Uint8Array ดำเนินการบนเธรดหลัก บล็อกการแสดงผล UI ในระหว่างการถอดรหัส Base64 มีการสร้างสตริงและอาร์เรย์ขนาดใหญ่หลายตัว การใช้หน่วยความจำสูง (เมื่อถอดรหัส Base64 10MB การใช้หน่วยความจำสูงสุดอาจถึงหลายสิบ MB) การสร้าง Blob และ Object URL ก็ต้องใช้หน่วยความจำเช่นกัน วิดีโอขนาดใหญ่กระตุ้นขีดจำกัดหน่วยความจำของเบราว์เซอร์ได้ง่าย หน่วยความจำของอุปกรณ์มือถือมีขนาดเล็กกว่า เกิดการล่ม OOM (หน่วยความจำไม่เพียงพอ) ได้ง่าย ไม่ได้ใช้ Web Worker การดำเนินการทั้งหมดอยู่บนเธรดหลัก บล็อก event loop เบราว์เซอร์มีขีดจำกัดเกี่ยวกับความยาวสตริงเดี่ยว (เครื่องมือ V8 ประมาณ 512MB ถึง 1GB) สตริง Base64 ที่ยาวมากอาจไม่สามารถแยกวิเคราะห์ได้อย่างถูกต้อง การเก็บขยะ (GC) บ่อยครั้งในระหว่างการถอดรหัสยังทำให้หน้าค้างและตอบสนองล่าช้า

Base64 ที่คัดลอกจากการตอบสนอง API วิดีโอเสียหายหลังถอดรหัสเล่นไม่ได้

เมื่อแบ็กเอนด์ส่งคืน Base64 มีการหลบหนีอักขระพิเศษโดยอัตโนมัติ (เช่น + กลายเป็นช่องว่าง หรือปัญหาการหลบหนี JSON) เมื่อแยกวิเคราะห์ JSON ไม่ได้จัดการอักขระพิเศษในสตริง Base64 อย่างถูกต้อง เกิดข้อผิดพลาดในการเข้ารหัสเมื่อแบ็กเอนด์เข้ารหัส Base64 เช่น ประมวลผลข้อมูลไบนารีเป็นสตริง UTF-8 ข้อมูลถูกแก้ไขในระหว่างการบีบอัด gzip หรือการส่ง HTTP เมื่อคัดลอกจาก Chrome DevTools ตัวอย่าง Response ของแผง Network อาจตัดหรือหลบหนีสตริงยาว แบ็กเอนด์ใช้ตัวแปร Base64 ที่แตกต่างกัน (เช่น Base64 ที่ปลอดภัยต่อ URL ใช้ - และ _ แทน + และ /) แต่ฟรอนต์เอนด์ไม่ได้ประมวลผล การตอบสนอง API ถูกแบ่งหน้าหรือตัด ข้อมูล Base64 ไม่สมบูรณ์

วิดีโอมีเฉพาะภาพแต่ไม่มีเสียง หรือเสียงและภาพไม่ซิงโครไนซ์กัน

การเข้ารหัสเสียงไม่รองรับโดยเบราว์เซอร์: เช่น MP4 ใช้ MP3 หรือ Opus แทนที่จะเป็น AAC ตั้งค่าพารามิเตอร์เสียงไม่ถูกต้องเมื่อแปลงรหัสวิดีโอ ทำให้ไทม์สแตมป์ (PTS/DTS) ผิดพลาด ข้อมูล Base64 ไม่สมบูรณ์ ตัดข้อมูลบางส่วนของแทร็กเสียงพอดี วิดีโอมีอัตราเฟรมแปรผัน (VFR) เบราว์เซอร์บางรุ่นรองรับวิดีโอ VFR ได้ไม่ดี ทำให้เสียงและวิดีโอไม่ซิงโครไนซ์ วิดีโอดั้งเดิมมีปัญหาการซิงโครไนซ์เสียงและวิดีโอเอง ไม่ใช่เกิดจากการถอดรหัส Base64 อัตราการสุ่มตัวอย่างเสียงหรือจำนวนช่องสัญญาณไม่รองรับโดยเบราว์เซอร์ ทำให้การถอดรหัสแทร็กเสียงล้มเหลว ฐานเวลา (timebase) ของแทร็กเสียงและแทร็กวิดีโอในคอนเทนเนอร์วิดีโอไม่สอดคล้องกัน ทำให้เกิดออฟเซ็ตการซิงโครไนซ์เมื่อเล่น

อภิธานศัพท์

Base64: วิธีการเข้ารหัสที่ใช้ 64 อักขระที่พิมพ์ได้เพื่อแสดงข้อมูลไบนารี เข้ารหัสข้อมูลไบนารีทุก 3 ไบต์เป็นข้อความ ASCII 4 ไบต์ ขนาดเพิ่มขึ้นประมาณ 33% ใช้กันทั่วไปในการส่งข้อมูลไบนารีในโปรโตคอลข้อความ
Data URL: แบบแผน URI ที่กำหนดโดย RFC 2397 มีรูปแบบ data:[mediatype][;base64],data อนุญาตให้ฝังไฟล์ขนาดเล็กลงในเอกสารโดยตรง ไม่จำเป็นต้องมีคำขอ HTTP เพิ่มเติม
MIME type: ตัวระบุประเภทสื่อ ใช้เพื่อระบุรูปแบบของเอกสารหรือไฟล์ รูปแบบวิดีโอเริ่มต้นด้วย video/ เช่น video/mp4, video/webm, video/ogg เบราว์เซอร์ตัดสินใจว่าจะประมวลผลทรัพยากรอย่างไรตาม MIME type
Blob: Binary Large Object (ออบเจกต์ไบนารีขนาดใหญ่) วัตถุที่แสดงข้อมูลไบนารีดั้งเดิมที่ไม่สามารถเปลี่ยนแปลงได้ในเบราว์เซอร์ สามารถใช้เก็บข้อมูลไฟล์เช่น วิดีโอ รูปภาพ สร้าง URL ที่เข้าถึงได้ผ่าน URL.createObjectURL()
atob(): ฟังก์ชันที่มีอยู่ในเบราว์เซอร์ ใช้เพื่อถอดรหัสสตริงที่เข้ารหัส Base64 เป็นสตริงไบนารี (ASCII to Binary) ฟังก์ชันเข้ารหัสที่เกี่ยวข้องคือ btoa() (Binary to ASCII)
btoa(): ฟังก์ชันที่มีอยู่ในเบราว์เซอร์ ใช้เพื่อเข้ารหัสสตริงไบนารีเป็นสตริง Base64 (Binary to ASCII) เป็นการดำเนินการย้อนกลับของ atob() ใช้เมื่อแปลงวิดีโอเป็น Base64
Uint8Array: อาร์เรย์ประเภท JavaScript เก็บจำนวนเต็มไม่มีเครื่องหมาย 8 บิต (0-255) แต่ละองค์ประกอบสอดคล้องกับหนึ่งไบต์ เป็นวิธีมาตรฐานในการประมวลผลข้อมูลไบนารี หลังถอดรหัส Base64 จำเป็นต้องแปลงเป็น Uint8Array ก่อนสร้าง Blob
MP4: MPEG-4 Part 14 รูปแบบคอนเทนเนอร์มัลติมีเดียที่ใช้กันทั่วไป โดยทั่วไปห่อหุ้มการเข้ารหัสวิดีโอ H.264 และการเข้ารหัสเสียง AAC มีความเข้ากันได้กับเว็บดีที่สุด นามสกุลไฟล์คือ .mp4
WebM: รูปแบบคอนเทนเนอร์วิดีโอโอเพ่นซอร์สที่ไม่มีค่าลิขสิทธิ์ซึ่งเปิดตัวโดย Google โดยทั่วไปใช้การเข้ารหัสวิดีโอ VP8/VP9/AV1 และการเข้ารหัสเสียง Vorbis/Opus อัตราการบีบอัดดีกว่า MP4 รองรับได้ดีใน Chrome/Firefox/Edge
OGG: รูปแบบคอนเทนเนอร์มัลติมีเดียโอเพ่นซอร์สที่พัฒนาโดยมูลนิธิ Xiph วิดีโอโดยทั่วไปใช้การเข้ารหัส Theora เสียงใช้การเข้ารหัส Vorbis ปัจจุบันค่อยๆ ถูกแทนที่ด้วย WebM นามสกุลไฟล์คือ .ogv
H.264/AVC: มาตรฐานการเข้ารหัสวิดีโอที่ใช้กันอย่างแพร่หลายที่สุดในปัจจุบัน เรียกอีกอย่างว่า AVC (Advanced Video Coding) มีความสมดุลที่ดีระหว่างอัตราการบีบอัดและคุณภาพ รองรับการเร่งด้วยฮาร์ดแวร์ เป็นการเข้ารหัสวิดีโอมาตรฐานของคอนเทนเนอร์ MP4 เข้ากันได้กับเบราว์เซอร์ทั้งหมด
AAC: Advanced Audio Coding การเข้ารหัสเสียงขั้นสูง การเข้ารหัสเสียงมาตรฐานของคอนเทนเนอร์ MP4 เป็นผู้สืบทอดของรูปแบบ MP3 ไฟล์มีขนาดเล็กลงที่คุณภาพเท่ากัน รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมด
Object URL: URL ชั่วคราวที่สร้างผ่าน URL.createObjectURL(blob) มีรูปแบบ blob://... สามารถใช้โดยตรงสำหรับแอตทริบิวต์ src ของแท็กเช่น video/img ชี้ไปที่ข้อมูล Blob ในหน่วยความจำ จำเป็นต้องเรียก revokeObjectURL เพื่อปล่อยหลังใช้งาน
FFmpeg: เครื่องมือประมวลผลเสียงและวิดีโอโอเพ่นซอร์ส สามารถใช้สำหรับการแปลงรหัสวิดีโอ การตัดต่อ การดูข้อมูลการเข้ารหัส การบีบอัด ฯลฯ เป็นเครื่องมือมาตรฐานอุตสาหกรรมสำหรับการประมวลผลวิดีโอ จำเป็นสำหรับการตรวจสอบและแปลงการเข้ารหัสวิดีโอ
moov atom: อะตอมข้อมูลเมตาในไฟล์ MP4 ซึ่งมีข้อมูลสำคัญเช่น ระยะเวลาวิดีโอ ความละเอียด ข้อมูลการเข้ารหัส พารามิเตอร์ถอดรหัส ฯลฯ moov ต้องอยู่ที่จุดเริ่มต้นของไฟล์จึงจะเล่นได้อย่างรวดเร็ว แนะนำให้วางไว้ที่จุดเริ่มต้นสำหรับวิดีโอเว็บ (faststart)
รูปแบบคอนเทนเนอร์: รูปแบบไฟล์ที่ห่อหุ้มสตรีมวิดีโอ สตรีมเสียง คำบรรยาย ข้อมูลเมตา เช่น MP4, WebM, OGG, MKV รูปแบบคอนเทนเนอร์ไม่เท่ากับรูปแบบการเข้ารหัส คอนเทนเนอร์เดียวกันสามารถห่อหุ้มการเข้ารหัสที่แตกต่างกันได้
การเข้ารหัสวิดีโอ: อัลกอริทึมสำหรับการบีบอัดและคลายการบีบอัดข้อมูลวิดีโอ ที่พบบ่อย ได้แก่ H.264, H.265(HEVC), VP8, VP9, AV1 การเข้ารหัสกำหนดอัตราการบีบอัดและคุณภาพภาพ การเข้ารหัสที่เบราว์เซอร์รองรับกำหนดว่าวิดีโอสามารถเล่นได้หรือไม่
การดีบัก API: กระบวนการตรวจสอบความถูกต้องของข้อมูลเมื่อพัฒนาอินเทอร์เฟซฟรอนต์เอนด์และแบ็กเอนด์ เครื่องมือนี้สามารถใช้เพื่อดูตัวอย่างข้อมูลวิดีโอ Base64 ที่ API ส่งคืนได้อย่างรวดเร็ว ไม่จำเป็นต้องเขียนโค้ดถอดรหัสฟรอนต์เอนด์
Chrome DevTools: เครื่องมือสำหรับนักพัฒนาที่มีอยู่ในเบราว์เซอร์ Chrome แผง Network สามารถดูคำขอและการตอบสนอง API สามารถคัดลอกข้อมูลวิดีโอ Base64 จากที่นั่นเพื่อใช้ในการดีบัก
อักขระเติม =: ที่ส่วนท้ายของการเข้ารหัส Base64 อาจมีเครื่องหมายเท่ากับ 1 หรือ 2 ตัว ใช้เพื่อเติมความยาวของผลลัพธ์การเข้ารหัสให้เป็นผลคูณของ 4 การขาดการเติมเมื่อถอดรหัสอาจทำให้เกิดข้อผิดพลาด เครื่องมือสามารถซ่อมแซมปัญหาการเติมโดยอัตโนมัติ

ตารางเปรียบเทียบ MIME type วิดีโอเว็บและความเข้ากันได้

MIME type	รูปแบบคอนเทนเนอร์	การเข้ารหัสวิดีโอที่ใช้ทั่วไป	การเข้ารหัสเสียงที่ใช้ทั่วไป	ความเข้ากันได้กับเบราว์เซอร์	นามสกุลไฟล์
video/mp4	MP4 (MPEG-4 Part 14)	H.264/AVC, H.265/HEVC, AV1	AAC, MP3	เบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome/Firefox/Safari/Edge/iOS/Android) ชุดค่าผสม H.264+AAC เข้ากันได้ 100%	.mp4, .m4v
video/webm	WebM	VP8, VP9, AV1	Vorbis, Opus	Chrome/Firefox/Edge/Opera รองรับอย่างสมบูรณ์ Safari 14.1+ รองรับ iOS Safari 15+ รองรับบางส่วน	.webm
video/ogg	Ogg	Theora	Vorbis	Firefox/Chrome รุ่นเก่า/Opera รองรับ Safari ไม่รองรับ ปัจจุบันใช้น้อย	.ogv, .ogg
video/quicktime	QuickTime (MOV)	ProRes, H.264	AAC, PCM	ส่วนใหญ่ Safari/macOS รองรับ ความเข้ากันได้กับเบราว์เซอร์อื่นไม่ดี	.mov
video/x-matroska	Matroska	H.264, VP9, AV1, ฯลฯ	การเข้ารหัสต่างๆ	การรองรับเนทีฟของเบราว์เซอร์ไม่ดี โดยทั่วไปต้องใช้โปรแกรมเล่นของบุคคลที่สาม ไม่แนะนำสำหรับการใช้งานเว็บ	.mkv

รหัสข้อผิดพลาดทั่วไปในการถอดรหัสวิดีโอ Base64 และวิธีแก้ไข

อาการ/ข้อความผิดพลาด	สาเหตุที่เป็นไปได้	ทิศทางการตรวจสอบ	วิธีแก้ไข
atob() ผิดพลาด: InvalidCharacterError หรือ "not correctly encoded"	สตริง Base64 มีอักขระผิดกฎหมาย; ไม่ได้ลบคำนำหน้า Data URL; มีอักขระว่าง/ขึ้นบรรทัดใหม่	ตรวจสอบว่าสตริงอินพุตมีเฉพาะ A-Za-z0-9+/=; ยืนยันว่าได้ลบคำนำหน้า data: แล้ว	ลบคำนำหน้า data:video/...;base64,; ลบอักขระขึ้นบรรทัดใหม่ ช่องว่าง แท็บทั้งหมด; ตรวจสอบว่ามีอักขระพิเศษปนอยู่หรือไม่
ถอดรหัสสำเร็จแต่วิดีโอเล่นไม่ได้ แสดง"รูปแบบวิดีโอไม่รองรับ"	MIME type ผิด; การเข้ารหัสวิดีโอไม่รองรับโดยเบราว์เซอร์; ส่วนหัวไฟล์เสียหาย	ยืนยันว่า MIME type ตรงกับรูปแบบจริงของวิดีโอ; ใช้ FFmpeg ตรวจสอบข้อมูลการเข้ารหัส	เลือก MIME type ที่ถูกต้อง (MP4 ใช้ video/mp4); ใช้ FFmpeg แปลงรหัสเป็น H.264+AAC (MP4); ตรวจสอบว่าจุดเริ่มต้นและจุดสิ้นสุดของ Base64 สมบูรณ์หรือไม่
วิดีโอมีภาพแต่ไม่มีเสียง หรือมีเสียงแต่ไม่มีภาพ	การเข้ารหัสเสียงหรือวิดีโอหนึ่งในนั้นไม่รองรับโดยเบราว์เซอร์; แทร็กเสียงหรือแทร็กวิดีโอเสียหาย	ใช้ FFmpeg ดูว่าวิดีโอมีสตรีมใดบ้างและการเข้ารหัสของมันคืออะไร	MP4 ต้องเป็นวิดีโอ H.264+เสียง AAC; WebM ใช้ VP8/VP9+Vorbis/Opus; แปลงรหัสใหม่เป็นรูปแบบมาตรฐานที่เข้ากันได้
ภาพวิดีโอแตกเพี้ยน หน้าจอสีเขียว ตารางโมเสก	ข้อมูล Base64 ไม่สมบูรณ์ (ถูกตัด); ข้อมูลเสียหายในระหว่างถอดรหัส; คีย์เฟรมสูญหาย	เปรียบเทียบกับความยาว Base64 ดั้งเดิม ตรวจสอบว่าคัดลอกครบถ้วนหรือไม่	คัดลอกสตริง Base64 ทั้งหมดใหม่; ตรวจสอบว่ามีอักขระสูญหายในระหว่างการส่งหรือไม่; ยืนยันว่าไฟล์วิดีโอดั้งเดิมเองเป็นปกติ
ขนาดวิดีโอหลังถอดรหัสไม่ตรงกับไฟล์ต้นฉบับ	การประมวลผลอักขระเติม= ของ Base64 ผิดพลาด; ปัญหาการเข้ารหัสเมื่อแปลงสตริงไบนารีเป็น Uint8Array	ตรวจสอบว่าลอจิกถอดรหัสจัดการการเติมอย่างถูกต้องหรือไม่; ยืนยันว่าช่วง charCodeAt คือ 0-255	ตรวจสอบให้แน่ใจว่าเครื่องหมาย= ที่ส่วนท้ายของ Base64 ถูกจัดการอย่างถูกต้อง; ตรวจสอบว่าลอจิกการแปลง Uint8Array ถูกต้อง
เมื่อถอดรหัสวิดีโอขนาดใหญ่หน้าค้างไม่ตอบสนอง	การถอดรหัส Base64 ดำเนินการบนเธรดหลัก บล็อก UI; วิดีโอใหญ่เกินขีดจำกัดหน่วยความจำ	ดูขนาดของข้อมูล Base64 Base64 ที่เกิน 10MB (วิดีโอดั้งเดิมประมาณ 7.5MB) อาจทำให้ค้าง	ไม่แนะนำให้ใช้ Base64 กับวิดีโอขนาดใหญ่; พิจารณาใช้ Web Worker ถอดรหัสพื้นหลัง; ประมวลผลเป็นชิ้นๆ; เปลี่ยนเป็นวิธีการอัปโหลดไฟล์
Safari สามารถถอดรหัสได้แต่เล่นไม่ได้ Chrome ปกติ	Safari เข้มงวดมากขึ้นเกี่ยวกับการเข้ารหัสวิดีโอ; moov atom ไม่ได้อยู่ที่จุดเริ่มต้นของไฟล์; Profile/Level การเข้ารหัสสูงเกินไป	ใช้ FFmpeg ตรวจสอบ H.264 Profile และ Level; ตรวจสอบตำแหน่ง moov	เพิ่ม -movflags +faststart เมื่อแปลงรหัส; ใช้ H.264 Baseline/Main Profile Level ไม่เกิน 4.1; ยืนยันว่าเสียงเป็น AAC
ตั้งค่า Data URL ให้กับ video src โดยตรงแล้วเล่นไม่ได้	รูปแบบ Data URL ผิด; เขียน MIME type ผิด; ส่วน Base64 เสียหาย	ตรวจสอบว่ารูปแบบ Data URL เป็น data:video/xxx;base64,xxxx หรือไม่	ยืนยันว่า MIME type ถูกต้อง; จุลภาคเป็นจุลภาคอังกฤษ; ส่วน Base64 สมบูรณ์; อุปกรณ์มือถือบางรุ่นมีข้อจำกัดเกี่ยวกับขนาด Data URL

ตารางเปรียบเทียบขนาดวิดีโอดั้งเดิมและขนาดหลังเข้ารหัส Base64

ขนาดวิดีโอดั้งเดิม	ขนาดหลังเข้ารหัส Base64 (ประมาณ)	การเพิ่มขนาด	โอเวอร์เฮดส่วนหัว Data URL	เหมาะสำหรับการใช้งานอินไลน์หรือไม่	สถานการณ์ทั่วไป
100 KB	~133 KB	+33%	ประมาณ 20 ไบต์	แนะนำ	แอนิเมชันไอคอนขนาดเล็กมาก แอนิเมชันโหลดที่ไม่มีเสียงยาวไม่กี่วินาที
500 KB	~667 KB	+33%	ประมาณ 20 ไบต์	แนะนำ	แอนิเมชันวนซ้ำสั้น วิดีโอสั้นแจ้งการดำเนินงาน แอนิเมชันตอบสนองปุ่ม
1 MB	~1.33 MB	+33%	ประมาณ 20 ไบต์	ขึ้นอยู่กับสถานการณ์	วิดีโอแนะนำยาว 5-10 วินาที แอนิเมชันสาธิตความละเอียดต่ำ ระวังประสิทธิภาพหน้าแรก
2 MB	~2.67 MB	+33%	ประมาณ 20 ไบต์	ไม่แนะนำ	ใกล้ขีดจำกัดขนาดของวิดีโออินไลน์ จะเพิ่มเวลาโหลดหน้าอย่างมีนัยสำคัญ
5 MB	~6.67 MB	+33%	ประมาณ 20 ไบต์	ไม่แนะนำ	ขนาดใหญ่เกินไป ไม่แนะนำให้ใช้ Base64 อินไลน์ ใช้ไฟล์วิดีโอภายนอก
10 MB	~13.3 MB	+33%	ประมาณ 20 ไบต์	ห้าม	ส่งผลกระทบร้ายแรงต่อการโหลดหน้า อาจทำให้อุปกรณ์มือถือหน่วยความจำไม่พอและล่ม
50 MB	~66.7 MB	+33%	ประมาณ 20 ไบต์	ห้าม	อย่าใช้ Base64 ประมวลผลวิดีโอขนาดใหญ่เช่นนี้ ต้องใช้วิธีการอัปโหลด/โหลดไฟล์