비디오 재생이 끝난 후에 커버 이미지를 우아하게 복원하는 방법은 무엇입니까?

비디오 재생이 완료된 후에 표지 이미지를 우아하게 복원하여 사용자 경험을 향상시킵니다!

많은 개발자들이 HTML5를 사용하고 있습니다<video></video> 요소를 재생할 때는 블랙 스크린 또는 기본 화면과 같은보기 흉한 상황을 피하기 위해 비디오 재생이 끝난 후 초기 표지 이미지가 자동으로 복원 될 것으로 기대됩니다. 표지 이미지를 간단하게 재 장전하면 대역폭 소비가 증가 하므로이 기사는보다 효율적인 솔루션을 제공합니다.

열쇠는 사용하는 것입니다<video></video> 요소의 onended 의 이벤트. 이 이벤트는 비디오 재생이 끝나면 트리거되어 표지 이미지의 디스플레이 및 숨겨질 수 있습니다.

구현 방법 :<video></video> onended 속성을 태그에 추가하고 값을 JavaScript 함수 이름으로 설정하십시오. 이 기능은 비디오 재생이 완료된 후에 실행되며 표지 이미지의 표시는 display 속성 수정과 같은 JavaScript 코드를 통해 제어됩니다.

다음은 샘플 코드입니다.

<video controls="controls" onended="showImg()" src="/i/movie.ogg">
  브라우저는 비디오 태그를 지원하지 않습니다</video>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174294722085418.jpg" class="lazy" alt="비디오 재생이 끝난 후에 커버 이미지를 우아하게 복원하는 방법은 무엇입니까? ">

<script>
  function showImg() {
    document.getElementById("coverImage").style.display = "block";
  }
</script>

코드 설명 :

• onended="showImg()" : 비디오 재생이 끝난 후 showImg() 함수를 호출하십시오.
• <img id="coverImage" ... alt="비디오 재생이 끝난 후에 커버 이미지를 우아하게 복원하는 방법은 무엇입니까?" > : HTML에 덮개를 추가하십시오<img alt="비디오 재생이 끝난 후에 커버 이미지를 우아하게 복원하는 방법은 무엇입니까?" > 요소, 초기 상태 display: block; (표시하다). src 속성을 표지 이미지 경로로 바꾸십시오.
• showImg() 함수 : document.getElementById() 를 통해 표지 이미지 요소를 가져 와서 display 속성을 "block" 으로 설정하여 표시합니다. (비디오가 재생되기 전에 표지 이미지가 숨겨져 있으면 표시해야합니다.) /i/movie.ogg 비디오 파일 경로로 교체해야합니다.

이 방법을 통해 비디오 재생이 끝나면 커버 이미지를 효율적으로 복원 할 수 있으며 불필요한 리소스 낭비를 피하고 사용자 경험을 향상시킬 수 있습니다. 교체 코드의 자리 표시 자 경로가 실제 경로인지 확인하십시오.

위 내용은 비디오 재생이 끝난 후에 커버 이미지를 우아하게 복원하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!