HTML 비디오 작업 방법

Sep 15, 2025

어떻게

YouTube를 위로 이동하십시오 ... & lt; 비디오 & gt; 요소와 조금 자바 스크립트 , 자신만의 비디오 사이트를 만들 수 있습니다. 비디오 요소는 사용하기가 상당히 간단하지만, 플레이어의 행동에 대한 높은 수준의 제어력을 제공하는 JavaScript와 결합 할 때 실제 전력이옵니다.

이 자습서에서는 비디오의 기본 설정을 고려하여 재생할 파일을 선택하고 축소판을 생성합니다.

01. 기본 페이지를 만듭니다

HTML 페이지 개요로 시작합시다. 간단한 DIV 구조, 스타일링, 가장 비판적으로 스크립트 파일을위한 CSS가 필요합니다. 비디오 태그가 현재 비어 있으므로 페이지를로드 할 때 아무 것도하지 않습니다. 그러나 우리는 그것을주는 것입니다 신분증 그래서 우리는 자바 스크립트로 그것을 제어 할 수 있습니다.

 & lt; doctype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = 'UTF-8'/ gt;
  & lt; 제목 & gt; 내 HTML 비디오 플레이어 & lt; / title & gt;
  & lt; 링크 rel = '스타일 시트'href = 'custom.css'/ gt;
  & lt; script src = "player.js"& gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; div id = "title"& gt;
  & lt; h1 & gt; 내 비디오 라이브러리에 오신 것을 환영합니다! & lt; / h1 & gt;
아래의 비디오를 스크롤하고 재생하려는 것을 클릭하십시오.
  & lt; / div & gt;
  & lt; div id = "thumbnail-container"& gt;
  & lt; / div & gt;
  & lt; Div ID = "플레이어 컨테이너"& gt;
  & lt; 비디오 ID = "플레이어"& gt;
  & lt; / 비디오 & gt;
  & lt; div id = "컨트롤"& gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / body & gt;
  & lt; / html & gt;

02. 스타일의 페이지

그런 다음 스타일링을 페이지에 추가하기 시작합니다. 우리가 너무 영리한 일을하려고하기 전에 몇 가지 DIV 요소에 기본 스타일을 추가하여 일이 조금 더 존경받을만한 것처럼 보입니다.

 몸체 {
  배경색 : #cccccc;
  글꼴 - 가족 : SANS-Serif;
}
# 플레이어 컨테이너 {
  마진 왼쪽 : 자동;
  마진 오른쪽 : 자동;
  너비 : 640px;
  높이 : 480px;
  배경색 : # 538C99;
  국경 반경 : 20px;
}
#title {
  마진 왼쪽 : 자동;
  마진 오른쪽 : 자동;
  너비 : 640px;
  텍스트 - 정렬 : 센터;
  패딩 탑 : 30px;
  패딩 - 하단 : 50px;
  배경색 : # 538C99;
  색상 : # 333333;
  국경 반경 : 20px; }

03. 더 많은 스타일링을 추가하십시오

Thumbnail-Container Div를 스타일링 할 때 일이 좀 더 흥미로울 수 있습니다. 우리는 이것을 채울 것입니다 이유 우리 비디오에서 생성 된 축소판이 될 요소. 따라서 한 번에 볼 수있는 것보다 더 많은 미리보기 이미지가있는 경우 가로 스크롤 막대를 표시하도록 원합니다. 우리는이 작업을 수행 할 수 있습니다 Overflow-X. 특성.

 # thumbnail-container {
  배경색 : #cccccc;
  마진 - 상단 : 30px;
  마진 왼쪽 : 자동;
  마진 오른쪽 : 자동;
  너비 : 640px;
  높이 : 120px;
  Overflow-X : 스크롤;
  Overflow-Y : 숨김;
  화이트 공간 : NowRap;
  국경 반경 : 20px; }

04. 비디오 플레이어를 적절하게 크기로 지정하십시오

우리가해야 할 일이 더 많이 있습니다. 그대로, 비디오를 재생할 때 원시 해상도가 무엇이든 표시됩니다. 이것은 페이지에서 잘 보이지 않을 것입니다. 비디오 요소를 스타일링하여 얼마나 큰지를 결정하겠습니다. 너비와 높이를 100 %로 설정하면 그 가입 한 DIV를 채울 것입니다.

 비디오 {
  너비 : 100 %;
  높이 : 100 %; }

05. 스크립트 설정

JavaScript로 내려갈 시간입니다. 작업 할 배열로 비디오 파일 목록을 준비하겠습니다 (지금은 하드 코드를 사용 하겠지만 HTTP 서비스에서 JSON을 통해 검색하도록 구성 할 수 있습니다).

우리는 또한 나중에 사용할 몇 가지 변수를 정의 할 것입니다 : ' 플레이어 '비디오 요소가 될 것입니다. ' 플레이어 '새로 생성 된 소스 요소가 될 것입니다. 나중에 플레이어 개체의 자식이되고 소스 파일을 가리 킵니다. 우리는 또한 A에 연결할 계획입니다 DomContentLoaded 이벤트 스크립트가 작업을 시작하기 전에 페이지를로드 할 때까지 대기하는지 확인하십시오.

 VAVE VideOfiles = [ "1.MP4", "2.MP4", "3.MP4", "4.MP4", "5.MP4"];
var 플레이어;
var playersource = document.CreateEllement ( "소스");
document.addeventListener ( "domContentLoaded", function () {initialise ();}, false);

브라우저의 비디오 재생은 사용중인 비디오 형식을 읽을 수있는 코덱의 존재에 의존합니다. 비디오가 교차 브라우저를 사용하도록하려면 가장 안전한 내기는 H.264 코덱을 사용하는 MP4 파일입니다.

06. 축소판을 생성합니다

다음 비디오 파일에서 이미지 축소판을 생성하는 함수를 만듭니다. 이 문제는 비디오 객체를 가져 와서 이미지 객체를 반환합니다. 내부적으로 우리가 달성 할 수있는 방법은 사용 중입니다. HTML 캔버스 ...에

 함수 GenerateThumbnail (비디오) {
  var canvas = document.CreateEllement ( "캔버스");
  var container = document.getElementByID ( "thumbnail-container");
  var width = container.clientWidth;
  var height = container.ClientHeight;
  canvas.width = (폭 / 3);
  캔버스. 하이트 = 높이;
  canvas.getContext ( "2D"). DrawImage (Video, 0, 0, Canvas.Width, Canvas.Height);
  var 이미지 = document.CreateEllement ( "img");
  Image.src = 캔버스 .ToDataurl ();
  반환 이미지; }

07. 비디오가로드 될 때 자동으로 축소판을 생성합니다

이제 우리는 GenerateThumbnail 기능을 취하여 각 비디오 파일에서 각 비디오 파일에서 사용할 수 있습니다. 그를 구현함으로써 이것을합시다 초기화 () 함수. 이 기능은 Playersource 객체를 비디오 요소의 하위로 추가 한 다음 목록의 모든 파일을 반복하고 임시 비디오 오브젝트에로드 한 후에로드하고 축소판을 생성하고 축소판 컨테이너에 추가합니다.

 기능 초기화 () {
  player = document.getElementById ( "플레이어");
  Player.AppendChild (Playersource);
  player.controls = false;
  VideOfiles.Foreach (함수 (파일) {
  var thumbsource = document.createEllement ( "소스");
  thumbsource.src = 파일;
  var thumbVideo = document.CreateEllement ( "비디오");
  thumbVideo.addEventListener ( "loadeddata", function () {
  var container = document.getElementByID ( "thumbnail-container")
  var 이미지 = GenerateThumbnail (thumbVideo);
  container.appendchild (이미지);
  }, 거짓);
  thumpVideo.appendchild (thumbsource);
  }); }

08. 썸네일에 링크를 추가합니다

그래도 뭔가가 없습니다. 당사의 미리보기 이미지는 컨테이너에 표시되지만 그 중 누구도 클릭 가능하지 않습니다. 우리는 이미지를 랩핑해야합니다 & lt; a & gt; 요소를 클릭하면 일부 JavaScript를 실행해야합니다. 그 기능을 조정합시다 loadedData. 이벤트는 링크를 만들 수 있습니다. 이유 집단.

 thumbVideo.AddEventListener ( "loadeddata", function () {
  var container = document.getElementByID ( "thumbnail-container")
  var 이미지 = GenerateThumbnail (thumbVideo);
  var link = document.CreateEllement ( "a");
  link.href = "JavaScript : 재생 (\" "+ thumbsource.src +"\ ")";
  link.appendchild (이미지);
  container.appendchild (링크);
  },
false);

09. 비디오를 재생하십시오

이제 우리는 클릭 가능한 링크가있는 축소판을 생성하고 있습니다. 재생 (ThumbSource.src) , 어디 thumbsource.src. 관련 비디오 파일의 파일 이름을 가리 킵니다. 남아있는 모든 것은 플레이어 소스를 구현하는 것입니다 (비디오 플레이어 요소에 연결할 수 있음을 회상 할 수 있음)이 올바른 파일을 가리키고 재생을 꺼 려합니다.

 기능 재생 (URL)
{
  playersource.src = URL;
  player.controls = true;
  player.load ();
  player.play ();
}

이 기사는 원래 독창적 인 웹 디자인 매거진, 전문 자습서, 최첨단 트렌드 및 무료 리소스를 제공하는 웹 디자이너 인 웹 디자이너 문제 266에 등장했습니다. 여기 266을 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

CSS 애니메이션으로 메뉴의 전원을 켜는 방법
16 놀라운 HTML 예제
HTML 및 CSS 학습을위한 최고의 자원 중 9 개

HTML 비디오 작업 방법

01. 기본 페이지를 만듭니다

02. 스타일의 페이지

03. 더 많은 스타일링을 추가하십시오

04. 비디오 플레이어를 적절하게 크기로 지정하십시오

05. 스크립트 설정

06. 축소판을 생성합니다

07. 비디오가로드 될 때 자동으로 축소판을 생성합니다

08. 썸네일에 링크를 추가합니다

09. 비디오를 재생하십시오

어떻게 - 가장 인기있는 기사

mo.js 라이브러리로 애니메이션을 어떻게 만드는 방법

일러스트 레이터에서 제품 아이콘 세트 만들기

자신만의 WebGL 물리학 게임 만들기

Cinema 4D에서 만화 캐릭터를 만드는 방법

CINEMA 4D에서 조각하는 방법

3D 모발 및 모피를 만드는 방법

SVG 그라디언트가있는 차트 D3.js 차트

조각 및 페인트 변위지도를 결합하는 방법

카테고리