Cách chèn trình xem phim vào trang web, trình phát video, trình chơi video

Cách chèn trình xem phim vào trang web, trình phát video, trình chơi video

Cách chèn trình xem phim vào trang web

Thật đơn giản để chèn một trình xem phim vào trang web.

Cách chèn trình xem phim vào trang web

Để chèn một trình xem phim vào trang web, ta sử dụng thẻ <video> và thẻ <source> theo cú pháp sau:

<video controls>
    <source src="đường dẫn đến tập tin video" type="Media Type">
</video>

Hiện nay, thẻ <video> chỉ hỗ trợ ba loại định dạng video là : MP4, WebM, Ogg

Định dạng Đuôi Media Type
MP4 .mp4 video/mp4
WebM .webm video/webm
Ogg .ogg video/ogg
Ví dụ

<video controls>
    <source src="../public/home/file/bunny.mp4" type="video/mp4">
</video>

Để đề phòng trường hợp tập tin video không tồn tại, hoặc trình duyệt không hỗ trợ định dạng video của tập tin của bạn. Khi đó, ta có thể sử dụng nhiều thẻ <source> (nếu thẻ phía trên không hoạt động được thì sẽ đến phiên thẻ phía dưới)

Ví dụ

<video controls>
    <source src="../public/home/file/bunny.ogg" type="video/ogg">
    <source src="../public/home/file/bunny.mp4" type="video/mp4">
</video>
<video> là một thẻ trong phiên bản HTML5. Do đó, phía trên cùng của tập tin phải thêm thẻ <!DOCTYPE html>

Thiết lập kích thước cho trình xem phim

Thuộc tính width dùng để thiết lập chiều rộng của trình xem phim.

Thuộc tính height dùng để thiết lập chiều cao của trình xem phim.

Giá trị của thuộc tính width và height có thể xác định theo đơn vị:

  • px (Pixel)
  • % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: Phần tử chứa trình xem phim có chiều rộng 800px, ta thiết lập chiều rộng cho trình xem phim là 50% thì khi hiển thị ra màn hình, trình xem phim sẽ có chiều rộng là 400px)
Ví dụ

<video width="400px" height="220px" controls>
    <source src="../public/home/file/bunny.mp4" type="video/mp4">
</video>

Các thuộc tính của thẻ <video>

Thuộc tính dùng để cung cấp thêm thông tin, hành động cho trình xem phim (Ví dụ như: tự động phát video, phát lặp đi lặp lại, tắt tiếng,....).

Thuộc tính Ý nghĩa Xem ví dụ
controls Hiển thị trình điều khiển video
autoplay Tự động phát video khi trang web được load xong
loop Phát lặp đi lặp lại video mỗi khi nó phát hết
muted Tắt âm thanh của video
poster Dùng một tấm ảnh làm hình đại diện cho video trước khi nó được phát

Cách chèn trình xem phim vào trang web

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi