Làm cách nào để thêm video src trong JavaScript?

Bạn đã chuẩn bị đúng một tệp video cho web. Bạn đã cung cấp cho nó kích thước chính xác và độ phân giải chính xác. Bạn thậm chí đã tạo các tệp WebM và MP4 riêng biệt cho các trình duyệt khác nhau

Để bất kỳ ai cũng có thể xem video của bạn, bạn vẫn cần thêm video đó vào một trang web. Làm như vậy đúng yêu cầu thêm hai phần tử HTML. phần tử và phần tử . Ngoài những điều cơ bản về các thẻ này, bài viết này giải thích các thuộc tính mà bạn nên thêm vào các thẻ đó để tạo ra trải nghiệm người dùng tốt

Bạn luôn có tùy chọn tải tệp của mình lên [YouTube] hoặc [Vimeo]. Trong nhiều trường hợp, điều này tốt hơn so với quy trình được mô tả tại đây. Các dịch vụ đó xử lý chuyển đổi định dạng và loại tệp cho bạn, cũng như cung cấp phương tiện để nhúng video vào trang web của bạn. Nếu bạn cần tự quản lý việc này, hãy đọc tiếp

Chỉ định một tệp duy nhất

Mặc dù nó không được khuyến nghị nhưng bạn có thể tự sử dụng phần tử video. Luôn sử dụng thuộc tính type như hình bên dưới. Trình duyệt sử dụng điều này để xác định xem nó có thể phát tệp video được cung cấp hay không. Nếu không thể, văn bản đính kèm sẽ hiển thị

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.p>
video>

Chỉ định nhiều định dạng tệp

Nhớ lại những điều cơ bản về tệp Phương tiện mà không phải tất cả các trình duyệt đều hỗ trợ các định dạng video giống nhau. Phần tử cho phép bạn chỉ định nhiều định dạng làm dự phòng trong trường hợp trình duyệt của người dùng không hỗ trợ một trong số chúng

Ví dụ dưới đây tạo video nhúng được sử dụng làm ví dụ sau trong bài viết này

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

Dùng thử trên Glitch ()

Lưu ý trong ví dụ trước rằng thuộc tính

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

0 đã được giới thiệu. Điều này hướng dẫn trình duyệt cho phép người dùng kiểm soát quá trình phát lại video, bao gồm âm lượng, tìm kiếm, chọn phụ đề và tạm dừng/tiếp tục phát lại giữa những người khác

Bạn phải luôn thêm thuộc tính type vào sự kiện thẻ mặc dù đây là tùy chọn. Điều này đảm bảo rằng trình duyệt chỉ tải xuống tệp mà nó có khả năng phát

Cách tiếp cận này có một số lợi thế so với việc phục vụ các tập lệnh phía máy chủ hoặc HTML khác, đặc biệt là trên thiết bị di động

• Bạn có thể liệt kê các định dạng theo thứ tự ưu tiên
• Chuyển đổi phía máy khách giúp giảm độ trễ;
• Để trình duyệt chọn định dạng đơn giản hơn, nhanh hơn và có khả năng đáng tin cậy hơn so với việc sử dụng cơ sở dữ liệu hỗ trợ phía máy chủ với tính năng phát hiện tác nhân người dùng
• Chỉ định loại của từng nguồn tệp sẽ cải thiện hiệu suất mạng;

Những vấn đề này đặc biệt quan trọng trong bối cảnh di động, nơi băng thông và độ trễ ở mức cao và sự kiên nhẫn của người dùng có thể bị hạn chế. Bỏ qua thuộc tính type có thể ảnh hưởng đến hiệu suất khi có nhiều nguồn với các loại không được hỗ trợ

Có một số cách bạn có thể tìm hiểu chi tiết. Hãy xem Hướng dẫn về phương tiện kỹ thuật số dành cho các chuyên viên máy tính để tìm hiểu thêm về cách hoạt động của video và âm thanh trên web. Bạn cũng có thể sử dụng tính năng gỡ lỗi từ xa trong DevTools để so sánh hoạt động mạng có thuộc tính loại và không có thuộc tính loại

thận trọng

Đảm bảo kiểm tra các tiêu đề phản hồi trong các công cụ dành cho nhà phát triển trình duyệt của bạn để [đảm bảo máy chủ của bạn báo cáo đúng loại MIME];

Chỉ định thời gian bắt đầu và kết thúc

Tiết kiệm băng thông và làm cho trang web của bạn phản hồi nhanh hơn. sử dụng các đoạn phương tiện để thêm thời gian bắt đầu và kết thúc vào phần tử video

Trình duyệt này không hỗ trợ phần tử video

Để sử dụng một đoạn phương tiện, hãy thêm

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

4 vào URL phương tiện. Ví dụ: để phát video từ giây thứ 5 đến giây thứ 10, hãy chỉ định

<source src="video/chrome.webm#t=5,10" type="video/webm">

Bạn cũng có thể chỉ định thời gian trong

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

5. Ví dụ:

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

6 bắt đầu video sau một phút năm giây. Để chỉ phát phút đầu tiên của video, hãy chỉ định

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

7

Bạn có thể sử dụng tính năng này để phân phối nhiều chế độ xem trên cùng một video—như các điểm dừng trong DVD–mà không cần phải mã hóa và phân phối nhiều tệp

Để tính năng này hoạt động, máy chủ của bạn phải hỗ trợ yêu cầu phạm vi và khả năng đó phải được bật. Hầu hết các máy chủ kích hoạt yêu cầu phạm vi theo mặc định. Vì một số dịch vụ lưu trữ tắt chúng, bạn nên xác nhận rằng các yêu cầu phạm vi khả dụng để sử dụng các đoạn trên trang web của bạn

May mắn thay, bạn có thể làm điều này trong các công cụ dành cho nhà phát triển trình duyệt của mình. Ví dụ, trong Chrome, nó nằm trong. Hãy tìm tiêu đề

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

8 và xác minh rằng nó ghi là

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

9. Trong hình ảnh, tôi đã vẽ một hộp màu đỏ xung quanh tiêu đề này. Nếu bạn không thấy giá trị

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.p>
video>

9, bạn cần liên hệ với nhà cung cấp dịch vụ lưu trữ của mình

Ảnh chụp màn hình Chrome DevTools. Phạm vi chấp nhận. byte

Bao gồm một hình ảnh áp phích

Thêm thuộc tính áp phích vào phần tử

<source src="video/chrome.webm#t=5,10" type="video/webm">

1 để người xem có ý tưởng về nội dung ngay khi phần tử tải mà không cần tải xuống video hoặc bắt đầu phát lại

<video poster="poster.jpg" ...>
  …
video>

Áp phích cũng có thể là phương án dự phòng nếu video

<source src="video/chrome.webm#t=5,10" type="video/webm">

2 bị hỏng hoặc nếu không có định dạng video được cung cấp nào được hỗ trợ. Nhược điểm duy nhất của hình ảnh áp phích là yêu cầu tệp bổ sung, tiêu tốn một số băng thông và yêu cầu hiển thị. Để biết thêm thông tin, hãy xem Mã hóa hình ảnh hiệu quả

Đừng

Không có áp phích dự phòng, video trông có vẻ bị hỏng

Làm

Áp phích dự phòng làm cho có vẻ như khung hình đầu tiên đã được chụp

Đảm bảo video không tràn bộ chứa

Khi các thành phần video quá lớn so với khung nhìn, chúng có thể làm tràn vùng chứa của chúng, khiến người dùng không thể xem nội dung hoặc sử dụng các điều khiển

Ảnh chụp màn hình, dọc của Android Chrome. phần tử video chưa được tạo kiểu tràn qua khung nhìn. Ảnh chụp màn hình, ngang của Android Chrome. phần tử video chưa được tạo kiểu tràn qua khung nhìn.

Bạn có thể kiểm soát kích thước video bằng CSS. Nếu CSS không đáp ứng được tất cả các nhu cầu của bạn, thư viện JavaScript và plugin như FitVids (nằm ngoài phạm vi của bài viết này) có thể trợ giúp, ngay cả đối với video từ YouTube và các nguồn khác. Thật không may, những tài nguyên này có thể làm tăng kích thước tải trọng mạng của bạn dẫn đến hậu quả tiêu cực đối với doanh thu và ví của người dùng của bạn

Đối với những mục đích sử dụng đơn giản như những mục đích tôi đang mô tả ở đây, hãy sử dụng để chỉ định kích thước của các thành phần tùy thuộc vào kích thước khung nhìn;

Đối với nội dung đa phương tiện trong iframe (chẳng hạn như video trên YouTube), hãy thử phương pháp đáp ứng (như phương pháp do John Surdakowski đề xuất)

thận trọng

Không ép buộc kích thước phần tử dẫn đến [tỷ lệ khung hình] khác với video gốc. Video bị ép hoặc kéo dài trông rất tệ

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  >iframe>
div>

Thử nó

So sánh mẫu phản hồi với phiên bản không phản hồi. Như bạn có thể thấy, phiên bản không phản hồi không phải là một trải nghiệm người dùng tuyệt vời

định hướng thiết bị

Định hướng thiết bị không phải là vấn đề đối với màn hình máy tính để bàn hoặc máy tính xách tay, nhưng nó cực kỳ quan trọng khi xem xét thiết kế trang web cho thiết bị di động và máy tính bảng

Safari trên iPhone thực hiện tốt việc chuyển đổi giữa hướng dọc và hướng ngang

Ảnh chụp màn hình phát video trong Safari trên iPhone, dọc. Ảnh chụp màn hình phát video trong Safari trên iPhone, nằm ngang.

Định hướng thiết bị trên iPad và Chrome trên Android có thể gặp sự cố. Ví dụ: không có bất kỳ tùy chỉnh nào, video đang phát trên iPad theo hướng ngang sẽ trông như thế này

Ảnh chụp màn hình phát video trong Safari trên iPad, nằm ngang

Đặt video

<source src="video/chrome.webm#t=5,10" type="video/webm">

4 hoặc

<source src="video/chrome.webm#t=5,10" type="video/webm">

3 bằng CSS có thể giải quyết nhiều vấn đề về bố cục hướng thiết bị

Tự chạy

Thuộc tính

<source src="video/chrome.webm#t=5,10" type="video/webm">

6 kiểm soát xem trình duyệt có tải xuống và phát video ngay lập tức hay không. Cách thức hoạt động chính xác của nó phụ thuộc vào nền tảng và trình duyệt

• Trình duyệt Chrome. Phụ thuộc vào nhiều yếu tố bao gồm nhưng không giới hạn ở chế độ xem trên máy tính để bàn và liệu người dùng thiết bị di động có thêm trang web hoặc ứng dụng của bạn vào màn hình chính của họ hay không. Để biết chi tiết, hãy xem các phương pháp hay nhất về Tự động phát

• firefox. Chặn tất cả video và âm thanh nhưng cung cấp cho người dùng khả năng nới lỏng các hạn chế này đối với tất cả các trang web hoặc các trang web cụ thể. Để biết chi tiết, hãy xem Cho phép hoặc chặn tự động phát phương tiện trong Firefox

• Safari: Has historically required a user gesture, but has been relaxing that requirement in recent versions. For details, see New

Ngay cả trên các nền tảng có thể tự động phát, bạn cần cân nhắc xem có nên bật tính năng này hay không

• Việc sử dụng dữ liệu có thể tốn kém
• Phát phương tiện trước khi người dùng muốn có thể ngốn băng thông và CPU, do đó làm chậm quá trình hiển thị trang
• Người dùng có thể ở trong bối cảnh phát video hoặc âm thanh bị xâm phạm

tải trước

Thuộc tính

<source src="video/chrome.webm#t=5,10" type="video/webm">

7 cung cấp gợi ý cho trình duyệt về lượng thông tin hoặc nội dung cần tải trước

Giá trịMô tả

<source src="video/chrome.webm#t=5,10" type="video/webm">

8Người dùng có thể đã chọn không xem video, vì vậy đừng tải trước bất kỳ thứ gì.

<source src="video/chrome.webm#t=5,10" type="video/webm">

9Siêu dữ liệu (thời lượng, kích thước, đoạn văn bản) phải được tải trước, nhưng với video tối thiểu.

<video poster="poster.jpg" ...>
  …
video>

0Tải xuống toàn bộ video ngay lập tức được coi là mong muốn. Một chuỗi rỗng tạo ra cùng một kết quả

Thuộc tính

<source src="video/chrome.webm#t=5,10" type="video/webm">

7 có tác dụng khác nhau trên các nền tảng khác nhau. Ví dụ: Chrome lưu vào bộ đệm video 25 giây trên máy tính để bàn nhưng không có trên iOS hoặc Android. Điều này có nghĩa là trên thiết bị di động, có thể có sự chậm trễ khi khởi động phát lại không xảy ra trên máy tính để bàn. Xem Phát lại nhanh với tải trước âm thanh và video hoặc blog của Steve Souders để biết thêm chi tiết

Bây giờ bạn đã biết cách thêm phương tiện vào trang web của mình, đã đến lúc tìm hiểu về khả năng truy cập phương tiện nơi bạn sẽ thêm phụ đề vào video của mình cho người khiếm thính hoặc khi phát âm thanh không phải là một tùy chọn khả thi

Làm cách nào để chèn video vào JavaScript?

Video src có thể là một URL không?

Làm cách nào để nhúng video vào HTML?

Thẻ nào được sử dụng để phát một video clip trong HTML?