How to do the right sequence of actions?

Question

JavaScript

shorter.
Have this slider

<div class="hero owl-carousel owl-theme" id="slider_ml_01">
<?foreach($arResult["ITEMS"] as $arItem):?>
  <?
  $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
  $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
  ?>
  <?if($arItem['PROPERTIES']['VIDEO_SRC']['VALUE']):?>
  <div class="video__iframe">
    <video data-src="<?=$arItem['PROPERTIES']['VIDEO_SRC']['VALUE']?>" loop="loop" muted="muted" id="video" poster="/upload/iblock/c6e/c6ef3b51d520dd2f1d9174714d0463ea.jpg" class="abs-video abs" width="100%" height="auto" playsinline="">
    </video>
  </div>
  <?else:?>
  <div style="">
    <div class="block_img" style=""> <!--src=""-->
      <img class="block_img_src owl-lazy" src="javascript:void(0)" alt="<?=$arItem["NAME"]?>" style="" data-src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" >
    </div>
  </div>
  <?endif;?>
<?endforeach;?>
</div>

$('#slider_ml_01').owlCarousel({
  items:1,
  loop:true, //Зацикливаем слайдер
  nav:false, //Отключение навигации
  autoplay:true, //Автозапуск слайдера
  smartSpeed:1000, //Время движения слайда
  dots:false,
  autoplayTimeout:10380, //Время смены слайда
  lazyLoad:true,
  video:true,
});

document.addEventListener('DOMContentLoaded', function(){ 
  const player = document.querySelector('.abs-video');
  player.oncanplay = function(){ player.play() }; 
  player.src = player.dataset.src;
})

everything works, but there is one moment.
My video starts playing as soon as the entire page is fully loaded.
Tell me how to make autoplayTimeout not scroll the slider until the video is fully played?

The page is fully loaded - the video is activated - the video completely loses - the scrolling is turned on.