1. Video.js 라이브러리를 다운로드하고 웹 페이지에 추가합니다. 다음과 같이 <script> 태그를 사용하여 Video.js를 로드할 수 있습니다.

<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

1. video 요소를 생성하고 동영상을 재생할 수 있도록 설정합니다. 예를 들어, 다음과 같이 <video> 태그를 사용하여 동영상을 추가하고 id를 지정합니다.

<video id="my-video" class="video-js" controls>
  <source src="path/to/my-video.mp4" type="video/mp4">
</video>

1. JavaScript를 사용하여 Video.js 플레이어를 초기화하고 엔드카드를 설정합니다. 다음과 같은 스크립트를 작성합니다.

var player = videojs('my-video');

player.on('ended', function() {
  // 엔드카드가 표시될 HTML 요소를 생성합니다.
  var endcard = document.createElement('div');
  endcard.innerHTML = '동영상이 종료되었습니다.';

  // 엔드카드를 동영상 플레이어에 추가합니다.
  player.el().appendChild(endcard);
});

위의 코드에서 ended 이벤트가 발생하면 엔드카드가 생성되고 동영상 플레이어에 추가됩니다. 엔드카드의 내용이 동영상이 종료되었습니다.로 설정되어 있으며, 필요에 따라 다른 내용으로 변경할 수 있습니다.

1. CSS를 사용하여 엔드카드의 스타일을 지정합니다. 예를 들어, 다음과 같이 스타일을 추가합니다.

<style>
  .endcard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
  }
</style>

위의 코드는 엔드카드 요소의 스타일을 지정합니다. 필요에 따라 다른 스타일을 적용할 수 있습니다.

이제 Video.js를 사용하여 동영상 재생 중 엔드카드를 표시하는 방법을 알게 되었습니다. 필요에 따라 스타일이나 엔드카드의 내용을 변경하여 원하는대로 엔드카드를 디자인할 수 있습니다.