Chà video HTML5

Question

Tôi đã tìm kiếm giải pháp mà tôi có thể "lọc" qua video HTML5. Tôi chưa tìm thấy và sắp bắt đầu viết của riêng tôi. Nhưng trước khi tôi làm điều đó, tôi nghĩ rằng nó sẽ làm cho một số ý nghĩa để chạy nó qua SO đầu tiên.

Trước khi chúng tôi nhận được vào cách tiếp cận của tôi, thấy điều này:

http://www.kokokaka.com/demo/bluebell_ss10/site

Trang web này dĩ nhiên được xây dựng trong Flash nhưng đóng vai trò như một ví dụ về những gì tôi muốn đạt được sử dụng HTML5.

Tôi đã thử nghiệm thuộc tính playbackRate (-1) trên thẻ video mà không có nhiều may mắn. Tôi nghi ngờ điều này là do mã hóa (ogg, mp4, vp8) phù hợp hơn để chuyển tiếp phát lại.

với điều này, tôi thấy hai cách tiếp cận có thể:

1. tạo hai video, một cho vở kịch về phía trước, và một cho ngược chơi. điều này tất nhiên tăng gấp đôi kích thước của bất kỳ video nào không lý tưởng.

2. chia video thành các khung hình jpg riêng lẻ và hoán đổi hình ảnh. Điều này có nghĩa là tôi không có âm thanh, nhưng trong ứng dụng cụ thể của tôi, đây không phải là một vấn đề.

Tôi cảm thấy tùy chọn thứ hai phù hợp nhất với ứng dụng cụ thể của tôi và cho phép phát lại linh hoạt. Bạn nghĩ sao?

Answer 1

tôi nghĩ rằng những gì bạn muốn có thể được thực hiện với popcornjs, có sẵn tại popcornjs.org

Answer 2

Tạo một loạt các hình thu nhỏ của video của bạn bằng bất kỳ phương tiện. Một khi bạn có tất cả các ngón tay cái của bạn từ video, bạn có thể sử dụng một cái gì đó như thế này, trong đó phát hiện chuyển động chuột và thay thế hình thu nhỏ dựa trên sự di chuyển - di chuột chà.

Ví dụ 1: http://codepen.io/simsketch/pen/gwJBRg

Ví dụ 2: http://jsfiddle.net/simsketch/x4ko1x1w/

hoặc một cái gì đó ít tiết, nếu bạn muốn theo chiều ngang nối tất cả các hình ảnh thu nhỏ thành một sprite, bạn có thể sử dụng điều này, một ví dụ đẹp của di chuột chà.

http://jsfiddle.net/simsketch/r6wz0nz6/152/

nhưng bạn sẽ cần phải ràng buộc sự kiện để mousedown thay vì mousemove

này không thực sự cung cấp cho bạn những hiệu quả mong muốn, do đó bạn sẽ cần phải kết hợp mousedown và mousemove như được gợi ý ở đây: https://stackoverflow.com/a/1572688/1579789

điều này phần nào sẽ cung cấp cho bạn hiệu ứng bạn đang tìm kiếm, nhưng không sử dụng video HTML5 và không có âm thanh. Tuy nhiên,

tuy nhiên, bạn cũng có thể thêm âm thanh nếu bạn liên kết chuyển động của chuột với mã thời gian trong bản âm thanh mà tôi giả sử. tại thời điểm đó, bạn có thể dễ dàng thao tác theo dõi video thay thế.