Tìm kiếm video HTML5 không hoạt động
|
Dự án là một loại mô phỏng video tương tác tương tự như sê-ri Bandersnatch của Netflix. Câu chuyện đi theo sự lựa chọn của người dùng. thêm cà chua hoặc dưa chua, chọn bánh mì brioche hoặc bánh mì cổ điển, trang trí với trứng hoặc sốt bơ hay chỉ cần bỏ qua, v.v. Bạn hiểu ý… Show
Nó được gọi là "Ya Sen Yapsan", có nghĩa là "Nếu bạn làm điều đó" trong tiếng Thổ Nhĩ Kỳ. Bạn có thể thử nó từ đây. Nó bằng tiếng Thổ Nhĩ Kỳ, vì vậy đừng ngạc nhiên 🙃 Bài viết này sẽ là phần giới thiệu về HTML5 Video. Bắt đầu nào 1. Nó là gì, thực sự? Phần tử ╔═══════════╦═════════╦════════╦════════╗2 được sử dụng để phát video hoặc phim và chỉ định video trên tài liệu HTML. Ví dụ: bạn có thể nhúng video nhạc vào trang web của mình để khách truy cập nghe và xem. Nó hiện được triển khai rộng rãi trong các trình duyệt chính và phụ và nó có sự hỗ trợ từ các trang web như YouTube và NetflixNó chấp nhận các thuộc tính chỉ định cách phát video. Các thuộc tính bao gồm ╔═══════════╦═════════╦════════╦════════╗3, ╔═══════════╦═════════╦════════╦════════╗4, ╔═══════════╦═════════╦════════╦════════╗5, ╔═══════════╦═════════╦════════╦════════╗6 và hơn thế nữa. Chúng tôi sẽ đề cập đến những điều này sau nàyĐây là một ví dụ nhanh để sử dụng nó orconst video = document.createElement('video'); Đó là nó. Miếng bánh, phải không? 2. Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử ╔═══════════╦═════════╦════════╦════════╗2. Xem bên dưới để biết danh sách đầy đủ các trình duyệt được hỗ trợ╔══════════╦════════╦═══════════╦═════════╦═══════╗Xem tại đây để được hỗ trợ trình duyệt chi tiết hơn 3. nguồnBạn có thể xác định nhiều nguồn bằng cách sử dụng phần tử ╔═══════════╦═════════╦════════╦════════╗8 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ụ
Bất kỳ văn bản nào giữa các thẻ ╔═══════════╦═════════╦════════╦════════╗2 và ╔═══════════╦═════════╦════════╦════════╗10 sẽ được hiển thị trong các trình duyệt không hỗ trợ phần tử ╔═══════════╦═════════╦════════╦════════╗2. Ví dụ╔═══════════╦═════════╦════════╦════════╗3Khi trình duyệt phân tích cú pháp thẻ ╔═══════════╦═════════╦════════╦════════╗8, nó sẽ sử dụng thuộc tính loại tùy chọn để giúp quyết định tải xuống và phát tệp nào. Nếu trình duyệt hỗ trợ WebM, nó sẽ phát video WebM, nếu không, nó sẽ kiểm tra xem nó có thể phát video MPEG-4 hay không, v.v.4. Định dạng và hỗ trợ trình duyệt 4. 1. MP4Định dạng bộ chứa MP4 với H. 264 và codec âm thanh AAC vốn được hỗ trợ bởi máy tính để bàn/thiết bị di động Internet Explorer, Safari và Chrome, nhưng Chromium và Opera không hỗ trợ định dạng. IE và Chrome cũng hỗ trợ codec âm thanh MP3 trong bộ chứa MP4, nhưng Safari thì không. Firefox/Firefox cho Android/Firefox OS hỗ trợ định dạng này trong một số trường hợp, nhưng chỉ khi có sẵn bộ giải mã của bên thứ ba và phần cứng của thiết bị có thể xử lý cấu hình được sử dụng để mã hóa MP4 Xem tại đây để được hỗ trợ trình duyệt chi tiết hơn 4. 2. WebMĐịnh dạng WebM dựa trên phiên bản hạn chế của định dạng vùng chứa Matroska. Nó luôn sử dụng codec video VP8 hoặc VP9 và codec âm thanh Vorbis hoặc Opus. WebM vốn được hỗ trợ trên máy tính để bàn và thiết bị di động Gecko (Firefox), Chrome và Opera, đồng thời hỗ trợ cho định dạng này có thể được thêm vào Internet Explorer và Safari (nhưng không phải trên iOS) bằng cách cài đặt một tiện ích bổ sung Xem tại đây để được hỗ trợ trình duyệt chi tiết hơn 4. 3. OggĐịnh dạng bộ chứa Ogg với bộ giải mã video Theora và bộ giải mã âm thanh Vorbis được hỗ trợ trong máy tính để bàn/thiết bị di động Gecko (Firefox), Chrome và Opera và có thể thêm hỗ trợ cho định dạng này vào Safari (nhưng không phải trên iOS) bằng cách cài đặt một tiện ích bổ sung . Định dạng không được hỗ trợ trong Internet Explorer dưới bất kỳ hình thức nào Xem tại đây để được hỗ trợ trình duyệt chi tiết hơn ╔═══════════╦═════════╦════════╦════════╗
Bạn có thể coi tệp video là một vùng chứa (chẳng hạn như tệp ZIP), chứa luồng video được mã hóa và luồng âm thanh. Có nhiều loại định dạng vùng chứa khác nhau và thật không may, không có một định dạng 'một vòng' nào hoạt động trên tất cả các trình duyệt Rất may, chúng tôi có thể phủ sóng cho tất cả các trình duyệt hiện đại (và di động) chỉ bằng hai định dạng
5. 1. Các giá trị phổ biến với codec
Phương thức ╔═══════════╦═════════╦════════╦════════╗31 kiểm tra và trả về một chuỗi xem trình duyệt có thể phát loại video được chỉ định hay khôngNó có thể trả về một trong các giá trị sau
Đây là một ví dụ ╔═══════════╦═════════╦════════╦════════╗17. Mảnh phương tiệnThêm một đoạn phương tiện vào URL phương tiện, bạn có thể chỉ định chính xác phần bạn muốn phát. Để thêm một đoạn phương tiện, bạn chỉ cần thêm ╔═══════════╦═════════╦════════╦════════╗32 vào URL phương tiện. Ví dụ: để phát video trong khoảng thời gian từ giây 8 đến giây 15, bạn sẽ chỉ định╔═══════════╦═════════╦════════╦════════╗3Bạn cũng có thể chỉ định thời gian trong ╔═══════════╦═════════╦════════╦════════╗33, chẳng hạn như ╔═══════════╦═════════╦════════╦════════╗34 để bắt đầu video ở phút mười sáu, hai mươi ba giây trong╔═══════════╦═════════╦════════╦════════╗0Hoặc, để chỉ phát phút thứ tư của video, bạn sẽ chỉ định ╔═══════════╦═════════╦════════╦════════╗35╔═══════════╦═════════╦════════╦════════╗28. phương phápCác phương thức có thể được sử dụng với phần tử ╔═══════════╦═════════╦════════╦════════╗2 được liệt kê bên dưới8. 1. canPlayType(định dạng)Bạn đã biết rằng tôi đã đề cập đến nó trong phần. “6. Hỗ trợ phát hiện” 8. 2. trọng tải()Nó tải lại phần tử video và đặt lại đầu phát về đầu video ╔═══════════╦═════════╦════════╦════════╗48. 3. chơi()Nó phát video từ vị trí hiện tại của nó ╔══════════╦════════╦═══════════╦═════════╦═══════╗08. 4. tạm ngừng()Nó tạm dừng video ở vị trí hiện tại ╔══════════╦════════╦═══════════╦═════════╦═══════╗19. Thuộc tínhBạn có thể tìm thấy các thuộc tính có thể được sử dụng với phần tử ╔═══════════╦═════════╦════════╦════════╗2 bên dưới9. 1. tự chạyCho trình duyệt biết liệu một video có nên bắt đầu phát ngay khi nó sẵn sàng hay không. Nếu bạn không chỉ định, nó sẽ lấy false làm mặc định ╔══════════╦════════╦═══════════╦═════════╦═══════╗2hãy nhận biết. Chính sách tự động phát của Chrome được thay đổi vào tháng 4 năm 2018. Nó đơn giản. Nếu bạn muốn bắt đầu video ngay lập tức (sử dụng thuộc tính tự động phát), thì bạn cũng nên bao gồm thuộc tính tắt tiếng hoặc người dùng phải tương tác với video trước (nhấp, nhấn, v.v. ). Nó rất hợp lý khi bạn nghĩ từ quan điểm của người dùng. Bởi vì, bạn biết đấy, không ai muốn bối rối với âm thanh lớn khi vào một trang web 9. 2. điều khiểnYêu cầu trình duyệt bao gồm các điều khiển video tích hợp như phát/tạm dừng, âm lượng, v.v. Nếu bạn không chỉ định, nó sẽ mặc định là false, nghĩa là không có điều khiển nào được hiển thị ╔══════════╦════════╦═══════════╦═════════╦═══════╗39. 3. danh sách điều khiểnSử dụng ╔═══════════╦═════════╦════════╦════════╗38, bạn có thể tùy chỉnh (ẩn) các điều khiển phương tiện gốc của Chrome, chẳng hạn như các nút tải xuống, toàn màn hình và phát lại từ xa (chỉ dành cho Chrome 58+). Nó có thể bao gồm các thuộc tính nodownload, nofullscreen và noremoteplayback╔══════════╦════════╦═══════════╦═════════╦═══════╗49. 4. nguồn gốc chéoNó cho biết có sử dụng CORS để tìm nạp nội dung liên quan hay không ╔══════════╦════════╦═══════════╦═════════╦═══════╗59. 5. Chiều caoĐặt hoặc lấy giá trị thuộc tính chiều cao của video bằng pixel CSS để kiểm soát lượng chiều cao mà video sẽ chiếm trên trang ╔══════════╦════════╦═══════════╦═════════╦═══════╗69. 6. vòngNó cho trình duyệt biết liệu video có nên phát lại hay không, mỗi khi nó kết thúc. Nếu bạn không chỉ định, nó sẽ lấy false làm mặc định ╔══════════╦════════╦═══════════╦═════════╦═══════╗79. 7. tắt tiếngĐặt hoặc nhận xem có nên tắt âm thanh của video hay không. Nếu bạn không chỉ định, nó sẽ lấy false làm mặc định ╔══════════╦════════╦═══════════╦═════════╦═══════╗89. 8. playsinline — webkit-playsinlineThuộc tính boolean chỉ ra rằng video sẽ được phát "nội tuyến", nằm trong khu vực phát lại của phần tử. Xem tại đây để biết thông tin chi tiết ╔══════════╦════════╦═══════════╦═════════╦═══════╗99. 9. posterĐặt hoặc nhận giá trị thuộc tính áp phích của video. Bạn có thể coi thuộc tính poster như một vị cứu tinh cho phần tử ╔═══════════╦═════════╦════════╦════════╗2 của mình. Nếu video ngừng phát hoặc gặp sự cố, hình ảnh áp phích sẽ được hiển thị. Hoặc nếu tệp của phần tử video không hỗ trợ trong trình duyệt, hình ảnh áp phích sẽ được hiển thị lại. Hoặc, nếu bạn muốn hiển thị video đang tải/đệm, thì sử dụng gif đang tải trong thuộc tính người đăng sẽ hợp lý
0 9. 10. tải trướcNó dự định cung cấp một gợi ý cho trình duyệt về những gì mà UA nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất. Đặt hoặc nhận giá trị của thuộc tính tải trước của video. Nếu bạn không chỉ định thì giá trị của nó phụ thuộc vào mặc định của trình duyệt
1
9. 11. srcNó cho trình duyệt biết video sẽ phát từ nguồn nào/nguồn nào. Nó có thể là tài nguyên cục bộ trong trang web của bạn hoặc thứ gì đó được hiển thị thông qua URL công khai 2 9. 12. âm lượngĐặt hoặc lấy âm lượng của video. Nếu bạn không chỉ định, nó sẽ lấy 1 làm mặc định 3 9. 13. bề rộngĐặt hoặc nhận giá trị của thuộc tính chiều rộng của video bằng pixel CSS để kiểm soát lượng chiều rộng mà video sẽ chiếm trên trang 410. Đặc tính Các thuộc tính được sử dụng chủ yếu với phần tử ╔═══════════╦═════════╦════════╦════════╗2 được liệt kê bên dưới10. 1. hiện tạiSrcTrả về URL của video hiện tại 5 10. 2. thời điểm hiện tạiĐặt hoặc nhận vị trí phát lại hiện tại trong video (tính bằng giây) 6 10. 3. khoảng thời gianTrả về một số, biểu thị thời lượng của video, tính bằng giây. Nếu không có video nào được đặt, thì “NaN” được trả về. Nếu video được phát trực tuyến và không có độ dài được xác định trước, "Inf" sẽ được trả về 7 10. 4. đã kết thúcTrả về việc phát lại video đã kết thúc hay chưa 8 10. 5. lỗiTrả về trạng thái lỗi của video
9 10. 6. tạm dừngTrả về việc video có bị tạm dừng hay không ╔═══════════╦═════════╦════════╦════════╗3010. 7. tốc độ phát lạiĐặt hoặc lấy tốc độ phát lại video. Nếu bạn không chỉ định, nó sẽ lấy 1 làm mặc định ╔═══════════╦═════════╦════════╦════════╗3110. 8. chơiTrả về một đối tượng TimeRanges đại diện cho các phần đã phát của video ╔═══════════╦═════════╦════════╦════════╗3210. 9. trạng thái sẵn sàngTrả về trạng thái sẵn sàng hiện tại của video
╔═══════════╦═════════╦════════╦════════╗3311. Sự kiện11. 1. có thể chơiKích hoạt khi trình duyệt có thể bắt đầu phát video ╔═══════════╦═════════╦════════╦════════╗3411. 2. có thể chơi quaKích hoạt khi trình duyệt có thể phát đến hết video mà không dừng để lưu nội dung vào bộ đệm ╔═══════════╦═════════╦════════╦════════╗3511. 3. đã kết thúcKích hoạt khi video kết thúc vì đã đến cuối phương tiện ╔═══════════╦═════════╦════════╦════════╗3611. 4. cập nhật thời gianKích hoạt khi thời gian hiện tại của video bị thay đổi ╔═══════════╦═════════╦════════╦════════╗3712. Thực hành tốt nhấtViệc thêm video vào trang web của bạn đôi khi có thể gây khó chịu. Người dùng yêu thích các video có độ phân giải cao, nhưng nếu trang web của bạn không được tối ưu hóa để xử lý chúng, nội dung đó có thể gây ra các vấn đề về hiệu suất Dưới đây là một vài lời khuyên
Căn giữa ╔═══════════╦═════════╦════════╦════════╗2 có thể gây khó chịu nếu bạn đang cố gắng làm cho nó phản hồi nhanh cho cả máy tính để bàn, thiết bị di động hoặc máy tính bảng, v.v. Đừng lo lắng, bạn có thể tìm thấy bản demo bên dưới chỉ bằng CSSSẽ có một video và phần gốc của video đó dưới dạng vùng chứa để tạo kiểu ╔═══════════╦═════════╦════════╦════════╗38Sau đó sử dụng các lớp trong chế độ xem của bạn ╔═══════════╦═════════╦════════╦════════╗3914. Kiểm soát toàn màn hìnhNếu bạn đang tự lập kế hoạch điều khiển chế độ toàn màn hình, bạn không nên quên hành vi của tất cả các trình duyệt, vì các chức năng gốc trong mỗi trình duyệt là khác nhau. Đây là hai đoạn mã nhanh để vào và thoát khỏi chế độ toàn màn hình Nhập toàn màn hình╔═══════════╦═════════╦════════╦════════╗0Thoát khỏi chế độ toàn màn hình╔═══════════╦═════════╦════════╦════════╗115. Thưởng. HandBrake — Bộ chuyển mã video mã nguồn mởHandBrake là một công cụ để chuyển đổi video từ gần như bất kỳ định dạng nào sang một bộ codec hiện đại, được hỗ trợ rộng rãi. Bạn có thể tải trực tiếp từ đây Dưới đây là một vài tính năng tuyệt vời
Ngoài ra, tôi muốn cảm ơn người quản lý Erdem Bıyık của tôi đã đề xuất công cụ miễn phí này để tối ưu hóa video. Điều đó hoạt động rất tốt trong việc tối ưu hóa video (giảm kích thước trong khi vẫn giữ chất lượng, chuyển mã cho thiết bị di động, v.v.) cho trải nghiệm người dùng Sự kết luậnTrình phát video HTML5 bắt đầu đơn giản nhưng đã phát triển khá tiên tiến (nghĩ YouTube và Netflix) và vì tất cả chỉ là HTML, CSS và JavaScript, bất kỳ nhà phát triển nào cũng có thể tạo trình phát ấn tượng. Bao gồm video trên web hiện đại dễ dàng hơn bao giờ hết và mở ra một số khả năng mới tuyệt vời Bạn sẽ làm gì bây giờ và tiếp theo? Không ngừng học tậpChắc chắn sẽ có một phiên bản nâng cao của bài viết này với nhiều ví dụ. Tôi hy vọng, nó sẽ giúp bạn hiểu và bắt đầu với HTML5 Video. Nếu bạn biết bất kỳ ai sẽ được hưởng lợi từ hướng dẫn này, tôi rất vui nếu bạn giới thiệu nó cho họ. Cảm ơn bạn đã làm theo hướng dẫn này và đọc đến cuối, hẹn gặp lại bạn ở một hướng dẫn khác… |
