Tại sao thẻ video của tôi trong html không hoạt động?

Trước khi HTML 5 ra đời, các nhà phát triển web phải nhúng video vào trang web bằng plugin như Adobe flash player

Ngày nay, bạn có thể dễ dàng nhúng video vào tài liệu HTML bằng thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1

Trong bài viết này, chúng ta sẽ xem cách hoạt động của thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 trong HTML

Mục lục

• Cú pháp cơ bản
• Thuộc tính của thẻ

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  1
• Thuộc tính

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  4
• Thuộc tính

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  5
• Thuộc tính

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  6
• Thuộc tính

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  7
• Thuộc tính

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  8
• Thuộc tính

   body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: #d3d3d3;
      }
  

  9 và
  0
• Thuộc tính
  1
• Thuộc tính
  2
• Phần kết luận

Cú pháp cơ bản

Cũng giống như thẻ

3,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 có thuộc tính

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

4 mà bạn cần chỉ định nguồn của video

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

5

Theo mặc định, nó được hiển thị dưới dạng hình ảnh trong trình duyệt

CSS này căn giữa mọi thứ trong trang web và thay đổi màu nền

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

Ngoài ra, bạn có thể chỉ định nhiều nguồn video cho

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 bằng thẻ

7. Thẻ

7 này cũng phải mang thuộc tính

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

4 của chính nó

Bạn có thể sử dụng nhiều thẻ

7 để cung cấp các định dạng khác nhau của cùng một video. Sau đó, trình duyệt sẽ phát định dạng mà nó hỗ trợ

Thuộc tính của thẻ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 1

Thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 hỗ trợ các thuộc tính toàn cầu như

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

53,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

54,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

55, v.v.

Nếu bạn đang thắc mắc thuộc tính toàn cầu là gì, thì đó là những thuộc tính được hỗ trợ bởi tất cả các thẻ HTML

Các thuộc tính cụ thể được hỗ trợ bởi thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 bao gồm

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

4,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

5,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

6,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

7,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

8,

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

9,

0,

1,

2, và những thuộc tính khác

Thuộc tính body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 4

Thuộc tính src được sử dụng để xác định nguồn của video. Đó có thể là đường dẫn tương đối tới video trên máy cục bộ của bạn hoặc liên kết video trực tiếp từ internet

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

5

Đây là tùy chọn vì bạn có thể sử dụng thẻ

7 thay cho nó

Thuộc tính body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 5

Với thuộc tính poster, bạn có thể kết hợp một hình ảnh để hiển thị trước khi video bắt đầu phát hoặc trong khi video đang tải xuống

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

2

Thay vì hình ảnh của cảnh đầu tiên của video, trình duyệt sẽ hiển thị hình ảnh này

Thuộc tính body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 6

Khi bạn sử dụng điều khiển, nó cho phép trình duyệt hiển thị các bộ điều khiển phát lại như phát và tạm dừng, âm lượng, tìm kiếm, v.v.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

4

Thuộc tính body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 7

Với thuộc tính vòng lặp, bạn có thể làm cho video tự động lặp lại. Tức là làm cho nó bắt đầu phát lại mỗi khi nó dừng phát

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

6

Thuộc tính body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 8

Thuộc tính

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

8 cho phép bạn bắt đầu phát video tự động ngay sau khi tải trang

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

9

Thuộc tính body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } 9 và 0

Bạn có thể sử dụng thuộc tính chiều rộng và chiều cao để chỉ định chiều rộng và chiều cao cho video theo pixel. Nó chỉ chấp nhận các giá trị tuyệt đối, ví dụ: pixel

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

2

Thuộc tính 1

Bạn có thể sử dụng thuộc tính tắt tiếng để yêu cầu trình duyệt không phát bất kỳ âm thanh nào liên quan đến video khi video bắt đầu phát

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

4

Nếu thuộc tính

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

6 được chỉ định, người dùng có thể nhấp vào nút âm lượng để bật tiếng

Thuộc tính 2

Với thuộc tính tải trước, bạn có thể cung cấp gợi ý cho trình duyệt về việc có nên tải xuống video hay không khi tải trang

Thuộc tính này rất quan trọng đối với trải nghiệm người dùng

Bạn có thể sử dụng 3 giá trị với thuộc tính tải trước

• không ai. chỉ định rằng video sẽ không tải cho đến khi người dùng nhấn phát

• tự động. chỉ định rằng video sẽ được tải xuống ngay cả khi người dùng không nhấn phát

• metadata. chỉ định rằng trình duyệt sẽ thu thập siêu dữ liệu như độ dài, kích thước, thời lượng, v.v.

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

0

Phần kết luận

Trong bài viết này, bạn đã tìm hiểu về thẻ HTML5

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 và các thuộc tính của nó, vì vậy bạn có thể sử dụng nó đúng cách trong các dự án của mình

Vì âm thanh là một phần quan trọng của một video hoàn chỉnh nên bạn cũng có thể sử dụng thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

1 để đặt tệp âm thanh trên trang web. Nhưng trong hầu hết các trường hợp, bạn nên sử dụng thẻ

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

60 cho mục đích này để có trải nghiệm người dùng phù hợp

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè và gia đình của bạn để nó có thể đến được với nhiều người hơn có thể cần nó

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tại sao thẻ video không hoạt động trong HTML?

Làm thế nào chúng ta có thể sử dụng thẻ video trong HTML?