Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

Embed Video HTML:단계별 가이드

다음 기능을 사용하여 HTML 문서에 비디오를 포함할 수 있습니다. <video> , <object> <embed> <엠>. 각각 다르게 작동하며 src 원하는 동영상의 URL을 가리키는 속성


웹 페이지를 만들 때 문서에 비디오를 포함할지 결정할 수 있습니다. 예를 들어 케이크 굽는 방법에 대한 자습서를 작성하고 레시피와 함께 비디오를 포함할 수 있습니다.

HTML 문서에 비디오를 포함하는 몇 가지 방법이 있습니다. 이 가이드에서는 이러한 HTML을 사용하여 동영상을 삽입하는 세 가지 방법을 다룹니다. 기능:<video> 사용 , <object> 사용 , <embed> 사용 .

동영상 태그

HTML5 웹 페이지에 비디오를 포함하는 데 유용한 요소 포함:<video> . 요소가 모든 최신 웹 브라우저에서 작동하는 것은 아니지만(여전히 다소 새롭지만) 태그는 대부분의 브라우저에서 작동합니다.

video 요소는 비디오 소스와 사용하려는 컨트롤의 두 가지 매개변수를 사용합니다. 다음은 삽입 동영상 HTML의 구문입니다. <video> 태그:

<video controls="controls" src="videos/ourVideo.mp4">
	This browser does not support the video element.
</video>

위의 예에서는 src를 사용합니다. videos/ourVideo.mp4에서 동영상을 참조하는 속성 . 또한 controls를 사용하여 브라우저와 함께 제공되는 기본 컨트롤 세트를 활용하도록 지시합니다. 기인하다. <video> 내의 텍스트 웹페이지에서 동영상을 렌더링할 수 없는 경우 태그가 나타납니다.

대체 소스를 포함하려면 다음 코드를 사용할 수 있습니다.

<video controls="controls">
	<source src="videos/ourVideo.mp4" type="video/mp4">
	<source src="videos/ourSecondVideo.mp3" type="video/mp3">
	This browser does not support the video element.
</video>

이제 소스 요소를 사용하여 웹 페이지에 비디오를 삽입했습니다. 위에서 mp4 및 mp3 리소스를 참조했지만 <video>에서 모든 표준 비디오 형식을 사용할 수 있습니다. 태그.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

태그 삽입

또한 <embed>를 사용할 수 있습니다. 비디오 및 기타 멀티미디어를 HTML에 삽입하는 요소 웹 페이지. 다음은 <embed>의 예입니다. 웹 페이지에서 Adobe Flash 비디오를 참조하는 데 사용되는 태그:

<embed src="videos/ourVideo.swf" width="600px" height="400px">

이 코드는 웹 페이지에서 Flash 비디오를 렌더링합니다. width도 사용했습니다. 및 height 비디오 플레이어의 크기를 지정하는 매개변수. 이 경우 비디오 플레이어는 600×400 크기로 렌더링됩니다.

그러나 Flash 리소스를 참조하는 경우 비디오가 재생되지 않을 수 있습니다. 이는 사용자가 시스템에 Flash를 설치하고 활성화해야 하지만 많은 사용자가 그렇지 않기 때문입니다.

객체 태그

<object>를 활용할 수도 있습니다. HTML에 다양한 유형의 미디어를 포함하는 태그 웹 페이지. 예를 들어 이 태그를 사용하여 HTML5를 삽입할 수 있습니다. 비디오, 오디오, Flash 리소스 또는 PDF 파일을 웹 페이지에 추가할 수 있습니다. 다음은 <object>의 예입니다. 웹 페이지에 비디오를 삽입하는 데 사용되는 요소:

<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>

다시 말하지만 사용자는 <object>에 대해 Flash를 설치하고 활성화해야 합니다. 태그가 작동합니다. <object>를 계속 사용하고 싶어도 , <video> 사용을 고려하십시오. Flash가 설치되지 않은 사용자를 위한 요소 또는 둘 다.

결론

HTML 웹 페이지에 비디오 파일을 포함할 수 있는 세 가지 요소가 있습니다. <video> , <object><embed> . 따라서 웹 페이지에 비디오를 추가하려는 경우 이러한 태그를 사용해야 합니다. 오늘 우리는 이러한 태그의 사용과 브라우저 및 Flash와의 호환성에 대해 논의했습니다.

이제 모든 웹 페이지에 동영상을 삽입하는 데 필요한 지식을 갖추게 되었습니다!