Thêm javascript điều khiển video
Đặc tả HTML5 đã giới thiệu phần tử 2, có thể được sử dụng để nhúng nội dung video vào các trang web và được hỗ trợ tốt trên các trình duyệt hiện đại. Trong bài đăng này, chúng ta sẽ tìm hiểu cách nhúng trình phát video HTML5 vào tài liệu HTML và xác định các điều khiển tùy chỉnh cho nó độc lập với mặc định của trình duyệt Đây là một liên kết đến bản demo CodeSandbox Thiết lập dự ánChạy lệnh sau để tạo ba tệp. 3, 4, 5 trong một thư mục có tên là 6 sao chép Để nhúng trình phát video vào ứng dụng của chúng tôi, hãy thêm phần sau vào tệp 3 của chúng tôi sao chép Trong đoạn mã trên, chúng tôi đã hiển thị phần tử 8. Bạn có thể thêm video từ máy tính cục bộ của mình vào thuộc tính 9 hoặc sử dụng liên kết Cloudinary mặc định được sử dụng trong mã. Đặc tả HTML5 hiện hỗ trợ ba định dạng video, nhưng chúng tôi đã sử dụng nhiều thẻ 2 để cung cấp hai định dạng của cùng một video trong MP4 và WebM. Ngoài ra, chúng tôi đã chỉ định nội dung được xác định trước sẽ được hiển thị cho tác nhân người dùng không hỗ trợ phần tử 1 Thẻ 1 cũng chấp nhận một số thuộc tính gốc tùy chọn, chẳng hạn như 3, hiển thị giao diện điều khiển trình phát tiêu chuẩn khi được chỉ định hoặc đặt thành true. Nhấp để tìm hiểu thêm về các thuộc tính khác Trước khi tiếp tục, hãy thêm một số kiểu để ứng dụng của chúng ta có giao diện đẹp. Điền tệp 4 của bạn với các kiểu từ liên kết CodeSandbox này. Nếu bạn xem trước trang trong trình duyệt của mình, bạn sẽ thấy trình phát video được nhúng như bên dưới Tùy chỉnh Trình phát videoTrước khi tùy chỉnh trình phát video, chúng ta cần xóa thuộc tính 3, thuộc tính hiển thị các điều khiển video như 6, 7, v.v. , sau đó xây dựng các điều khiển tùy chỉnh của chúng tôi. Cập nhật phần tử 2 trong tệp 3 của bạn như hình bên dưới sao chép Nếu bạn kiểm tra trình duyệt của mình, bạn sẽ thấy trình phát không tương tác Chuyển đổi Trạng thái Tạm dừng/PhátĐể thêm chức năng tạm dừng và phát cho trình phát của chúng tôi, hãy cập nhật tệp 3 của chúng tôi với nội dung sau sao chép Thêm phần sau vào tệp 5 của bạn với phần sau để thêm một số tương tác sao chép Chúng tôi đã bắt đầu bằng cách chọn phần tử 1, cho phép truy cập vào các thuộc tính và phương thức của video. Sau đó, chúng tôi đã chọn phần tử 3 và thêm một trình xử lý sự kiện vào phần tử đó để kích hoạt hàm 4 khi nhấp vào. Hàm 4 thực thi một điều kiện chuyển đổi phát hoặc tạm dừng video dựa trên trạng thái hiện tại của video Tiếp theo, chúng tôi đã thêm trình xử lý sự kiện 6 và 7 vào phần tử 1 gọi hàm 9, hàm này cập nhật dựa trên trạng thái của video Sau đó, bạn sẽ có thể tạm dừng và phát video bằng cách nhấp vào nút hoặc chính video đó Triển khai thanh tiến trìnhĐể thêm thanh tiến trình cập nhật video khi phát, hãy cập nhật tệp 3 của bạn với thông tin sau sao chép Để làm cho thanh tiến trình có tính tương tác, hãy cập nhật tệp 5 của bạn để trông như thế này sao chép Chúng tôi đã chọn phần tử DOM của thanh tiến trình và thêm một trình lắng nghe sự kiện vào đối tượng 1 thực thi hàm 3 trên 4. Hàm 3 tính toán tỷ lệ phần trăm thời gian hiện tại của video so với tổng thời lượng của video, sau đó cập nhật kiểu khi video tiếp tục Chúng tôi cũng đã thêm chức năng 6 để lọc video đến một điểm cụ thể liên quan đến thanh tiến trình Lưu các thay đổi và xem trước ứng dụng trong trình duyệt của bạn để xem trạng thái cập nhật của trình phát video Thêm thanh trượt âm lượng và tốc độ phát lạiĐể thêm thanh trượt tùy chỉnh sẽ được sử dụng để quản lý trạng thái âm lượng và tốc độ phát lại, hãy cập nhật tệp 3 của bạn với thông tin sau sao chép Chúng tôi đã thêm hai thẻ 8 với giá trị 9 của 0 với giá trị được xác định trước là 1 và 2 cho âm lượng và tốc độ phát lại, tương ứng Bây giờ hãy cập nhật tệp 5 của bạn bằng mã sau để làm cho các thanh trượt hoạt động sao chép Chúng tôi đã chọn các phần tử 4 và đính kèm một trình xử lý sự kiện cho mỗi phần tử đó để kích hoạt hàm 5. Hàm này sử dụng các thuộc tính 6 và 7 của thanh trượt để xác định trạng thái của thanh trượt Nếu bạn xem trước trang trong trình duyệt của mình, bạn sẽ thấy các thanh trượt Thêm điều khiển bỏ quaThêm phần sau vào tệp 3 của bạn sao chép Chúng tôi đã thêm hai nút có thuộc tính dữ liệu sẽ được truy cập bằng JavaScript. Để làm cho các nút hoạt động, hãy cập nhật tệp 5 của bạn với thông tin sau 0sao chép Chúng tôi đã chọn các nút của mình bằng phương pháp 0 và thêm một trình nghe vào mỗi nút gọi hàm 1 khi nhấp. Hàm này sau đó sẽ cập nhật thời gian hiện tại của video dựa trên giá trị được chỉ định trong thuộc tính 2 Thêm phím tắtChúng ta có thể tận dụng sự kiện bàn phím mặc định 3 để tùy chỉnh thêm trình phát video. Để thêm phím tắt vào ứng dụng, hãy thêm phím tắt này vào cuối tệp 5 của bạn 1sao chép Để đơn giản hóa mọi thứ, chúng tôi chỉ thêm một phím tắt bật/tắt phát khi nhấn phím cách trên bàn phím. Bạn có thể ghi đối tượng sự kiện vào bảng điều khiển để xem các thuộc tính khác Tìm dự án ở đây trên GitHub Phần kết luậnCho đến nay, chúng ta đã xem xét phần tử video HTML5 mặc định và cách tạo các điều khiển tùy chỉnh cho phần tử đó, nhưng bạn không cần phải dừng ở đây. Thông tin thêm có sẵn trong tài liệu chính thức Làm cách nào để thêm các điều khiển video trong JavaScript?API JavaScript dành cho các thành phần phương tiện cung cấp 3 phương pháp để kiểm soát chúng. . chơi(). bắt đầu (hoặc khởi động lại) phát tệp phương tiện tạm ngừng(). dừng phát lại ở vị trí hiện tại trọng tải(). cho phép thay thế video đang hoạt động trong trình phát bằng một video khác (ví dụ: sau khi thay đổi thuộc tính src) Thuộc tính nào thêm các điều khiển video?Thuộc tính điều khiển là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng các điều khiển video sẽ được hiển thị. Điều khiển video nên bao gồm. Chơi.
Làm cách nào để thêm nút vào video trong HTML?Đặt thuộc tính src trong nguồn thành liên kết video của bạn và chỉ định loại liên kết . Để tạo nút tùy chỉnh, bạn có thể tạo vùng chứa chứa cả video và nút tùy chỉnh. Nút sẽ được chỉnh sửa vị trí thành tuyệt đối bằng cách sử dụng CSS để làm cho nút xuất hiện ở đúng vị trí trong video (được điều chỉnh bằng CSS).
Thẻ nào được sử dụng để chèn tệp video có điều khiển?Thẻ được sử dụng để nhúng nội dung video vào tài liệu, chẳng hạn như một đoạn phim hoặc các luồng video khác. Thẻ |