Video.js는 HTML5 동영상 플레이어 라이브러리로, 사용자 정의 및 확장 가능한 기능을 제공합니다. Video.js를 사용하여 동영상 재생 중에 플레이어에 자동으로 미드 롤 광고를 추가하는 방법은 다음과 같습니다:

1. Video.js를 웹 페이지에 적용합니다. Video.js 라이브러리 파일과 스타일 시트를 다운로드하고 웹 페이지에 링크합니다.

    <link href="path/to/video-js.css" rel="stylesheet">
    <script src="path/to/video.js"></script>
   

2. 동영상 플레이어 요소를 웹 페이지에 추가합니다. <video> 요소를 만들고 id 및 클래스 속성을 지정하여 플레이어를 식별할 수 있도록 합니다.

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

3. 자동 광고를 추가할 시간을 설정합니다. play 이벤트를 사용하여 동영상 플레이어가 재생될 때 특정 시간에 광고를 추가할 수 있습니다. 이 예시에서는 30초에 광고를 추가하도록 설정하겠습니다.

    var player = videojs('my-video');
    player.on('play', function() {
      var currentTime = player.currentTime();
      if (currentTime >= 30) {
        // 광고 삽입 로직 실행
        player.pause();
      }
    });
   

4. 광고 삽입 로직을 구현합니다. 여기서는 재생을 일시 중지하고 광고를 재생하는 간단한 예시를 보여줍니다.

    var adVideoUrl = "path/to/ad-video.mp4";
    var adPlayer = videojs('my-video');
    adPlayer.src(adVideoUrl);
    adPlayer.on('ended', function() {
      player.play();
    });
    adPlayer.play();
   

위의 예시는 Video.js를 사용하여 동영상 재생 중에 플레이어에 자동으로 미드 롤 광고를 추가하는 방법을 보여줍니다. 이를 기반으로 원하는 방식에 맞게 광고 삽입 및 플레이어 동작을 커스터마이징할 수 있습니다.