더 빠른 YouTube는 JavaScript를 포함합니다

javaScript로 YouTube 임베드 속도를 높이십시오 : 포괄적 인 가이드

키 하이라이트 :

는 JavaScript를 사용하여 표준 YouTube Imbeds를 경량 썸네일 미리보기로 대체하여 초기 페이지로드 시간을 극적으로 줄입니다. 사용자 지정된 YouTube 비디오를 사용하여 사용자 경험 및 페이지 미학을 향상시켜 HTML5 데이터 속성을 사용하여 자동 재생, 브랜딩 및 컨트롤을 제어합니다. 다양한 화면 해상도에 대한 다양한 YouTube 썸네일 품질 옵션을 활용하여로드 속도를 희생하지 않고 시각적 호소력을 최적화하십시오. 순수한 JavaScript (린, 의존성없는 접근법) 또는 jQuery (간단한 코딩 및 더 넓은 브라우저 호환성)를 사용 하여이 솔루션을 효율적으로 구현하십시오.

웹 사이트 속도가 가장 중요합니다. 최소한의 요청이있는 가벼운 콘텐츠는 긍정적 인 사용자 경험에 중요합니다. 그러나 동영상은 컨텐츠를 참여시키는 데 필수적이며, 종종 YouTube와 같은 타사 제공 업체에서 공급되는 컨텐츠에 필수적입니다. 도전? 비디오는 페이지로드 시간을 크게 증가시킵니다. 단일 임베디드 비디오는 뷰어가 적극적으로 보지 않더라도 여러 HTTP 요청을 생성하고 상당한 대역폭을 소비 할 수 있습니다. 이 기사는 Amit Agarwal의 2013 년 접근 방식에서 영감을 얻은이 문제를 완화하기위한 솔루션을 제시하지만 현대 기술로 향상되었습니다. YouTube 동영상의 초기로드 크기를 크게 줄일 것입니다.

솔루션 : 핵심 아이디어는 처음에 전체 비디오 플레이어 대신 썸네일 미리보기를 표시하는 것입니다. JavaScript는 사용자가 클릭 할 때만 썸네일을 실제 플레이어로 동적으로 대체합니다. 이는 초기 페이지로드 크기를 크게 줄입니다. 작은 이미지 인 썸네일은 빠르게로드됩니다 개선 사항 :

이 개선 된 버전은 바닐라 JavaScript와 JQuery 구현을 모두 활용합니다. 또한 HTML5 데이터 속성을 통해 YouTube 비디오 매개 변수를 사용자 정의하는 기능의 새로운 기능도 소개합니다. 이는 다음을 포함하여 플레이어 설정에 대한 세밀한 제어 기능을 제공합니다

• : (0 또는 1) 플레이어 컨트롤을 숨기거나 보여줍니다
: (0 또는 1) YouTube 로고를 제거하십시오 : (0 또는 1) 재생 후 관련 비디오 제안을 비활성화합니다. : (0 또는 1) 비디오 제목 및 업 로더 정보를 숨기십시오.
• : (초) 특정 시간에 재생을 시작합니다 : (예 : HD720) 비디오 품질 설정 (사용 가능한 경우)
비디오가 재생되면 (즉시 재생을 시작하려면) 및
• (비활성시 컨트롤을 숨기려면)와 같은 매개 변수는 자동으로 추가됩니다. YouTube 썸네일 옵션 :
YouTube는 다음과 같은 URL을 통해 액세스 할 수있는 몇 가지 썸네일 크기를 제공합니다 (또는 를 더 짧은 대안으로 사용). 옵션은 다음과 같습니다

https://img.youtube.com/vi/<video-id>/<thumbnail-size>.jpg</thumbnail-size></video-id> (120x90) i.ytimg.com (480x360)

(320x180)
(640x480)
• (1280x720) default.jpg 구현 :
• html : hqdefault.jpg HTML은 YouTube 비디오 ID, 크기 및 (선택적으로) 사용자 정의 매개 변수를 설정합니다.
CSS :
• CSS는 썸네일을 스타일로 만들고 중심으로, 재생 아이콘을 추가합니다 (효율을 위해 데이터 URI 사용) : mqdefault.jpg.
(JavaScript 및 JQuery 구현은 간결하게 생략되지만 원본 기사에서 사용할 수 있습니다.) .
• 결과와 결론 : 이 솔루션 구현은 페이지로드 시간이 크게 향상됩니다. 실제 테스트는 HTTP 요청과 페이지 크기가 상당한 감소를 보여 주므로로드 시간이 빠릅니다. 코드는 실험 및 개선을 위해 Codepen에서 사용할 수 있습니다. 이 간단한 코드 변경은 상당한 성능 향상을 제공하므로 임베디드 YouTube 비디오를 사용하여 모든 웹 사이트에 가치있는 추가 기능을 제공합니다.

위 내용은 더 빠른 YouTube는 JavaScript를 포함합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!