Advertisement
  1. Web Design
  2. Web Components
Webdesign

Cách tạo một Thành phần Web để nhúng các Video YouTube

by
Difficulty:AdvancedLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài hướng dẫn trước "Cách "Lazy Load" các Video YouTube được nhúng" chúng ta đã tìm hiểu cách nạp một video YouTube chỉ khi một người dùng nhấp chuột lên nó. Điều này giúp trang web của chúng ta tải nhanh hơn một chút, đặc biệt là nếu nó có chứa nhiều video Youtube.

Nếu bạn theo dõi hướng dẫn một cách kỹ lưỡng, thì bạn sẽ thấy rằng chúng ta đã thêm một vài thẻ div, cùng với các lớp, các style và các script để làm cho nó hoạt động.

Phải thêm tất cả những điều này mỗi lần không phải là cách tiện lợi nhất; sẽ thế nào nếu chúng ta có thể thay thế tất cả điều này bằng cách sử dụng một thành phần sáng tạo, giống như <youtube-embed>. Đó chính xác là những gì chúng ta sẽ làm trong hướng dẫn này; chúng ta sẽ tạo ra một thẻ HTML tuỳ biến đầy đủ chức năng sử dụng "Web Components". Hãy xem bản demo, sau đó mổ xẻ nó!

shadow-root Read on to find out more
#shadow-root? Tiếp tục đọc để tìm hiểu thêm

Một hướng dẫn nhanh

Tuy nhiên, trước khi bắt tay vào việc, tôi thật sự khuyên bạn nên tìm hiểu các bài viết của Kezz Bracey, Cách tạo cho chính bạn các Thẻ HTML với Web Components. Điều này sẽ cho bạn một cái nhìn sâu hơn về Web Components, và những thứ như "Shadow DOM" (được biết đến như "Shadow Root"), HTML Imports, và thẻ <template>.

Bắt đầu

Để bắt đầu, chúng ta cần tạo một file HTML. Chúng ta sẽ đặt tên nó là "youtube-embed.html". File này sẽ chứa tất cả code để đăng ký và xây dựng thẻ mới của chúng ta, <youtube-embed>.

Nó sẽ bao gồm các mã JavaScript dưới đây, vì vậy hãy xem qua phần quan trọng nhất:

Khá nhiều thứ, nhưng được đánh số hợp lý, vì vậy hãy xem chúng làm những công việc gì:

  1. Ở đây chúng ta định nghĩa hai biến tham chiếu tới các đối tượng "document" khác nhau. Biến đầu tiên, thatDoc, tham chiếu tới document chính nơi mà chúng ta phân phối thẻ tuỳ biến. Biến thứ hai, thisDoc, là document nơi mà chúng ta đăng ký thẻ HTML mới của chúng ta, trong trường hợp này là youtube-embed.html.
  2. Tiếp theo, chúng ta định nghĩa một biến lưu trữ thẻ <template>(chúng ta sẽ tìm hiểu vấn đề này sau).
  3. Sau đó, chúng ta tạo ra một đối tượng mới dựa trên đối tượng HTMLElement. Điều này sẽ cho phép thẻ mới của chúng ta kế thừa các phương thức và các thuộc tính của bất kỳ thẻ HTML nào như id, className, clientHeith, scrollTop, và childeNodes.
  4. createdCallback là hàm mà sẽ ngay lập tức được khởi tạo khi thẻ mới được tạo ra.
  5. Trong hàm callback đó, chúng ta tạo ra các "Shadow DOM" xác định hình dạng của thẻ tùy biến của chúng ta, <youtube-embed>, ở trong trình duyệt. Chúng ta cũng sẽ bắt đầu viết một hàm tùy biến ở đây.
  6. Cuối cùng, chúng ta đăng ký thẻ tùy biến của chúng ta để cho trình duyệt nhận ra nó.

Nhập HTML

Tiếp theo, trong document chính, nơi các video của chúng ta sẽ được nhúng, chúng ta nhập file youtube-embed.html.

Web Components Polyfill

Web Components là một loạt các công nghệ web (Template, HTML Import, thẻ tuỳ biến và Shadow DOM) kết hợp lại với nhau. Một số trình duyệt như Chrome và Opera đã hỗ trợ các tính năng này, nhưng Firefox, Edge, và Safari có quan điểm riêng về việc hỗ trợ của họ, trong đó họ chỉ hỗ trợ một phần hoặc không hỗ trợ gì cả.

Vì vậy, nếu bạn muốn các thẻ của bạn được áp dụng trong một loạt các trình duyệt (dĩ nhiên bạn làm), bạn cũng cần phải tải cái Web Components polyfill.

Một khi chúng ta đã làm tất cả những điều này và đặt các tập tin ở vị trí của chúng, thì chúng ta đã sẵn sàng thêm các đoạn mã để làm cho thẻ tùy biến của chúng ta hoạt động.

Sử dụng Thẻ Tuỳ biến

Để bắt đầu, ở trong “youtube-embed.html”, chúng ta thêm thẻ <template>. Sau đó, chúng ta lồng thẻ div và các style mà chúng ta tạo ra trong bài trước bên trong nó.

Tại thời điểm này, nếu chúng ta triển khai thẻ <youtube-embed> của chúng ta và phân tích nó với Chrome DevTools, chúng ta sẽ tìm thấy các thẻ div và style mà chúng ta vừa thêm vào bây giờ xuất hiện bên dưới thẻ Shadow DOM.

The Custom Element Shadow DOM Tree viewed in Chrome DevTools

Chọn một Thẻ Shadow DOM

Trở lại với JavaScript của chúng ta, chúng ta cần thêm các code sau để chọn thẻ bao quanh video từ Shadow DOM. Lưu ý rằng chúng ta sử dụng querySelector() từ biến shadowRoot; đây là thành phần mà chúng ta sẽ gắn vào iframe Youtube sau này.

Thuộc tính Tuỳ biến

Trong hướng dẫn trước, chúng ta sử dụng thuộc tính data-embed để truyền ID của video Youtube của bạn. Nhắc lại một lần nữa, ID được sử dụng để lấy hình ảnh video thu nhỏ và để trỏ đến URL nhúng của video.

Trong trường hợp của Web Components, một thuộc tính tuỳ biến tên thì được chấp nhận. Ví dụ, trong trường hợp này, chúng ta có thể giới thiệu một thuộc tính embed.

Sau đó, bên trong hàm createdCallback chúng ta cần phải thêm code sau đây vào giá trị thuộc tính embed.

Chúng ta sẽ truyền hai biến vào hàm tùy biến của chúng ta.

Làm gì cái gì đó

Có lẽ đầu ốc của tôi đã quá tải, nên tôi không thể nghĩ ra một cái tên thích hợp cho các hàm, do đó đặt tên nó là doTheThing.

Hàm này có các dòng code tương tự như chúng ta đã thêm vào trong bài trước, nhưng với một số tinh chỉnh. Hàm này sẽ hiển thị hình thu nhỏ của video Youtube và gắn video Youtube vào trong thành phần bao quanh, .youtube, khi người dùng nhấp chuột.

Và chúng ta đã thiết lập tất cả! Hãy xem mã nguồntrang demo.

Sử dụng

Trong hướng dẫn này, chúng ta đã bao quanh code từ bài trước vào trong một Web Component. Bây giờ chúng ta có thể nhúng một video trên Youtube khéo léo hơn với thẻ tuỳ biến mới của chúng ta: <youtube-embed>, ví dụ:

Tất cả các code (JavaScript, CSS, HTML) được đóng gói trong HTML riêng biệt, hạn chế các lỗi tiềm ẩn bên trong file đó phá vỡ toàn bộ trang web. Và bất cứ khi nào chúng ta cần sử dụng lại nó trong các dự án khác, chúng ta đến và nhập file HTML, youtube-embed.html.

youtube web component demo
Kiêm tra demo trên Github

Tổng kết

Đây là chỉ là một ví dụ về cách chúng ta có thể sử dụng các Web Componet. Bạn có thể tìm thấy các cài đặt tuyệt vời hơn về Web Components trên trang customelements.io. Cuối cùng, tôi hy vọng bạn thích hướng dẫn này và xem nó là một bài tham khảo dễ làm.

Cac nguồn tài liệu khác

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.