History Storyteller Map

เจ้าของผลงานเล่าไว้แบบนี้

https://history-storyteller-map.vercel.app # แผนที่เป็นเวทีของเหตุการณ์ — History Storyteller Map เอนจิ้นเล่าเรื่องประวัติศาสตร์บนแผนที่ดาวเทียมจริง: ป้อนสคริปต์ฉาก (พิกัด/แผนกล้อง/บทพากย์) เว็บจัดกล้อง หมุด เส้นทาง เอฟเฟกต์ และเสียงพากย์จริงให้เองตามจังหวะ ## สถานะปัจจุบัน — ครบทั้ง 3 พาทตามแผน **พาท 1 — UX/UI พื้นฐาน** - เต็มจอตามขนาดจอจริงเสมอตอนแก้ไข (คอม/มือถือ/แท็บเล็ตขนาดไหนก็ได้) — ไม่ผูกสัดส่วนวิดีโอจนกว่าจะกด "บันทึกวิดีโอ" - แผงนำเข้าสคริปต์ซีน วางข้อมูลทีละแถวหรือไฟล์ Excel - เส้นเวลาฉากด้านล่าง คลิกกระโดดไปแต่ละฉาก สีบอกแผนกล้อง - หมุดไอคอน+ป้ายชื่อ, เส้นทางโค้งพร้อมหัวลูกศรระหว่างฉาก - insert-overlay (กล่องภาพลอย PiP) แยกจาก cut-to-insert (เต็มจอ) - ป้ายแบรนด์/วอเตอร์มาร์ก ตั้งชื่อย่อ+มุมได้ **พาท 2 — แผนที่จริง** - MapLibre GL JS บนภาพถ่ายดาวเทียม Esri World Imagery (ฟรี ไม่ต้องใช้คีย์) - ทุกฉากมีพิกัด lat,lng จริง กล้องเคลื่อนที่ด้วย `flyTo`/`easeTo` ตามแผนกล้อง 7 แบบ (รวม orbit หมุนกล้องจริงด้วย bearing) - หมุด/เส้นทาง/ลูกศรผูกกับพิกัดจริงผ่าน `maplibregl.Marker` และ geojson line layer - เอฟเฟกต์เหตุการณ์ (พายุ/ไฟ/รบ) เป็นสติ๊กเกอร์ปักบนพิกัดจริง - ดาวน์โหลดเทมเพลต Excel และนำเข้าไฟล์ .xlsx ได้ (SheetJS) **พาท 3 — เสียงพากย์จริง** - เชื่อม edge-tts ผ่าน `server.py` (proxy ในเครื่อง เพราะเบราว์เซอร์เรียก edge-tts ตรงไม่ได้) - กดเล่น → พากย์เสียงจริงทีละฉาก ความยาวจริงของเสียงมาแทนค่าประมาณวินาทีที่กรอกไว้ (อัปเดตบนเส้นเวลาสด) - แบ่งซับไตเติลหลายช่วงในฉากเดียวด้วย `;;` ในช่องสคริปต์ — แต่ละช่วงพากย์แยกกันแล้วเล่นต่อเนื่อง ซับไตเติลสลับตามจริง - ปุ่ม "บันทึกวิดีโอ" ใช้ `getDisplayMedia` + `MediaReco

โดย Tube2322 · ดูโพสต์ต้นทาง