HTML, 사용자 정의 글꼴 및 Shotstack API를 사용하여 비디오 생성 방법
다음은 가능한 빠른 프레젠테이션입니다.
그것의 또 다른 장점은 어떤 글씨체를 사용해도 브랜드 준칙에 부합되고 인쇄와 문자 스타일을 완전히 제어할 수 있다는 것이다.
본 강좌에서 우리는 HTML 자산 유형의 기초 지식, 구글 글꼴을 어떻게 사용하는지, 그리고 이 과정이 브라우저를 위한 디자인과 어떤 차이가 있는지 토론할 것이다.
이 강좌를 시작하기 전에 무료 API 키를 등록했는지 확인하십시오.또한 cURL 또는 Postman을 사용하여 API 요청을 수행하는 데 익숙한지 확인하십시오.우리의 Hello World 강좌가 가장 좋은 시작입니다.
HTML을 사용하여 텍스트 만들기
HTML을 사용하여 비디오에서 텍스트를 만드는 것은 HTML 자산과 HTML 세션과 CSS 응용 스타일을 사용하는 경우입니다.
다음 JSON은 기본 제목을 만듭니다.
{
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>Style text in video using HTML and CSS</p>",
"css": "p { color: #ffffff; font-size: 42px; text-align: center; }",
"width": 450,
"height": 200
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
이 비디오에서 텍스트는 기본 시스템 글꼴로 표시되며 색상, 크기 및 정렬은
css 매개변수에서 지정됩니다.또한 텍스트가 지정된 텍스트 영역width: 450과 height: 200에 어떻게 구속되고 포장되는지 주의해야 한다.사용자 정의 글꼴 사용
기본 시스템 글꼴을 사용하기를 원할 수는 없습니다. 따라서 저희의 글꼴을 계속 추가하겠습니다.
중요한 것은 Shotstack은 브라우저를 사용하지 않고 HTML을 보여주기 때문에 @font-face 설정을 지원하지 않는다는 것을 알아야 한다.반면 실제 글꼴 TTF(TrueType Font 파일은 다운로드하여 저희 플랫폼에 설치해야 텍스트 스타일을 설정할 수 있습니다.
API가 이 프로세스를 단순화합니다. 다음 JSON을 참조하십시오.
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>Style text in video using HTML and CSS</p>",
"css": "p { font-family: 'Open Sans'; color: #ffffff; font-size: 42px; text-align: center; }",
"width": 450,
"height": 200
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
]
src 매개변수는 S3 계정에 저장된 TTF 파일을 가리킵니다.그리고 CSS에서 사용합니다font-family: 'Open Sans'.fonts는 여러 글꼴을 사용할 수 있는 그룹입니다.다음 비디오를 만듭니다.
텍스트 요소의 스타일 설정하기
원하는 대로 HTML과 CSS를 사용하면 텍스트에 추가 스타일을 추가할 수 있습니다.아래 JSON과 동영상을 보면 텍스트의 단일 단어가 강조 표시됩니다.
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>Style text in video using <b>HTML</b> and <u>CSS</u></p>",
"css": "p { font-family: 'Open Sans'; color: #ffffff; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e83e8c; text-decoration: none; }",
"width": 450,
"height": 200
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}
<b> 표기와 <u> 표기 사이의 단어에 스타일을 적용했습니다.Shotstack은 HTML 및 CSS 서브셋만 지원하며 HTML4/CSS2 기반입니다.그것은 기본 텍스트와 간단한 표 기반 레이아웃에 적용된다.문서supported tags and attributes의 전체 목록을 확인하십시오.
Shotstack과 함께 사용할 글꼴 준비
앞에서 말한 바와 같이 Shotstack은 브라우저처럼 글꼴을 사용하지 않습니다. @fontface가 아닌 실제 TTF 글꼴 파일이 필요합니다.
우리가 받은 가장 유행하는 요청 중 하나는 Shotstack API에서 무료 구글 글꼴을 사용하는 방법이다.Google 글꼴에서 TTF 파일을 가져와 동영상에서 사용하는 방법과 서로 다른 글꼴의 무게와 스타일을 처리하는 방법을 보여 드리겠습니다.
사용자가 자주 범하는 오류는 삽입 코드 URL을 글꼴 src로 사용하는 것입니다. 보통 다음과 같습니다.
"fonts": [
{
"src": "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap"
}
]
글꼴 시리즈 다운로드
구글 글꼴을 다운로드하려면 사용하고 싶은 글꼴이 있는 페이지를 열어 주십시오. 예시에서 저희는 Montserrat 글꼴을 사용합니다.아래 그림과 같이 오른쪽 위 모서리에 있는 시리즈 다운로드 링크를 클릭하지 않고 스타일 선택을 클릭합니다.
이것은 모든 TTF 글꼴 파일을 포함하는 zip 파일을 다운로드합니다.사용할 파일을 추출할 수 있습니다.두 번 클릭하면 글꼴을 미리 볼 수 있습니다.
각 글꼴의 무게와 스타일은 굵기, 검은색, 기울기, 연한 색 등 여러 가지 변화가 있다...사용할 실제 가중치 및 스타일을 선택하고 공개 액세스 가능한 URL에 업로드해야 합니다.
이 예에서는 다음 몬테세라트 글꼴 스타일을 선택하여 AWS S3 계정에 업로드합니다.
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Montserrat-Regular.ttf"
},
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Montserrat-Bold.ttf"
},
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Montserrat-Black.ttf"
}
]
올바른 글꼴 시리즈 사용하기
마지막 단계는 CSS
font-family 속성을 사용하여 텍스트에 글꼴을 적용하는 것입니다.올바른 글꼴 이름을 선택해야 합니다.가장 간단한 방법은 데스크톱에서 글꼴을 미리 보는 것이다.예를 들어, Windows에서 Montserrat Regular의 미리보기는 다음과 같은 이름으로 표시됩니다.
이름이 몬테세라트로 표시되므로 글꼴 계열 규칙은 다음과 같이 설정됩니다.
font-family: 'Montserrat';
굵은 변형을 표시하려면 텍스트를
<b> 태그에 포장하거나 다음 명령을 사용해야 합니다CSS 규칙:
font-family: 'Montserrat'; font-weight: bold;
따라서 글꼴 시리즈는
font-family: 'Montserrat Black';
텍스트의 어떤 유형의 스타일과 창조적인 효과와 당신의 동영상 수요에 영향을 주는 것을 좋아합니다.
Reference
이 문제에 관하여(HTML, 사용자 정의 글꼴 및 Shotstack API를 사용하여 비디오 생성 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shotstack/how-to-create-videos-using-html-custom-fonts-and-the-shotstack-api-po3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
