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

Posted on by adminChuyên mục:Kiến thức Internet
Trong bài hướng dẫn trước ” Cách ” Lazy Load ” những Video YouTube được nhúng ” tất cả chúng ta đã khám phá 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 website của tất cả chúng ta tải nhanh hơn một chút ít, đặc biệt quan trọng 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ư . Đó 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 moreshadow-root Read on to find out moreshadow-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ẻ .

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, .

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

1
 
( function( window, document, undefined ) {

2
 








3




    / / ( 1 )









4




    var thatDoc = document;









5




    var thisDoc = ( thatDoc._currentScript | | thatDoc.currentScript ) .ownerDocument;









6












7




    / / ( 2 )









8




    var template = thisDoc.querySelector( 'template' ) .content;









9












10




    / / ( 3 )









11




    var YoutubeProto = Object.create( HTMLElement.prototype ) ;









12












13




    / / ( 4 )









14




    YoutubeProto.createdCallback = function( ) {









15




      / / ( 5 )









16




        var shadowRoot = this.createShadowRoot( ) ;









17




        var clone = thatDoc.importNode(template, true) ;









18




        	shadowRoot.appendChild( clone ) ;









19












20




		/ / Add custom code here ...









21




    } ;









22












23




    / / ( 6 )









24




    window.youtubeEmbed = thatDoc.registerElement( 'youtube-embed', {









25




        prototype : YoutubeProto









26




    } ) ;









27












28




} ) ( window, document ) ;









Khá nhiều thứ, nhưng được đánh số hài hòa và hợp lý, vì thế hãy xem chúng làm những việc làm 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. 

  2. Tiếp theo, chúng ta định nghĩa một biến lưu trữ thẻ (chúng ta sẽ tìm hiểu vấn đề này sau).
    3. 

  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. 

  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. 

  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, , ở 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. 

  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ó.
    7. 



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.










1














2




 
rel=
"import"
 
href=
"youtube-embed.html"
>










Web Components Polyfill 


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

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








1














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


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




Để bắt đầu, ở trong “youtube-embed.html”, chúng ta thêm thẻ . 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ó.










1














2




    










54




    
 
class=
"youtube"
>










55




    	
 
class=
"play-button"
>












56




    






57










Tại thời điểm này, nếu chúng ta triển khai thẻ  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 DevToolsThe Custom Element Shadow DOM Tree viewed in Chrome DevToolsThe 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.










1




YoutubeProto.createdCallback = function( ) {









2




    ...









3




	var video = shadowRoot.querySelector( ". youtube" ) ; / / Select the video wrapper









4




} ;









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.










1




 
embed=
"AqcjdkPMPJA"
>












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.










1




YoutubeProto.createdCallback = function( ) {









2




    ...









3




	var video = shadowRoot.querySelector( ". youtube" ) ; 
// Select the video wrapper.











4




	var embed = this.getAttribute( "embed" ) ; / / Get the embed attribute value .









5




} ;









Chúng ta sẽ truyền hai biến vào hàm tùy biến của tất cả 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.










1




YoutubeProto.createdCallback = function( ) {









2




    ...









3












4




    var embed = this.getAttribute( "embed" ) ;









5




    var video = shadowRoot.querySelector( ". youtube" ) ;









6












7




    this.doTheThing( embed, video ) ;









8




} ;









9












10




YoutubeProto.doTheThing = function( embedID, videoElem ) {









11




	var source = "https://img.youtube.com/vi/"+ embedID +"/ sddefault.jpg";









12




	var image  = new Image( ) ;









13












14




    image.src = source;









15












16




    image.addEventListener( "load", function( ) {









17




        videoElem.appendChild( image ) ;









18




    } ) ;









19












20




    videoElem.addEventListener( "click", function( ) {









21












22




        var iframe = document.createElement( "iframe" ) ;









23












24




            iframe.setAttribute( "frameborder", "0" ) ;









25




            iframe.setAttribute( "allowfullscreen", " " ) ;









26




            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ embedID +"? rel = 0 và showinfo = 0 và autoplay = 1" ) ;









27












28




            this.innerHTML = " ";









29




            this.appendChild( iframe ) ;









30




    } ) ;









31




} ;









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à tất cả chúng ta đã thiết lập tổng thể ! Hãy xem mã nguồn và trang 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: , ví dụ:








1




 embed =
"AqcjdkPMPJA"
>








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.


Tổng kết


Đây là chỉ là một ví dụ về cách tất cả chúng ta hoàn toàn có thể sử dụng những Web Componet. Bạn hoàn toàn có thể tìm thấy những thiết lập tuyệt vời hơn về Web Components trên trang customelements.io. Cuối cùng, tôi kỳ vọng bạn thích hướng dẫn này và xem nó là một bài tìm hiểu thêm dễ làm .


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

	
	

				

						
							
						

					

					

			admin