Hướng dẫn play video html
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook 1- HTML VideoThẻ được đưa vào HTML5, nó giúp bạn nhúng một video vào trong trang web. HTML4 thực tế không có thẻ chuyên biệt cho video, để nhúng được video, HTML4 sử dụng thẻ hoặc hoặc đồng thời phải cài đặt một phần mềm bổ xung cho trình duyệt chẳng hạn như Flash hoặc QuickTime. Với thẻ việc nhúng một video trên trang web trở nên đơn giản hơn, và bạn không cần cài đặt bất kỳ một phần mềm bổ xung nào khác vào trình duyệt. Hầu hết các trình duyệt đã hỗ trợ HTML5, vì vậy nó hỗ trợ thẻ .
Thuộc tính controls nói với trình duyệt hãy hiển thị các điều khiển cho video, chẳng hạn nút play, nút tạm dừng, âm lượng,.. Thẻ xuất hiện trong thẻ cung cấp một nguồn video thay thế cho trình duyệt. Trình duyệt có thể sử dụng một trong các nguồn video được cung cấp, thứ tự ưu tiên từ trên xuống dưới. Nội dung văn bản trong thẻ chỉ hiển thị nếu trình duyệt không hỗ trợ thẻ hoặc không hỗ trợ bất kỳ một định dạng video nào được cung cấp bởi các thẻ . video-example.html
Các trình duyệt và sự hỗ trợ các định dạng video: 2- Video AttributesGiống như tất cả các phần tử (element) khác, phần tử hỗ trợ tất cả các thuộc tính chung (global attributes).
Ngoài ra nó có các thuộc tính khác dưới đây:
autoplay Thuộc tính này là kiểu boolean. Nếu nó có mặt trong phần tử video sẽ được tự động chơi sớm nhất có thể (Sau khi nó tải xuống được dữ liệu đủ để chơi).
controls Nếu thuộc tính này có mặt, trình duyệt sẽ cung cấp các điều khiển giúp người dùng điều khiển phát lại (playback) video, điều khiển âm lượng, tìm kiếm (seeking), tạm dừng (pause), tiếp tục phát (resume playback), download,...
Dưới đây là hình ảnh cho thấy sự khác biệt giữa có thuộc tính controls, và không có thuộc tính controls: duration Thuộc tính duration trả về một số (kiểu double), nó cho biết độ dài của video theo đơn vị tính mili giây. Nếu video không có nguồn, hoặc nguồn không hợp lệ nó trả về NaN (Not a Number). Nếu nguồn không thể xác định được thời điểm kết thúc nó trả về +Infinite, chẳng hạn như các video phát sóng trực tiếp (live stream video). duration-attr-example.html
width/height Thuộc tính width/height được sử dụng để chỉ định chiều rộng và chiều cao cho vùng hiển thị video, nó là một số tuyệt đối (không hỗ trợ %) loop Thuộc tính này có kiểu boolean, nếu thuộc tính này có mặt trong phần tử video sẽ được chơi lại từ đầu khi nó tiến tới điểm kết thúc. loop-attr-example.html
muted Thuộc tính muted có kiểu boolean, nếu nó xuất hiện trong phần tử video sẽ được khởi tạo trong tình trạng tắt âm thanh. Giá trị mặc định của nó là false. muted-attr-example.html
poster Thuộc tính poster cho phép bạn chỉ định một URL của một ảnh để hiện thị lúc ban đầu khi video chưa bắt đầu chơi.
preload Thuộc tính này cung cấp một gợi ý cho trình duyệt nên làm để mang đến trải nghiệm tốt nhất cho người dùng. Các giá trị có thể của nó là:
Giá trị mặc định của preload là khác nhau đối với các trình duyệt khác nhau. Đặc tả của HTML5 khuyên các trình duyệt sử dụng "metadata" là giá trị mặc định. Chú ý: Thuộc tính preload chỉ là một gợi ý cho trình duyệt, trình duyệt có thể không thực hiện theo gợi ý này, chẳng hạn nếu có thuộc tính autoplay=true thì nội dung của video sẽ tự động được tải xuống bởi trình duyệt. playsinline Màn hình của các thiết bị sử dụng Android hoặc iOS khá nhỏ, vì vậy khi xem video trên trình duyệt trong các thiết bị này, nó sẽ tự động chơi video trong trạng thái đầy màn hình (Fullscreen). Thuộc tính playsinline là kiểu boolean, nó giúp ngăn chặn trình duyệt thực hiện hành vi trên. |