HTML에서 비디오를 추가, 재생 및 제어하는 방법-프런트엔드 Q&A-php.cn

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

PHPz

풀어 주다： 2023-04-23 10:31:16

원래의

15256명이 탐색했습니다.

인터넷 기술이 발전하면서 점점 더 많은 웹사이트에서 콘텐츠를 표시하기 위해 동영상을 사용하기 시작했습니다. 웹사이트 개발자에게는 웹페이지에 동영상을 추가하고 정상적으로 재생되게 하는 방법에 대한 일반적인 질문이 있습니다. 이 문서에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!