HTML 문서에 동영상이나 비디오를 삽입하는 방법

아래 예를 사용하여 동영상을 HTML 문서에 삽입 할 수 있습니다. 호환성을 위해 모든 주요 브라우저 및 운영 체제에서 지원하는 MP4 비디오 형식을 사용하는 것이 좋습니다.

팁 : 대역폭 비용 때문에 서버에서 영화를 호스팅하는 것이 비용이 많이들 수 있습니다. 동영상 파일 호스팅에 대해 걱정하지 않고 많은 잠재 고객의 관심을 끌고 싶다면 YouTube에서 동영상을 호스팅하고 사이트에 링크를 삽입하는 것이 좋습니다.

참고 : 아래의 모든 제안 사항이 모든 브라우저에서 작동하는 것은 아닙니다. 사용하기로 결정한 솔루션이 지원하려는 브라우저에서 작동하는지 확인하십시오.

아래 예제는 브라우저 창에서 비디오 파일을 볼 수있는 여러 가지 방법을 제공합니다. 파일에 대한 직접 다운로드 링크를 만들어 브라우저에서 동영상이 재생되지 않는 경우 방문자가 파일을 다운로드 할 수 있도록하는 것이 좋습니다. 다음은이 문서의 두 비디오 파일에 대한 직접 링크의 두 가지 예입니다.

플로피 드라이브 로봇

HTML 코드

 플로피 드라이브 로봇 

IBM Linux 상용

HTML 코드

 IBM Linux 상용 

YouTube 동영상 퍼가기

유튜브에 비디오를 호스팅하는 것은 대역폭 비용을 절약하고 많은 시청자를 지원하며 인터넷에서 가장 인기있는 페이지 방문자에게 비디오를 소개 할 수 있기 때문에 훌륭합니다. 아래는 YouTube에서 호스팅되고이 사이트에 내장 된 동영상의 예입니다.

HTML 코드

모든 YouTube 동영상의 HTML 코드는 모든 YouTube 동영상에있는 공유 링크를 통해 찾을 수 있습니다. 공유 링크를 클릭하면 소스 링크를 클릭하십시오. 아래는 위의 YouTube 동영상을 표시하는 데 사용되는 코드의 예입니다.

동영상 태그

태그는 모든 최신 브라우저에 동영상을 표시하도록 설계된 HTML 태그입니다. 이 태그는 MP4, Ogg 및 WebM 비디오 형식을 지원하며 단일 HTML 태그로 구현 될 수 있습니다.

HTML 코드

 브라우저가 지원하지 않습니다. 

기본 포함 태그

아래는 웹 페이지에 파일을 삽입하는 가장 기본적인 방법에 대한 코드입니다.

HTML 코드 예

이 예제에서는 embed 요소를 사용하여 재생할 동영상 파일의 소스를 가리 킵니다. 주의해야 할 점은 매우 기본적인 예이며 동영상 파일이 지원되지 않는 경우 플러그인을 다운로드 할 위치를 사용자에게 알려주지 않으며 경고를 표시하지 않습니다.

img 태그를 사용하여 동영상 파일 추가

태그를 사용하지 않으려면 태그를 사용하여 동영상 파일을 포함 할 수 있습니다. 태그를 사용하십시오.

HTML 코드 예

QuickTime 동영상 (.MOV)을 재생하기위한 태그 삽입

Apple QuickTime 동영상 파일은 인터넷에서 인기있는 또 다른 유형의 동영상입니다. 다음은 이러한 파일을 웹 페이지에 포함시키는 방법에 대한 기본 예제입니다.

참고 : QuickTime은 Microsoft Windows에서 더 이상 지원되지 않으며 모든 새 브라우저는이 QuickTime 동영상 포함 방법을 더 이상 지원하지 않습니다.

HTML 코드 예

위의 삽입 예제에서 코드의 첫 번째 부분은 동영상 파일 자체 인 동영상 파일의 src (소스)를 가리 킵니다. 다음으로 pluginspage 는 방문자가 플러그인을 설치하지 않은 경우 플러그인의 위치입니다. 너비높이는 비디오 파일의 실제 크기입니다. Controller 값을 true 또는 false로 설정하여 맨 아래 컨트롤의 표시를 전환 할 수 있습니다.

팁 : 컨트롤러를 볼 수없는 경우 비디오 파일의 높이를 높이는 것이 좋습니다.

루프 는 완료되면 자동으로 파일을 다시 시작하기위한 설정입니다. 마지막으로, 자동 재생 은 페이지로드가 끝난 후 브라우저가 비디오 파일 재생을 시작할지 여부를 알려줍니다.

플러그 - 인을 지정하는 임베드 태그의 유형 속성

embed 태그에서 type 속성을 포함시켜 비디오 파일의 MIME 유형을 지정합니다. 이렇게하면 브라우저에서 비디오를 재생하는 데 필요한 플러그인을 지정할 수 있습니다.

HTML 코드 예

위의 예에서 type 속성은 AVI 비디오 파일의 MIME 유형인 video / x-msvideo로 설정됩니다.

다른 유형의 비디오 파일에 대한 유형 속성에 할당 할 값을 결정하려면 IANA 미디어 유형 페이지에서 비디오 파일의 MIME 유형 목록을 확인하십시오.