JavaScript thay đổi nguồn video

Question

Thuộc tính Video src được sử dụng để đặt hoặc trả về giá trị của thuộc tính src của video. Thuộc tính src thường được sử dụng để chỉ định vị trí (URL) của tệp video.

Nội dung chính Show

Chỉ định một tệp #
Chỉ định nhiều định dạng tệp #
Chỉ định thời gian bắt đầu và kết thúc #
Bao gồm một hình ảnh áp phích #
Đảm bảo video không tràn bộ chứa #
Định hướng thiết bị #
Tự chạy #
Tải trước #
Làm cách nào để thêm video src trong JavaScript?
Làm cách nào để kiểm soát video bằng JavaScript?
Làm cách nào để thay đổi src của thẻ video trong jquery?
Làm cách nào để phát nhiều video trong JavaScript?

cú pháp.

Trả lại thuộc tính src

videoObject.src

Đặt thuộc tính src

videoObject.src = URL

Giá trị tài sản

URL. Nó được sử dụng để chỉ định URL của tệp video

Hai giá trị có thể. -

URL tuyệt đối. Nó trỏ đến một trang web khác
URL tương đối. Nó trỏ đến các tệp khác của cùng một trang web

Giá trị trả về. Thuộc tính Video src trả về một chuỗi đại diện cho URL của tệp video. Thuộc tính src trả về toàn bộ URL, bao gồm cả giao thức. Chương trình dưới đây minh họa thuộc tính Video src.

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ử

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

7 và phần tử

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

8. 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 #

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

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

9 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ử

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

8 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 (nguồn)

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

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

9 vào sự kiện thẻ

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

8 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ế. Việc bỏ qua thuộc tính

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

9 có thể ảnh hưởng đến hiệu suất khi có nhiều nguồn 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át 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 bảng điều khiển Mạng. 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ó nói

<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

videoObject.src = URL

4

Á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 phần tử video quá lớn so với khung nhìn, chúng có thể tràn vào 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 các truy vấn phương tiện CSS để chỉ định kích thước của các phần tử tùy thuộc vào kích thước của chế độ xem;

Đố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 #

videoObject.src = URL

7

HTML #

videoObject.src = URL

8

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.

videoObject.src = URL

40Tả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 để thêm video src trong JavaScript?

Ví dụ .

Làm cách nào để kiểm soát video bằng 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)

Làm cách nào để thay đổi src của thẻ video trong jquery?

click(function () { $("#divVideo video"). attr({ "src". $(cái này). data("item"), "autoplay". "tự động phát", }) }) }, 2000); . imgthumbnew" là lớp hình ảnh là ngón tay cái của video, một thuộc tính bổ sung được cung cấp cho chúng có url video. here ". imgthumbnew" is the class of images which are thumbs of videos, an extra attribute is given to them which have video url.