lnwshop logo
  • ตอบกระทู้
  • ตั้งกระทู้ใหม่
QUOTE 

สร้างประสบการณ์วิดีโอ 360 องศาข้ามแพลตฟอร์มที่นิวยอร์กไทม์ส - นิวยอร์กไทม์ส

culturedmaveric
culturedmaveric (Guest)
IP: 58.10.55.x
1 สัปดาห์ที่ผ่านมา
ในช่วง 2-3 เดือนที่ผ่านมาวิดีโอ 360 องศาได้รับแรงฉุดบนเว็บสมัยใหม่ในรูปแบบการเล่าเรื่องแบบใหม่ ๆ The New York Times มีเป้าหมายเพื่อให้ผู้อ่านได้รับความใกล้เคียงกับเรื่องราวมากที่สุดเท่าที่จะเป็นไปได้ ปีที่แล้วเราได้เปิดตัวแอป NYT VR ที่มีเนื้อหาพรีเมียมบน iOS และ Android เราเชื่อว่าการเล่าเรื่อง VR ช่วยให้เข้าใจสถานที่บุคคลหรือกิจกรรมได้ลึกขึ้นเดือนนี้เราได้เพิ่มการสนับสนุนวิดีโอ 360 องศาลงในผลิตภัณฑ์หลักของเราในเว็บเว็บบนอุปกรณ์เคลื่อนที่เว็บ Android และแพลตฟอร์ม iOS เพื่อมอบประสบการณ์อันน่าจดจำเพิ่มเติม ผู้สื่อข่าวจากทั่วโลกนำเสนอวิดีโอ 360 เรื่องใหม่ทุกวัน: คุณลักษณะหนึ่งที่เราเรียกว่า The Daily 360 สถานะปัจจุบันของวิดีโอ 360 บนเว็บ เราใช้ VHS, New York Times Video Player ของเราเพื่อเล่นเนื้อหาของเราทั้งบนเว็บและแพลตฟอร์ม Mobile Web สำหรับไม่กี่ปีที่ผ่านมา การสร้างการสนับสนุนวิดีโอ 360 บนแพลตฟอร์มดังกล่าวถือเป็นความท้าทายอย่างมาก แม้ว่าการสนับสนุน WebGL จะโตเต็มที่แล้วในปัจจุบัน แต่ยังคงมีปัญหาบางอย่างและกรณีขอบขึ้นอยู่กับแพลตฟอร์มและการใช้เบราว์เซอร์เพื่อหลีกเลี่ยงปัญหาเหล่านี้เราต้องใช้เทคนิคที่แตกต่างกันเล็กน้อย ประการแรกคือการใช้ "ผืนผ้าใบระหว่าง": เราวาดภาพวิดีโอลงในผืนผ้าใบและใช้ผืนผ้าใบเพื่อสร้างพื้นผิว อย่างไรก็ตามบางรุ่นของ Microsoft Internet Explorer และ Microsoft Edge จะไม่สามารถวาดเนื้อหาลงในผืนผ้าใบได้หากเนื้อหาถูกส่งจากโดเมนต่างๆ (เช่นเดียวกับที่เกิดขึ้นกับเครือข่ายการจัดส่งเนื้อหาหรือ CDN) แม้ว่าคุณจะมีแหล่งกำเนิดข้ามที่ถูกต้องก็ตาม แชร์ชุดทรัพยากร (CORS) เราตรวจสอบปัญหานี้และพบว่าเราสามารถใช้ประโยชน์จาก HTTP Live Streaming ผ่านการใช้ไลบรารีภายนอกที่เรียกว่า hls.js เพื่อหลีกเลี่ยงปัญหานี้Safari ยังมีข้อ จำกัด เช่นเดียวกันกับ CORS ดูเหมือนว่าจะเป็นปัญหาในกรอบสื่อต้นแบบเป็นเวลาหลายปีและในสถานการณ์สมมตินี้การแก้ปัญหา hls.js ไม่สามารถแก้ปัญหาได้ เราจัดการปัญหานี้ด้วยการรวมกันของสองเทคนิค:
  • การสร้าง iframe ที่มีโปรแกรมเล่นวิดีโอฝังอยู่
  • การใช้การดาวน์โหลดซ้ำแบบก้าวหน้าเช่น MP4 หรือ WebM บนโปรแกรมเล่นแบบฝัง
  • โดยการทำเช่นนี้เราหลีกเลี่ยงข้อผิดพลาดเนื้อที่วิดีโอ CORS เนื่องจากเนื้อหาและ iframe อยู่ในโดเมนเดียวกับ CDN และเราสามารถแสดงผู้เล่นในโดเมนหลักและเนื้อหาภายใน iframe ได้ผู้ใช้จำนวนมากของเราเห็นวิดีโอของเราจากภายในแอปโซเชียลมีเดียบนโทรศัพท์ของพวกเขา บน iOS แอปพลิเคชันเครือข่ายสังคมเหล่านี้เกือบทั้งหมดจะโหลดเนื้อหานอกไซต์ในเบราว์เซอร์ในแอปของตนเองแทนการใช้เบราว์เซอร์ดั้งเดิมซึ่งทำให้เกิดปัญหาทางเทคนิคที่ยาวนานขึ้น: ขาดการสนับสนุนวิดีโอการเล่นแบบอินไลน์แม้ใน iOS 10 เหตุการณ์นี้เกิดขึ้นเนื่องจากการสนับสนุนการเล่นแบบออฟไลน์ยังคงถูกปิดใช้งานโดยค่าเริ่มต้นในการดูเว็บปัญหาทางเทคนิคที่ระบุไว้ข้างต้นทฤษฎีพื้นฐานเกี่ยวกับวิธีการที่เราควรดูเนื้อหา 360 จะตรงไปตรงมา โดยทั่วไปมีสี่ขั้นตอนเพื่อใช้โซลูชันมุมมอง 360 แบบง่ายๆ: สี่ขั้นตอนเหล่านี้สามารถใช้งานได้โดยใช้ WebGL API แต่มีไลบรารี 3D เช่น three.js ที่ให้วิธีที่ง่ายกว่าในการใช้ renderers สำหรับ canvas , svg รับทำ SEO, CSS3D และ WebGL ตัวอย่างด้านล่างแสดงวิธีการหนึ่งที่สามารถใช้สี่ขั้นตอนที่อธิบายไว้ด้านบนเพื่อแสดงวิดีโอหรือภาพ 360: <iframe height = '599' scrolling = 'no' src = '// codepen.io/thiagopnts/embed/RRQVpa/?height=599&theme-id=dark&default-tab=result&embed-version=2' frameborder = 'no' allowtransparency = 'true' allowfullscreen = 'true' style = 'width: 100%;'> </iframe>เมื่อเราเริ่มทำงานเกี่ยวกับการสนับสนุนการเล่นวิดีโอ 360 บน VHS เป็นครั้งแรกเราได้ศึกษาโครงการบางส่วนและตัดสินใจใช้ห้องสมุด JavaScript ที่ชื่อว่า Kaleidoscope Kaleidoscope สนับสนุนวิดีโอและรูปภาพที่มีรูปแบบเหมือนกันทุกรูปแบบในเบราว์เซอร์ที่ทันสมัย ไลบรารีมีน้ำหนักเบาที่ใช้งานง่ายและใช้งานได้ง่ายขนาด 60 กิโลกรัม gzipped ฝังลงในโปรแกรมเล่นเมื่อเทียบกับโซลูชันอื่น ๆ ประสบการณ์แอปบนมือถือวิดีโอ 360 บน iOS และ Android การแก้ปัญหาการเล่นวิดีโอ 360 บน iOS และ Android เป็นสิ่งที่น่าสนใจและท้าทายเนื่องจากไม่มีไลบรารีวิดีโอที่ตอบสนองความต้องการของเราบนทั้งสองแพลตฟอร์ม ด้วยเหตุนี้เราจึงตัดสินใจที่จะใช้แนวทางที่แตกต่างกันสำหรับแต่ละแพลตฟอร์มสำหรับแอพพลิเคชันหลักของ iOS เราได้สร้างเฟรม Objective-C ขนาดเล็กที่ใช้วิธีการเดียวกับ Kaleidoscope ในตอนแรกเราเริ่มพิจารณาการพัฒนาโดยใช้ Metal และ OpenGL แต่เป็นโครงสร้างระดับล่างที่ต้องใช้การพัฒนาอย่างมีนัยสำคัญเพื่อสร้างฉากและจัดการกับวัตถุ 3Dโชคดีที่มีตัวเลือกอื่น: SceneKit เป็นเฟรมระดับสูงกว่าที่ช่วยให้สามารถจัดการและแสดงผลเนื้อหา 3D ในแอป iOS พื้นเมืองได้ การตรวจสอบพบว่า SceneKit มีประสิทธิภาพในการเล่นที่เพียงพอดังนั้นเราจึงเลือกที่จะใช้เพื่อสร้างภาพและกล้องที่จำเป็นสำหรับการเล่นวิดีโอ 360 องศาเราจำเป็นต้องแยกเฟรมของเฟรมวิดีโอลงในพื้นผิว 2D เพื่อใช้เป็นวัสดุสำหรับทรงกลมและในการทำเช่นนั้นเราได้ตัดสินใจที่จะใช้ SpriteKit SpriteKit เป็นกรอบกราฟิกที่มีประสิทธิภาพ 2D ที่ใช้กันโดยทั่วไปในเกม 2D iOS กรอบการเล่นของเราใช้อินสแตนซ์ iOS AVPlayer มาตรฐานสำหรับการเล่นวิดีโอและใช้ SpriteKit เพื่อแสดงวิดีโอลงในทรงกลม ในที่สุดเราจะผูกการโต้ตอบของผู้ใช้และการเคลื่อนไหวของอุปกรณ์เพื่อควบคุมการเคลื่อนไหวของกล้องโดยใช้โปรแกรมรู้จำลายเส้นของ iOS และ API การเคลื่อนไหวของอุปกรณ์ โดยการใช้เครื่องมือเหล่านี้เราสามารถสร้างกรอบภาพวิดีโอ 360 แบบที่คล้ายกับ Kaleidoscope เราเรียกว่า NYT360-Video และเรายินดีที่จะประกาศว่าเรากำลังเปิดกรอบการจัดหาบนแพลตฟอร์ม Android เราได้ทำการประเมินอย่างละเอียดเกี่ยวกับไลบรารีโอเพ่นซอร์สบางรุ่นที่สนับสนุนวิดีโอและภาพ 360 และหลังจากการสร้างต้นแบบครั้งแรกทีม Android ได้ตัดสินใจที่จะใช้ Google VR SDK แอป Android ของ NYTimes ทำงานบนอุปกรณ์ต่างๆและเวอร์ชันระบบปฏิบัติการแอนดรอยด์และ Google VR SDK มีคุณลักษณะและความสามารถที่เราต้องการและ API แบบง่ายๆที่ให้การผสานรวมที่ค่อนข้างง่ายGoogle VR SDK มีวิวัฒนาการค่อนข้างมากตั้งแต่วันที่เราเริ่มทำงานร่วมกันและทีมงาน Google VR ได้ลงทุนโครงการนี้เป็นระยะเวลานาน ในระหว่างนี้เราได้ทำงานร่วมกับ Google เกี่ยวกับคำขอคุณลักษณะและการแก้ไขข้อบกพร่องและการทำงานร่วมกันดังกล่าวทำให้เรามั่นใจว่าเราได้ตัดสินใจที่ถูกต้อง การผสานรวมทำงานตามที่เราคาดหวังและขณะนี้เรามีประสบการณ์วิดีโอ 360 แบบที่น่าสนใจบน Android อนาคตของการเข้ารหัสวิดีโอและการเล่นวิดีโอ 360 ที่ The New York Times เรากำลังตรวจสอบวิธีใหม่ในการเข้ารหัสและเล่นวิดีโอ 360 เพื่อเพิ่มประสิทธิภาพและปรับปรุงประสบการณ์ของผู้ใช้ เรารู้สึกตื่นเต้นที่จะสำรวจคุณลักษณะที่น่าสนใจอื่น ๆ เช่นเสียงเชิงพื้นที่ภาพสเตอริโอและวิดีโอด้านการแปลงรหัสวิดีโอเรากำลังสำรวจการใช้แผนผังรูปลูกบาศก์ซึ่งจะหลีกเลี่ยงการใช้รูปแบบ equirectangular เพื่อเพิ่มประสิทธิภาพในการใช้พื้นที่มากขึ้น ในทางทฤษฎีเราสามารถลดบิตเรตที่ใช้กับวิดีโอได้ประมาณ 20 เปอร์เซ็นต์ขณะเดียวกันก็รักษาคุณภาพไว้เหมือนกัน ด้านล่างนี้คุณสามารถดูตัวอย่างพื้นฐานที่เราสามารถสนับสนุนการเล่นวิดีโอ 360 ที่เข้ารหัสด้วยแผนที่ลูกบาศก์: <iframe height = '810' เลื่อน = 'ไม่' src = '// codepen.io/thiagopnts/embed/dXdagG/?height=810&theme-id=dark&default-tab=result&embed-version=2' frameborder = 'ไม่' allowtransparency = 'true' allowfullscreen = 'true' style = 'width: 100%;'> </iframe> การใช้แผนผังรูปลูกบาศก์เป็นวิธีการที่ซับซ้อนกว่าการใช้แผนผัง equirectangular เพราะมันจะไม่เพียง แต่ต้องการเปลี่ยนเครื่องเล่นวีดีโอของเรา แต่ก็เป็นวิธีที่เราแปลงรหัสวิดีโอของเราด้วย เมื่อต้นปีที่ผ่านมาเฟสบุ๊คได้เปิดตัวโครงการ Transform ซึ่งเป็นตัวกรอง FFmpeg ที่แปลงวิดีโอ 360 ให้เป็นรูปสี่เหลี่ยมผืนผ้าในแผนผังรูปลูกบาศก์ เรากำลังตรวจสอบวิธีการรวมข้อมูลนี้เข้ากับท่อวิดีโอของเรา เรายังเปิดการจัดหาการเข้ารหัสวิดีโอ ค่าที่ตั้งไว้ล่วงหน้าที่เราใช้ในการแปลงรหัสวิดีโอ 360 ทั้งหมดของเรา เราหวังว่าจะได้รับคำติชมที่สำคัญและสร้างผลงานจากชุมชนโอเพนซอร์สที่ใหญ่ คุณสามารถถามคำถามผ่าน GitHub Issues ในแต่ละโครงการได้ เช็คเอาท์:
    github.com/NYTimes/ios-360-videos
    github.com/NYTimes/video-presets
    1
    แสดงความคิดเห็นที่ 0-0 จากทั้งหมด 0 ความคิดเห็น
    ข้อความ
    ชื่อผู้โพส
    ข้อมูลสำหรับการติดต่อกลับ (ไม่เปิดเผย เห็นเฉพาะเจ้าของร้าน)
    อีเมล
    เบอร์มือถือ
    • ตอบกระทู้

    เว็บบอร์ดล่าสุด

    สถิติการเข้าชม

    ผู้ชมทั้งหมด90,470 ครั้ง
    เปิดร้าน22 มิ.ย. 2558
    ร้านค้าอัพเดท27 ก.ค. 2560

    MEMBER

    เข้าสู่ระบบด้วย
    เข้าสู่ระบบ
    สมัครสมาชิก

    ยังไม่มีบัญชีเทพ สร้างบัญชีใหม่ ไม่เกิน 5 นาที
    สมัครสมาชิก (ฟรี)

    CONTACT US

    081-6851823, 083-2991246
    facebook
    Go to Top