Gần đây, chúng tôi đang nghiên cứu việc sử dụng video thay vì hoạt ảnh và video thay vì hoạt ảnh sprite. Chúng tôi gọi đây là loại video tương tác video.
Hoạt ảnh sprite truyền thống: dung lượng đĩa lớn, tải xuống chậm, đặc biệt là phát lại trực tuyến, sẽ chậm hơn
Quá nhiều tệp, quá nhiều yêu cầu http khi chơi trực tuyến sẽ gây ra phản hồi chậm hoặc hoạt động bất thường. Do đó, nhu cầu cấp thiết là phải phát triển một bộ công nghệ để thay thế hoạt hình sprite bằng video. Chúng tôi gọi loại video này là video tương tác
Sự cố với video truyền thống:
1. Chỉ có thể chơi ở khu vực hình vuông
2. Dưới iPad, nó là một cửa sổ để chơi, và dưới iPhone, nó chỉ có thể chơi ở chế độ toàn màn hình.
3. Khi chơi chắc chắn sẽ xuất hiện hàng đầu
Video tương tác có các đặc điểm sau:
Dưới iPhone, không cần phát lại toàn màn hình, có thể phát ở một khu vực
Video tương tác có thể xuất hiện bên dưới các đối tượng đồ họa thông thường
Video tương tác có thể có mặt nạ để có thể xóa nền của video và có thể tích hợp video và các đối tượng đồ họa thông thường
Tóm tắt: Đối với video được sử dụng để phát, chúng tôi sẽ đặt nó là video truyền thống. Đối với những video cần sử dụng cho những mục đích cụ thể, chúng tôi đặt chúng là video tương tác. Nghiên cứu đã mang lại kết quả sơ bộ. Nhân tiện, nó tóm tắt các vấn đề thực tế gặp phải trong quá trình phát triển âm thanh và video của H5 di động trong vài năm tới và cung cấp các giải pháp của riêng mình. Hãy xem hiệu ứng thực tế cuối cùng: tương thích với PC (> IE9), iphone, ipad, Android 5.0
Giải quyết các vấn đề về thủ công, tự động và cửa sổ trên iPhone và nó có thể về cơ bản được sử dụng trong sản xuất thực tế. Bên phải là tệp video mp4 gốc, video bên trái thay thế hoạt ảnh, sau đó hỗ trợ hiệu ứng mặt nạ nền, có thể hiển thị bản đồ cơ sở và hỗ trợ một loạt các hoạt động tương tác
Âm thanh H5
Mỗi khi một đối tượng âm thanh được chuyển qua Âm thanh mới, một luồng mới có thể được nhìn thấy trên IOS.
Giải pháp: Đối tượng Âm thanh mới, bằng cách thay thế các địa chỉ âm thanh khác nhau, đạt được mục tiêu là không mở thêm luồng.
Hỗ trợ không tốt trên Android
Giải pháp: Sự cố trên phiên bản Android thấp hơn không được giải quyết. Nói chung, phát triển hỗn hợp có thể được xử lý bằng cách điều chỉnh giao diện bên dưới, chẳng hạn như phonegap
Không thể tự động phát trên iPhone
Giải pháp: Tự động phát lại trên iphone là một quá trình được thực hiện khi IOS được thiết kế. Nó dường như là để ngăn chặn hành vi trộm cắp tự động của giao thông.
Nói một cách đơn giản, nó cần được kích hoạt thủ công bằng cách mô phỏng người dùng, vì vậy chúng ta cần gọi đoạn mã này ngay từ đầu:
Sao chép mã
// Khắc phục sự cố trình duyệt ios không thể tự động phát âm thanh. Tạo âm thanh mới khi tải và thay thế src khi sử dụng nó.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = sai
var fixaudio = function () {
if (! isAudio) {
isAudio = đúng;
Xut.fix.audio = new Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Sao chép mã trên
Nếu bạn liên kết một mã như vậy với nội dung: hãy tạo một đối tượng âm thanh bằng cách kích hoạt nó theo cách thủ công, sau đó lưu nó vào chung
Khi sử dụng như sau:
Sao chép mã
// Nếu bạn sử dụng Xut.fix.audio để chỉ định src cho trình duyệt iOS, vui lòng tham khảo app.js để khởi tạo
nếu (Xut.fix.audio) {
âm thanh
=
Xut.fix.audio;
âm thanh.src = url;
} Else {
audio = new Audio (url);
}
âm thanh.autoplay = true;
audio.play ();
Đơn giản chỉ cần thay thế đối tượng âm thanh. Nói một cách đơn giản, nó phải là đối tượng được tạo bởi trình kích hoạt người dùng để chơi.
Âm thanh video H5
Thẻ video có thể hiếm khi được sử dụng trên thiết bị đầu cuối di động, hỗ trợ Android quá tệ, trực quan 5.0 là tốt hơn. Vấn đề cũ trên iPhone không chơi được tự động (Cứu dữ liệu, cứu chị em !!!), và mặc định là điều khiển toàn màn hình để chơi. Trong một thời gian dài, tôi đã bỏ qua việc xử lý video này. Android sử dụng lớp dưới cùng, iPhone trực tiếp sử dụng VideoJS, đèn flash tích hợp và công tắc h5, flash cũng có vấn đề về hỗ trợ. Một lúc trước, ông chủ có một yêu cầu. Chúng tôi đã áp dụng quá nhiều hoạt ảnh, tất cả chúng đều là hoạt ảnh kết hợp của các tuyến sprite, từ hàng trăm MB đến hàng trăm MB trong một ứng dụng, vì vậy cần có một giải pháp để nén hình ảnh. Giải pháp cuối cùng là sử dụng video thay vì hình ảnh động, vì công nghệ nén video đã được phát triển trong nhiều năm và đã rất trưởng thành. Bây giờ công nghệ nén video có thể dễ dàng chuyển đổi 720P. Phim độ nét cao, được nén xuống 10M / phút hoặc 160K / giây. Kích thước tệp của dãy ảnh nhỏ hơn ít nhất vài chục lần. Đồng thời, hầu hết các thiết bị đều hỗ trợ phần cứng giải nén video, do đó, CPU tiêu thụ video rất thấp, tiêu thụ pin cũng rất thấp và tốc độ phát lại cũng nhanh. Thậm chí có thể dễ dàng phát lại toàn màn hình 25 khung hình.
Kế hoạch đã hoàn thành và một số vấn đề cần giải quyết ở đây.
Toàn bộ video, bao gồm một số đối tượng trong video, có thể phản hồi lại các lần nhấp của người dùng, các trang trình bày và các thao tác khác trên iPhone, có thể phát trong một cửa sổ, có thể lọc bỏ nền và có thể được sử dụng như một ảnh PNG. Video thay thế hoạt ảnh và sau đó hỗ trợ hiệu ứng mặt nạ nền, có thể hiển thị hình ảnh cơ sở và cũng giải quyết vấn đề màn hình thủ công, tự động và không hoàn chỉnh
cửa sổ iphone
Giải pháp: Kết hợp xử lý thông qua canvas + thẻ video
Nguyên tắc: Lấy khung hình ảnh gốc của video và vẽ nó vào trang thông qua canavs
Ở đây mình trực tiếp đính kèm mã nguồn, mã viết chung chung nhưng nêu một vài điểm chính
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video thay vì hoạt ảnh
Điều này là một chút rườm rà. Nó cần phải tương tác và kéo canvas để đạt được mục đích kiểm soát hình ảnh. Tôi vẫn chưa viết xong tất cả, và nhu cầu chung của công ty sẽ không có cái này. Đây là mô tả ngắn gọn, nó cũng được xử lý bằng canvas + video, nhưng cần có một vùng chứa canvas được lưu trong bộ nhớ cache để thực hiện xử lý trước. Thông qua xử lý trước, lấy pixel của mỗi hình ảnh và bằng cách thay đổi giá trị của mỗi pixel RBG, nó có thể lọc ra nền để có thể sử dụng như hình ảnh PNG. Tôi sẽ viết nó sau và xuất bản nó ~~
sản phẩm khác của chúng tôi:
