HTML로 비디오를 재생하는 가장 쉬운 방법은 YouTube를 이용하는 것입니다.
비디오를 다른 형식으로 변환하는 것은 어렵고 시간이 많이 걸릴 수 있습니다.
더 쉬운 해결책은 YouTube에서 웹 페이지의 비디오를 재생하도록 하는 것입니다.
YouTube에서는 동영상을 저장하거나 재생할 때 ID(예: tgbNymZ7vqY)가 표시됩니다.
이 ID를 사용하여 HTML 코드에서 비디오를 참조할 수 있습니다.
웹 페이지에서 비디오를 재생하려면 다음을 수행하세요.
<iframe>웹 페이지에서 요소를 정의하세요src속성이 비디오 URL을 가리키도록 하세요.width및 속성을 사용하여 height플레이어의 크기를 지정합니다.<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>YouTube URL에 추가하면 사용자가 페이지를 방문할 때 자동으로 동영상이 재생되도록 할 수 있습니다 autoplay=1. 하지만 동영상이 자동으로 재생되는 것은 방문자에게는 불편할 수 있습니다!
참고: Chromium 브라우저는 대부분의 경우 자동 재생을 허용하지 않습니다. 하지만 음소거 자동 재생은 항상 허용됩니다.
비디오를 자동으로 재생하려면 (하지만 음소거 상태로) mute=1뒤에 추가하세요 . autoplay=1
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>재생할 비디오를 쉼표로 구분한 목록(원래 URL 외에)입니다.
비디오를 영원히 반복하려면 playlist=videoID와 를 추가하세요 .loop=1
loop=0(기본값) - 비디오가 한 번만 재생됩니다.
loop=1- 영상이 (영원히) 반복됩니다.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>controls=0비디오 플레이어에 컨트롤을 표시하지 않도록 추가합니다 .
controls=0- 플레이어 컨트롤이 표시되지 않습니다.
controls=1(기본값) - 플레이어 컨트롤이 표시됩니다.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>링크는 거의 모든 웹 페이지에 있습니다. 링크를 통해 사용자는 클릭 몇 번으로 페이지를 이동할 수 있습니다.
HTML 링크는 하이퍼링크입니다.
링크를 클릭하면 다른 문서로 이동할 수 있습니다.
링크 위로 마우스를 움직이면 마우스 화살표가 작은 손 모양으로 바뀝니다.
참고: 링크는 반드시 텍스트일 필요는 없습니다. 이미지나 다른 HTML 요소도 링크가 될 수 있습니다!
HTML <a>태그는 하이퍼링크를 정의합니다. 구문은 다음과 같습니다.
<a href="url">link text</a>요소 의 가장 중요한 속성은 링크의 목적지를 나타내는 속성 <a> 입니다 . href
링크 텍스트 는 독자에게 표시되는 부분입니다.
링크 텍스트를 클릭하면 지정된 URL 주소로 이동하게 됩니다.
이 예에서는 W3Schools.com에 대한 링크를 만드는 방법을 보여줍니다.
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>기본적으로 링크는 모든 브라우저에서 다음과 같이 표시됩니다.
팁: CSS로 링크 스타일을 지정하여 다른 모습을 볼 수도 있습니다!
기본적으로 링크된 페이지는 현재 브라우저 창에 표시됩니다. 이를 변경하려면 링크의 다른 대상을 지정해야 합니다.
속성 target은 링크된 문서를 열 위치를 지정합니다.
속성 target은 다음 값 중 하나를 가질 수 있습니다.
_self- 기본값. 클릭한 창/탭에서 문서를 엽니다._blank- 새 창이나 탭에서 문서를 엽니다._parent- 부모 프레임에서 문서를 엽니다._top- 창의 전체 본문에서 문서를 엽니다.target="_blank"를 사용하면 링크된 문서를 새 브라우저 창이나 탭에서 열 수 있습니다.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>위의 두 예는 모두 속성에 절대 URL (전체 웹 주소)을 사용하고 있습니다 href.
로컬 링크(동일한 웹사이트 내의 페이지로의 링크)는 상대 URL (https://www 부분 제외)로 지정됩니다.
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>이미지를 링크로 사용하려면 태그 <img> 안에 태그를 넣기만 하면 됩니다 <a>.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>mailto:속성 내부를 사용하여 href사용자의 이메일 프로그램을 열어 새 이메일을 보낼 수 있는 링크를 생성합니다.
<a href="mailto:someone@example.com">Send email</a>HTML 버튼을 링크로 사용하려면 JavaScript 코드를 추가해야 합니다.
JavaScript를 사용하면 버튼을 클릭하는 것과 같은 특정 이벤트에서 어떤 일이 발생하는지 지정할 수 있습니다.
<button onclick="document.location='default.asp'">HTML Tutorial</button>팁: JavaScript 튜토리얼 에서 JavaScript에 대해 자세히 알아보세요 .
이 title속성은 요소에 대한 추가 정보를 지정합니다. 이 정보는 대부분 마우스를 요소 위로 가져가면 도구 설명 텍스트로 표시됩니다.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>웹 페이지에 링크하려면 전체 URL을 사용하세요.
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>현재 웹 사이트의 html 폴더에 있는 페이지에 대한 링크:
<a href="/html/default.asp">HTML tutorial</a>현재 페이지와 같은 폴더에 있는 페이지로의 링크:
<a href="default.asp">HTML tutorial</a>HTML 파일 경로 장에서 파일 경로에 대해 자세히 알아볼 수 있습니다 .
<a>링크를 정의합니다.href링크 주소를 정의합니다.target링크된 문서를 열 위치를 정의합니다.<img>요소(내부 ) 를 사용하세요 .<a>mailto:속성 내부의 스키마를 사용하여 href사용자의 이메일 프로그램을 여는 링크를 만듭니다.| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조를 방문하세요 .
