CSS 반응형 비디오: 다양한 장치에서 비디오 재생 최적화

CSS 반응형 비디오: 다양한 장치에서 비디오 재생을 최적화하려면 특정 코드 예제가 필요합니다.

모바일 장치의 인기와 네트워크 대역폭의 증가로 인해 비디오는 인터넷에서 중요한 요소가 되었습니다. 그러나 다양한 장치, 다양한 화면 크기 및 해상도로 인해 다양한 장치에서 비디오 경험이 달라집니다. 다양한 장치에서 비디오의 재생 효과를 더 잘 최적화하기 위해 CSS 반응형 비디오 기술이 탄생했습니다.

CSS 반응형 비디오는 CSS3 기술을 기반으로 구현되어 다양한 화면 크기와 해상도의 장치는 물론 휴대폰, 태블릿, 데스크톱 및 기타 단말 장치에서 반응형 레이아웃과 렌더링을 수행하여 비디오를 만들 수 있습니다. 다른 장치에 표시됩니다. 최적화된 재생 효과.

다음은 간단한 코드 예입니다.

HTML 부분:

<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
  </video>
</div>

CSS 부분:

.video-container {
  position: relative;
  width: 100%;
}
.video-container video {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .video-container video {
    width: 50%;
    height: auto;
  }
}

설명:

먼저 HTML 부분에서 "video-container" code><라는 클래스로 비디오를 래핑합니다. ;div> 태그를 추가하고 너비를 100%로 설정합니다. <video></video> 태그 내에서는 세 가지 형식의 비디오 소스 파일을 제공합니다.

위 내용은 CSS 반응형 비디오: 다양한 장치에서 비디오 재생 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!