WordPress에 비디오를 삽입하는 방법

흥미롭고 매력적인 콘텐츠를 만드는 것은 방문자가 콘텐츠에 빠져들게 하고 귀하와 귀하의 제품에 대해 더 알고 싶어 하는 열쇠입니다. 이전에 이미 사랑에 빠지게 만드는 페이지를 만드는 몇 가지 트릭을 언급했고 시각적 요소를 포함하는 것의 중요성에 대해 명시적으로 언급했습니다.

실제로 작년 Zenith의 연구에 따르면 2021년에는 동영상 조회수가 하루 최대 100분 증가하고 동영상 광고 지출이 35% 증가할 것으로 예측했습니다. Cisco에 따르면 2022년까지 모든 인터넷 트래픽의 80%가 비디오 형식이 될 것입니다. 그리고 저는 이러한 모든 예측이 현재의 전염병에 미치지 못하는 것이 두렵습니다.

따라서 웹 사이트의 게시물과 페이지에 비디오를 추가하는 것의 중요성에 대해 더 이상 고민하지 않고 WordPress에서 비디오를 추가하는 것이 얼마나 쉬운지, 최신 버전의 Gutenberg 9.2.2에서 제공하는 새로운 기능을 살펴보겠습니다.

비디오의 URL 복사

WordPress 편집기를 사용하면 모든 플랫폼에서 매우 쉽게 비디오를 포함할 수 있습니다. 브라우저에서 비디오가 있는 플랫폼에서 해당 URL을 직접 복사할 수 있습니다.

비디오를 공유하고 비디오 시작 시간 표시와 같은 추가 옵션을 추가할 수 있는 공유 버튼을 클릭하여 URL을 복사할 수도 있습니다.

그런 다음 텍스트 블록에 직접 붙여넣거나 삽입할 비디오 유형의 블록을 미리 선택할 수도 있습니다. 따라서 예를 들어 Matt Mullenweg가 등장하는 순간부터 시작되는 YouTube의 WordCamp US 2019 – State of the Word 비디오를 포함하려면 새 YouTube 블록을 만들고 URL https://youtu.be/gS6_xOABTWo?t=2085 를 삽입하겠습니다. https://youtu.be/gS6_xOABTWo?t=2085 (또는 URL https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085 ).

시간은 초 단위로 표시되어야 합니다. 또한 페이지에서 원하는 대로 비디오를 정렬할 수도 있습니다.

그리고 게시물에 새 포함된 비디오를 얻습니다.

뿐만 아니라 YouTube 블록(또는 다른 유형의 비디오)을 추가할 때 비디오 디스플레이에 추가할 수 있고 재생되는 플랫폼에 따라 다른 옵션도 있습니다.

따라서 예를 들어 YouTube의 경우 사용 가능한 옵션(URL의 추가 매개변수를 통해)은 다음과 같습니다.

• 테마에 맞게 기본 너비와 높이로 비디오를 포함하려면: https://www.youtube.com/gS6_xOABTWo
• 너비와 높이를 명시적으로 지정하려면: https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
• 너비만 지정하려면: https://www.youtube.com/watch?v=gS6_xOABTWo&w=320
• 플레이어를 왼쪽으로 정렬하려면: https://www.youtube.com/watch?v=gS6_xOABTWo&align=left
• 플레이어를 오른쪽에 맞추려면: https://www.youtube.com/watch?v=gS6_xOABTWo&align=right
• 동영상 종료 후 동일한 채널의 관련 동영상만 표시하려면: https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
• 동영상의 시작 및 종료 시간을 지정하려면 시작 및 종료 시간을 추가하세요. https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

WordPress에서 비디오 업로드 및 보기

때로는 자신의 비디오를 타사 플랫폼에 업로드하고 싶지 않고 WordPress 서버에서만 독점적으로 갖고 싶은 경우가 있습니다. 미디어 라이브러리에 비디오를 업로드하고 추가하는 것은 다른 이미지를 업로드하는 것만큼 쉽습니다. 미디어를 클릭하거나 비디오 유형 블록을 추가합니다.

이미지를 추가할 때와 마찬가지로 비디오를 직접 업로드하거나 미디어 라이브러리에서 선택하거나 URL을 삽입할 수 있습니다.

그런 다음 미디어 라이브러리에서 삽입할 비디오만 선택하면 페이지나 게시물에서 사용할 수 있게 됩니다.

일단 선택되면 모든 방문자가 사용할 수 있습니다.

또한 새 버전의 Gutenberg 9.2.2. 비디오 삽입에 새로운 기능을 추가합니다. 특히 편집 메뉴에서 <track> 유형의 HTML 요소를 추가할 수 있습니다.

비디오를 다운로드한 경우 비디오가 포함된 폴더에 SRT 파일도 포함되어 있음을 분명히 알았습니다. 이것은 비디오에 포함되어 있지 않지만 비디오 플레이어가 보고 있는 비디오와 동기화하여 추출하고 표시할 수 있는 자막 파일입니다. 따라서 track 요소는 이러한 SRT 파일의 위치와 일부 추가 기능을 나타내는 역할을 합니다.

비디오를 삽입할 때 생성된 HTML은 다음과 유사합니다.

 <!-- wp:video {"id":15850} --> <figure class="wp-block-video"> <video controls="" src="/my-site.com/.../my-video.mp4"></video></figure> <!-- /wp:video -->

이 새 버전의 Gutenberg를 사용하면 HTML 편집 없이 편집 메뉴에서 비디오에 트랙 요소를 추가할 수 있습니다. 예를 들어 비디오에 영어 자막을 추가하면 HTML 코드에 자막 정보가 포함된 트랙이 포함될 수 있습니다.

 <video controls="" src="/my-site.com/.../my-video.mp4"> <track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"> </video>

트랙에 표시할 수 있는 속성은 다음과 같습니다.

• srclang – 트랙의 텍스트 데이터 언어. 유효한 BCP 47 언어 태그 코드여야 합니다.
• label – 플레이어 인터페이스의 제목입니다.
• 종류 – 트랙 텍스트가 사용되는 방식입니다. 다음 키워드를 가질 수 있습니다.
  • 자막
    • 언어를 이해하지 못하는 사람들을 위해 설계된 비디오 콘텐츠 번역을 위한 자막(예: 비디오가 영어인 경우 스페인어 자막).
  • 캡션
    • 청각 문제가 있는 사람들을 위한 비디오(대화 및 기타 소리)에서 들은 내용을 전사합니다.
  • 설명
    • 시각 장애인이나 비디오를 볼 수 없는 사람들을 위한 비디오 콘텐츠의 텍스트 설명입니다.
  • 장
    • 챕터 제목은 사용자가 멀티미디어 리소스를 탐색할 때 사용하기 위한 것입니다.
  • 메타데이터
    • 스크립트에서 사용하는 트랙입니다. 사용자에게 표시되지 않습니다.
• src – 텍스트 파일의 URL.

이 트랙을 어떻게 추가합니까? 매우 쉽습니다. 비디오 유형 블록을 추가하고 표시할 비디오를 선택한 후 비디오 편집 메뉴에 새 옵션이 나타납니다. 이 옵션은 미디어 라이브러리 열기 또는 업로드 옵션이 있는 트랙 추가 입니다.

파일을 미디어 라이브러리에 업로드하면 선택할 준비가 된 것입니다.

트랙의 속성을 편집할 수 있는 비디오 편집 메뉴에 이미 어떻게 나타나는지 확인할 수 있습니다.

편집 버튼을 클릭하고 속성을 적절하게 수정합니다. 이제 비디오 디스플레이와 동기화된 비디오에 포함된 텍스트 트랙을 갖게 됩니다.

따라서 미디어 라이브러리에 자신의 비디오를 가질 수 있을 뿐만 아니라 비디오에 대한 추가 정보를 쉽게 포함할 수도 있습니다.

타사 플랫폼에서 호스팅한 비디오를 포함하는 것은 비디오가 있는 위치의 URL을 복사하기만 하면 매우 쉽다는 것을 이미 보았습니다. 그러나 어떤 이유로든 자신의 WordPress 설치에서 비디오를 호스팅하려는 경우 이 최신 버전의 Gutenberg를 사용하면 이제 편안한 방식으로 비디오를 표시할 수 있습니다.

Unsplash에 있는 CardMapr의 사진 .