aşağıda import edilen gerekli paketleri kurduktan sonra benzer tanımlamalar üzerinden ilerleyebilirsin. Önemli olan reklam url'in içinde preroll reklamının tanımlanmış olması. Sadece preroll değil, midroll ve postroll gibi reklamları da reklam kodunda tanımlandığı şekilde gösterebilirsin.

<template>
  <div class="player-component">
    <div id="player" ref="playerRef"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Video js
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

// Video js ads
import 'videojs-contrib-ads';
import 'videojs-ima';
import 'videojs-ima/dist/videojs.ima.css';

// Player template ref'i tanımla
const playerRef = ref(null)

// Player'ının atanacağı değişkeni tanımla
const player = ref(null)



onMounted(() => {
    // Videojs'i player elementine bağla
    const player.value = videojs(playerRef.value, {
        // Videojs config
    });

    // Ima google ads'i playerına bağla
    player.value.ima({
        // Preroll içeren örnek google reklam kodu
        adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
    });

    // Reklamlarla ilgili örnek bir kontrol kodu, reklam başlandığında tetiklenir.
    player.value.on('adstart', () => {
      console.log('ad start')
    });
})

</script>

Daha fazla kontrol API 'ı için de https://googleads.github.io/videojs-ima/ ve https://videojs.github.io/videojs-contrib-ads/ bağlantılarını inceleyebilirsin