Streaming with Client Side Ads Insertion getAdManager();

[systemxcom]

Have you read the Tutorials?

YES

Have you read the FAQ and checked for duplicate open issues?

YES

What version of Shaka Player are you using? 3.1.1

Please ask your question

I am trying to implement "Streaming with Client Side Ads Insertion". However, I am not able to implement it in vue.js 2.3. I am using the guide you provided on the topic but have been unable to get this example provided to work in the component below.

Your example:

const adManager = player.getAdManager();
const video = document.getElementById('video');
const ui = video['ui'];
const container = video.ui.getControls().getClientSideAdContainer();
adManager.initClientSide(container, video);

My component:

<template>
  <div ref="videoContainer" class="shadow-lg mx-auto max-w-full size">
    <video
      id="video"
      ref="videoPlayer"
      class="w-full h-full"
      :poster="posterUrl"
      crossorigin="anonymous"
      autoplay
    ></video>
  </div>
</template>

<script>
export default {
  props: {
    manifestUrl: {
      type: String,
      required: true
    },
    licenseServer: {
      type: String,
      required: true
    },
    posterUrl: {
      type: String,
      required: false,
      default: ''
    }
  },
  mounted() {
    const shaka = require('/node_modules/shaka-player/dist/shaka-player.ui.js');
    shaka.polyfill.installAll();
    const player = new shaka.Player(this.$refs.videoPlayer);

    const ui = new shaka.ui.Overlay(
      player,
      this.$refs.videoContainer,
      this.$refs.videoPlayer
    );
    ui.getControls();

    //console.log(Object.keys(shaka.ui));
    player.configure({
      drm: {
        servers: { 'com.widevine.alpha': this.licenseServer }
      },

      manifest: {
        hls: {
            useFullSegmentsForStartTime: false,
        },
    }
    });
    player
      .load(this.manifestUrl)
      .then(() => {       
        // This runs if the asynchronous load is successful.
        console.log('The video has now been loaded!');
      })

      .catch(this.onError); // onError is executed if the asynchronous load fails.

  },
  methods: {
    onError(error) {
      console.error('Error code', error.code, 'object', error);
    }
  }
};

</script>

<style>
@import '../../node_modules/shaka-player/dist/controls.css';  /* Shaka player CSS import */
.size {
  height: 100%; 
  width: 100%;
}
</style>

If you could point me in the right direction it would be greatly appreciated.

[joeyparrish]

I don't see a description of the actual problem. What is it that's not working or that's confusing?

[systemxcom]

After further review of the documentation, I was able to sort it. The video.ui.getControls() was implemented incorrectly in my example above.

[systemxcom]

Hi Joey,

Thank you so much. I closed the issue. After further review of the documentation, I was able to sort it. The video.ui.getControls() was implemented incorrectly in my example above.

Thank You!

On Fri, Oct 8, 2021 at 1:34 AM Joey Parrish @.***> wrote:

I don't see a description of the actual problem. What is it that's not working or that's confusing?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/google/shaka-player/issues/3504#issuecomment-938202003, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5JAG6XGYV4CCHLFFRV3OLUFYN53ANCNFSM47ZPGH7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[joeyparrish]

Glad you got it working. Thanks for the update!