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