HTML에서 비디오를 추가, 재생 및 제어하는 ​​방법

인터넷 기술이 발전하면서 점점 더 많은 웹사이트에서 콘텐츠를 표시하기 위해 동영상을 사용하기 시작했습니다. 웹사이트 개발자에게는 웹페이지에 동영상을 추가하고 정상적으로 재생되게 하는 방법에 대한 일반적인 질문이 있습니다. 이 문서에서는 HTML에서 비디오를 추가, 재생 및 제어하는 ​​방법을 소개합니다.

1. HTML5의 비디오 태그

HTML5에 비디오를 추가하는 방법은 HTML 코드에 비디오 태그를 추가하는 것입니다. 구체적으로 다음 태그를 사용하세요.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

이 코드에서 "src" 속성은 위 코드에서 볼 수 있듯이 "movie.mp4"와 "movie.ogg"가 비디오 파일의 URL을 정의하는 데 사용됩니다. 비디오의 MP4 및 OGG 형식입니다. 브라우저가 비디오 재생을 지원하는 경우 그 중 하나가 재생되도록 선택됩니다. 두 비디오 모두 지원되지 않으면 마지막 태그의 내용이 표시됩니다.

그 중 "너비"와 "높이"를 사용하여 영상의 너비와 높이를 지정할 수 있습니다. 컨트롤 속성은 비디오 플레이어에 대한 컨트롤 막대를 추가하는 데 사용됩니다.

2. 동영상 재생 제어

동영상을 추가한 후 다음 코드를 통해 동영상을 제어할 수 있습니다.

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

그 중 "play()" 및 "pause()" 함수는 재생 및 일시 정지에 사용됩니다. video 및 currentTime 속성은 비디오 재생의 현재 시간을 설정하는 데 사용되며, Volume 속성은 비디오의 볼륨을 설정하는 데 사용됩니다.

3. 다양한 형식의 비디오 파일 지원

더 많은 브라우저에서 비디오 재생을 지원할 수 있도록 여러 형식의 비디오 파일을 사용할 수 있으며 동시에 여러 소스를 제공할 수 있습니다.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

광범위한 비디오 적용 범위를 보장하기 위해 다양한 브라우저 및 운영 체제에 대해 세 가지 형식이 여기에 제공됩니다.

4. 비디오 미리 로드 옵션

HTML5의 비디오 태그는 비디오 지연을 방지하기 위해 페이지가 로드될 때 미리 비디오를 다운로드하도록 선택할 수도 있습니다.

preload 속성에 세 가지 값을 지원합니다.

• preload = "none": 미리 다운로드하지 마세요.
• preload = "메타데이터": 비디오 길이, 오디오 트랙 및 기타 정보와 같은 비디오의 메타데이터를 다운로드합니다.
• preload = "auto" : 전체 동영상 파일을 다운로드합니다.

preload 속성에 "auto" 값이 할당되면 페이지 로딩 과정에서 동영상이 다운로드됩니다. 이때 동영상의 로딩 상태는 JavaScript를 통해 얻을 수 있습니다.

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

5. 웹 페이지에서 YouTube 동영상 사용하기

동영상 태그를 통해 직접 동영상 파일을 삽입하는 것 외에도 동영상 재생을 위해 YouTube 동영상을 삽입할 수도 있습니다. 구체적인 구현은 다음과 같습니다.

• 먼저 YouTube에 삽입하려는 동영상을 찾아야 합니다.
• 페이지에 다음 HTML 코드를 추가하세요.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps: 여기서 "VIDEO_ID"는 동영상의 고유 식별자입니다.

• 그런 다음 표준 방식으로 CSS 스타일을 조정하세요.

6. 브라우저 호환성

HTML5에 동영상을 추가하는 방법은 최신 브라우저에서 널리 지원되지만 여전히 HTML5 동영상을 지원하지 않는 일부 오래된 브라우저가 있습니다. 이러한 브라우저는 JavaScript 및 Flash를 통한 비디오 재생을 지원할 수 있습니다.

• JavaScript를 통해: video.js 또는 JWPlayer와 같은 라이브러리를 사용할 수 있습니다.
• 플래시를 통해: swfobject 및 swfmedia를 통해 페이지에 Flash 플레이어를 삽입한 다음 비디오를 로드합니다.

요약

이 문서에서는 HTML에서 비디오를 추가, 재생 및 제어하는 ​​방법을 소개하고 일반적으로 사용되는 몇 가지 재생 기능을 소개합니다. 실제 개발 과정에서 개발자는 호환성 문제에 주의를 기울여야 하며, 각 브라우저가 비디오 재생을 완벽하게 지원할 수 있도록 다양한 형식의 비디오 파일을 제공해야 합니다.

위 내용은 HTML에서 비디오를 추가, 재생 및 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!