HTML 5 điều khiển tùy chỉnh video

Question

Giống như nhiều nhà phát triển web, tôi mong muốn phát trực tuyến video sử dụng thẻ HTML 5 <video> mới. Hỗ trợ trình duyệt chắc chắn chưa đủ rộng, do đó, sử dụng Flash/SWF fallback là điều bắt buộc.

Điều này khiến tôi suy nghĩ: trong Flash, có thể tùy chỉnh cao các điều khiển phát lại (tạm dừng, phát, dừng, tìm kiếm, âm lượng, v.v.) trong HTML 5 ?. Có những tùy chọn nào để tùy biến hình tượng, biểu tượng và màu sắc của điều khiển video? Javascript có được yêu cầu không? Ví dụ trang sau làm cho các điều khiển khác nhau tùy thuộc vào trình duyệt - thử nghiệm sử dụng FF3.5, Chrome và Safari:

http://henriksjokvist.net/examples/html5-video/

Nó sẽ thực sự tuyệt vời để tùy chỉnh và chuẩn hóa các điều khiển trên các trình duyệt và thậm chí phù hợp với các điều khiển flash được sử dụng bởi các trình duyệt cũ hơn.

Answer 1

Trong spec HTML5, có một controlsattribute cho <video>.

Ngoài ra, hãy xem bài viết này: Video on the Web - Dive into HTML5. Nó giải thích:

Theo mặc định, phần tử sẽ không hiển thị bất kỳ loại điều khiển trình phát nào. Bạn có thể tạo các điều khiển của riêng mình với HTML, CSS và JavaScript cũ. Phần tử này có các phương thức như play() và pause() và thuộc tính read/write được gọi là currentTime. Ngoài ra còn có khối lượng đọc/ghi và thuộc tính tắt tiếng. Vì vậy, bạn thực sự có mọi thứ bạn cần để xây dựng giao diện của riêng bạn.

Nếu bạn không muốn xây dựng giao diện của riêng mình, bạn có thể yêu cầu trình duyệt hiển thị bộ điều khiển tích hợp sẵn. Để thực hiện việc này, chỉ cần bao gồm thuộc tính điều khiển trong thẻ của bạn.

Answer 2

Đoán của tôi là sự xuất hiện của các điều khiển phụ thuộc vào trình duyệt (và do đó không thể tùy chỉnh được). Bạn có thể xem trang thử nghiệm của mình trông như thế nào trong tất cả các trình duyệt bằng cách gửi tới Litmus.

Answer 3

YouTube hiện đang chạy phiên bản beta HTML5. Bạn có thể kích hoạt nó bằng cách truy cập http://www.youtube.com/html5. Hiện tại không phải tất cả Video đều được hiển thị trong HTML5 sau khi kích hoạt bản beta. Video được hiển thị trong HTML5 có hoạt ảnh tải khác nhau để bạn có thể xác định chúng (như thế này http://www.youtube.com/watch?v=KT1wdjlbyFc).

Như bạn có thể thấy trình phát video của họ trông giống như phiên bản flash.

Answer 4

Đối với những người quan tâm đến trình phát video HTML5 trình duyệt chéo tuyệt vời, hãy xem những gì Vimeo (http://vimeo.com) đang thực hiện. Truy cập bất kỳ video nào có trình duyệt hỗ trợ HTML5 (hoạt động với ít nhất Safari, Chrome và IE9) và chọn "Chuyển sang Trình phát HTML5".

Họ đã triển khai các điều khiển HTML tùy chỉnh sao chép đầy đủ giao diện và trình phát Flash của trình phát. Các điều khiển trông giống hệt nhau trên các trình duyệt.

Triển khai trình duyệt chéo tốt nhất mà tôi đã xem cập nhật. Họ thậm chí còn sử dụng phần tử <canvas> để tạo hoạt ảnh cho bộ chọn âm lượng.