Как сделать правильную последовательность действий?

Question

[Павел Сидоров]

короче.
Есть этот слайдер

<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;
})

все работает, но есть один момент.
у меня видео начинает воспроизводится, как только полностью загрузилась вся страница.
Подскажите как сделать, чтобы autoplayTimeout не прокручивал слайдер, пока полностью не отыграло видео?

Полностью загружается страница - активируется видео - видео полностью проигрывает - включается прокрутка.