Sprite video HTML5


8

Tôi hiện đang làm việc trên một dự án có yêu cầu tổng hợp linh hoạt nhiều nguồn video được đồng bộ hóa trên một khung vẽ. Nguyên mẫu ban đầu tôi ghép lại đã tải video vào HTMLVideoElements và sau đó sử dụng requestAnimFrame (thông qua shim của Paul Irish ) để vẽ chúng lên một khung vẽ duy nhất và duy trì đồng bộ hóa giữa các yếu tố khác nhau.

Mặc dù đây là chức năng và hệ thống có thể giữ đồng bộ hóa khá tốt (dung sai +/- 80ms) nhưng có vẻ không hiệu quả để nói. Tôi đã suy nghĩ về việc tối ưu hóa và một cách tiếp cận có vẻ khá đơn giản là kết hợp tất cả các phương tiện truyền thông thành một "video sprite" lớn hơn và phục vụ điều này. Điều này sẽ cho phép nó được tải vào một thành phần video duy nhất có thể được sử dụng trích xuất và hiển thị các khu vực phía khách hàng quan tâm bằng cách sử dụng drawImage()và loại bỏ nhu cầu quản lý đồng bộ giữa các nguồn.

Có ai khác thực hiện một cái gì đó tương tự trong quá khứ? Nếu vậy phương pháp nào làm việc tốt cho bạn?


1
+1 cho có lẽ là trang web cá nhân tốt nhất trên Lập trình viên.
yannis

Câu trả lời:


1

Bạn đã kiểm tra popcorn.js chưa?

Popcorn.js là một khung phương tiện HTML5 được viết bằng JavaScript cho các nhà làm phim, nhà phát triển web và bất kỳ ai muốn tạo phương tiện tương tác dựa trên thời gian trên web. Popcorn.js là một phần của dự án Popcorn của Mozilla.

http://popcornjs.org/


Đúng, tất cả trên bỏng ngô. Thật không may, tuy nhiên nó giải quyết một loạt các vấn đề khác nhau. Thách thức phải đối mặt trong dự án này là thực hiện với việc duy trì đồng bộ giữa một tập hợp các tài nguyên phương tiện có thể lựa chọn động.
Kim Burgess
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.