ล่าสุด เรากำลังศึกษาการใช้วิดีโอเพื่อแทนที่แอนิเมชัน และการใช้วิดีโอเพื่อแทนที่แอนิเมชันสไปรท์ เราเรียกวิดีโอประเภทนี้ว่าวิดีโอแบบโต้ตอบ
แอนิเมชั่นสไปรท์แบบดั้งเดิม:ดังนั้นจึงมีความจำเป็นเร่งด่วนในการพัฒนาชุดเทคโนโลยีเพื่อแทนที่แอนิเมชั่นสไปรท์ด้วยวิดีโอ เราเรียกวิดีโอแบบโต้ตอบประเภทนี้ว่า
ปัญหาเกี่ยวกับวิดีโอแบบเดิม:การวิจัยได้ผลลัพธ์ในขั้นต้น อย่างไรก็ตาม ฉันจะสรุปปัญหาเชิงปฏิบัติที่พบในเสียงและวิดีโอระหว่างการพัฒนา Mobile H5 ในช่วงไม่กี่ปีที่ผ่านมาและให้แนวทางแก้ไขของฉันเอง
ดูเอฟเฟกต์จริงขั้นสุดท้าย: เข้ากันได้กับพีซี (>IE9), iPhone, iPad, Android 5.0
มันแก้ปัญหาของระบบแมนนวล อัตโนมัติ หน้าต่าง ฯลฯ บน iPhone และโดยทั่วไปสามารถนำไปใช้ในการผลิตจริงได้
ทางด้านขวาคือไฟล์วิดีโอ mp4 ต้นฉบับ
วิดีโอทางด้านซ้ายจะแทนที่ภาพเคลื่อนไหวและรองรับเอฟเฟกต์มาสก์พื้นหลัง ซึ่งสามารถเปิดเผยภาพฐานและรองรับการดำเนินการแบบโต้ตอบได้หลายชุด
H5 ออดิโอออดิโอทุกครั้งที่ออบเจ็กต์เสียงถูกส่งผ่านเสียงใหม่ คุณจะเห็นว่าเธรดใหม่จะถูกสร้างขึ้นบน IOS ซึ่งน่าขยะแขยง
วิธีแก้ไข: ใช้ออบเจ็กต์เสียงใหม่เพื่อให้บรรลุวัตถุประสงค์ในการไม่เปิดเธรดเพิ่มเติมโดยการแทนที่ที่อยู่เสียงอื่น
การสนับสนุนที่ไม่ดีบน Androidวิธีแก้ไข: ปัญหาใน Android เวอร์ชันต่ำกว่าไม่ได้รับการแก้ไข โดยทั่วไป ในการพัฒนาแบบไฮบริด อินเทอร์เฟซพื้นฐานสามารถปรับได้ เช่น phonegap
ไม่สามารถเล่นอัตโนมัติบน iPhoneวิธีแก้ไข: การเล่นอัตโนมัติบน iPhone เป็นกระบวนการที่ทำเมื่อ IOS ได้รับการออกแบบ ดูเหมือนว่าจะป้องกันการโจรกรรมข้อมูลการรับส่งข้อมูลโดยอัตโนมัติ
พูดง่ายๆ ก็คือ คุณต้องจำลองผู้ใช้เพื่อทริกเกอร์มันด้วยตนเอง ดังนั้นเราจึงต้องเรียกโค้ดส่วนนี้ในตอนต้น:
นี่มาจากโครงการของฉัน ฉันเพิ่งหักมันไป
//แก้ไขปัญหาที่เบราว์เซอร์ iOS ไม่สามารถเล่นเสียงได้โดยอัตโนมัติเมื่อโหลดและแทนที่ src เมื่อใช้งาน Xut.fix = Xut.fix||{};if (Xut.plat.isBrowser && Xut. plat. isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; Xut.fix.audio = เสียงใหม่(); document.removeEventListener('touchstart', fixaudio, false);}หากคุณผูกโค้ดดังกล่าวเข้ากับเนื้อหา ให้สร้างออบเจ็กต์เสียงผ่านการทริกเกอร์ด้วยตนเอง จากนั้นบันทึกไว้ในโกลบอล
เมื่อใช้งานจะเป็นดังนี้
// หากคุณใช้ Xut.fix.audio เพื่อระบุการเริ่มต้น src สำหรับเบราว์เซอร์ iOS โปรดดู app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url;} else { audio = new เสียง(url );}audio.autoplay = true;audio.play();เพียงแทนที่ออบเจ็กต์เสียงโดยตรง หากจะถูกสร้างขึ้นโดยอัตโนมัติ จะต้องเป็นออบเจ็กต์ที่ผู้ใช้กระตุ้นจึงจะเล่นได้
เสียงวิดีโอ H5แท็กวิดีโออาจไม่ค่อยได้ใช้กับอุปกรณ์เคลื่อนที่ การรองรับ Android นั้นแย่มาก ปรับปรุงใน 5.0 เท่านั้น
ปัญหาเก่าบน iPhone คือไม่สามารถเล่นได้อัตโนมัติ (บันทึกข้อมูล บันทึกน้องสาวของคุณ!!!) และค่าเริ่มต้นคือการเล่นแบบเต็มหน้าจอ
ฉันเพิกเฉยต่อการประมวลผลวิดีโอนี้มานานแล้ว Android ใช้เลเยอร์ด้านล่างและ iPhone ก็ใช้ VideoJS โดยตรง มันมีแฟลชในตัวและการสลับ h5 ก็มีปัญหาเช่นกัน
เมื่อไม่นานมานี้ เจ้านายของฉันมีคำขอ เรามีแอนิเมชั่นแอปพลิเคชันมากเกินไป ซึ่งทั้งหมดเป็นแอนิเมชั่นผสมของสไปรท์รูท
จึงมีความจำเป็นเร่งด่วนในการแก้ปัญหาการบีบอัดภาพ
วิธีแก้ปัญหาสุดท้ายคือการใช้วิดีโอแทนแอนิเมชั่น เนื่องจากเทคโนโลยีการบีบอัดวิดีโอได้รับการพัฒนามาหลายปีและมีความเป็นผู้ใหญ่มาก เทคโนโลยีการบีบอัดวิดีโอในปัจจุบันสามารถบีบอัดภาพยนตร์ความละเอียดสูง 720P เป็น 10M/นาที หรือ 160K/วินาที ได้อย่างง่ายดาย มันมีขนาดเล็กกว่าขนาดไฟล์ของลำดับภาพอย่างน้อยหลายสิบเท่า ในเวลาเดียวกัน อุปกรณ์ส่วนใหญ่รองรับการบีบอัดวิดีโอด้วยฮาร์ดแวร์ ด้วยวิธีนี้ การใช้ CPU ในการเล่นวิดีโอจึงต่ำมาก การใช้แบตเตอรี่ก็ต่ำมากเช่นกัน และความเร็วในการเล่นยังคงเร็ว แม้แต่การเล่นแบบเต็มหน้าจอที่ 25 เฟรมก็ทำได้อย่างง่ายดาย
หลังจากสรุปแผนแล้ว ปัญหาบางอย่างก็ต้องได้รับการแก้ไข
1. วิดีโอทั้งหมด รวมถึงวัตถุบางอย่างในวิดีโอ สามารถตอบสนองต่อการคลิกของผู้ใช้ สไลด์ และการดำเนินการอื่นๆ
2. ภายใต้ iPhone คุณสามารถเล่นในหน้าต่างได้
3. ความสามารถในการกรองพื้นหลังเพื่อให้สามารถใช้เป็นภาพ PNG ได้
เอฟเฟกต์จริงขั้นสุดท้ายจะแสดงในภาพเคลื่อนไหว GIF เริ่มต้นด้วย:
วิดีโอแทนที่ภาพเคลื่อนไหวและรองรับเอฟเฟกต์การมาสก์พื้นหลัง ซึ่งสามารถเปิดเผยภาพพื้นฐานได้
ในเวลาเดียวกัน มันยังแก้ไขปัญหาของโหมดแมนนวล อัตโนมัติ และไม่เต็มหน้าจอด้วย
หน้าต่าง iphoneสารละลาย:
ประมวลผลผ่านการรวมแท็ก Canvas + วิดีโอ
หลักการ: รับเฟรมดั้งเดิมของวิดีโอแล้ววาดไปที่หน้าผ่าน canavs
ที่นี่ฉันแนบซอร์สโค้ดโดยตรง โดยทั่วไปโค้ดจะถูกเขียน แต่มีการเน้นประเด็นสำคัญหลายประการ
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
วิดีโอแทนภาพเคลื่อนไหวนี่ค่อนข้างลำบากนะ คุณต้องโต้ตอบและลากผืนผ้าใบเพื่อควบคุมรูปภาพ ฉันยังเขียนไม่เสร็จทั้งหมด ความต้องการของ บริษัท ทั่วไปจะยังไม่มีคำอธิบายง่ายๆ เลย วิดีโอ แต่จำเป็นต้องมี มีคอนเทนเนอร์แคนวาสที่แคชไว้สำหรับการประมวลผลล่วงหน้า โดยจะได้รับพิกเซลของแต่ละภาพ โดยการเปลี่ยนค่า RBG ของแต่ละพิกเซล พื้นหลังจึงสามารถกรองออกเพื่อให้สามารถใช้งานได้เหมือน PNG รูปภาพ ในอนาคตมันถูกเขียน มาเผยแพร่กันเถอะ~~
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network