Request Pre-rolls Ads doesn't working #6169

mrshulk · 2024-01-26T11:35:01Z

Have you read the Tutorials?
Yes

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

If the question is related to FairPlay, have you read the tutorial?
Yes, but not related

What version of Shaka Player are you using?
4.7.7 ( latest launched )

What browser and OS are you using?
Chrome + Ubuntu

Please ask your question
When I hit the play button I call the function requestPreRoll() but the streaming show up straight away, the right behaviour should be pre-rolls ads first then begin a streaming, what could I be doing wrong?

Thanks for your help

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Shaka Player Demo" />
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="theme-color" content="#ffffff" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.5.0/controls.min.css" />

    <script type="text/javascript" src="shaka-player.ui.debug.4.7.7.js" ></script>

     <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
    <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

    <style>
      video {
        height: 360px;
        width: 100%;
        background-color: #000;
      }

      #ad-container {
        height: 200px;
        width: 100%;
        position: absolute;
        top: 0;
        /* background-color: red; */
      }

      button {
        width: 100%;
        height: 100px;
      }
    </style>
  </head>

  <body>
    <div class="">
      <h2>Test Shaka Player</h2>

      <button class="btn_play">Play Big</button>

      <div class="media">
        <div data-shaka-player-container data-shaka-player-cast-receiver-id="07AEE832" class="video-container">
          <video data-shaka-player  controls playsinline id="video"></video>
        </div>
      </div>
    </div>

    <script>
      // myapp.js

      var manifestUri = "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd";
      var video, controls_, player;
      var ADVERTS_TAG =
        "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="; 

      function initApp() {
        // Install built-in polyfills to patch browser incompatibilities.
        shaka.polyfill.installAll();

        // Check to see if the browser supports the basic APIs Shaka needs.
        if (shaka.Player.isBrowserSupported()) {
          // Everything looks good!
          initPlayer();
        } else {
          // This browser does not have the minimum set of APIs we need.
          console.error("Browser not supported!");
        }
      }

      function initPlayer() {
        this.video_ = document.getElementById("video");
        this.container_ = document.getElementsByClassName("video-container")[0];

        setupPlayer_();
        loadAsset();
      }

      function setupPlayer_() {
        const video = this.video_;
        const ui = video["ui"];
        this.player_ = ui.getControls().getPlayer();

        // Change the poster by the APIC ID3 if the stream is audio only.
        this.player_.addEventListener("metadata", (event) => {
          if (!this.player_.isAudioOnly()) {
            return;
          }

          const payload = event["payload"];
          if (payload && payload["key"] == "APIC" && payload["mimeType"] == "-->") {
            const url = payload["data"];
            if (url && url != video.poster) {
              video.poster = url;
            }
          }
        });

        // Get default config.
        this.defaultConfig_ = this.player_.getConfiguration();
        this.desiredConfig_ = this.player_.getConfiguration();
        const languages = navigator.languages || ["en-us"];
        this.uiLocale_ = languages[0];

        // Listen to events on controls.
        this.controls_ = ui.getControls();
        this.controls_.addEventListener("error", onErrorEvent);
        this.controls_.addEventListener("caststatuschanged", (event) => {
          this.onCastStatusChange_(event["newStatus"]);
        });
      }

      async function loadAsset(asset) {
        try {
          // Enable the correct set of controls before loading.
          // The video container influences the TextDisplayer used.
          this.controls_.setEnabledShakaControls(true);
          this.controls_.setEnabledNativeControls(false);
          // This will force the player to use UITextDisplayer.
          this.player_.setVideoContainer(this.container_);

          //   await this.drmConfiguration_(asset);

          // Finally, the asset can be loaded.
          let manifestUri;

          manifestUri = await this.getManifestUriFromAdManager_(asset);

          await this.player_.load(manifestUri, /* startTime= */ null, undefined);

        //  loadedAsset = true;

        } catch (reason) {
          const error = /** @type {!shaka.util.Error} */ (reason);
          if (error.code == shaka.util.Error.Code.LOAD_INTERRUPTED) {
            // Don't use shaka.log, which is not present in compiled builds.
            console.debug("load() interrupted");
          } else {
            onError(error);
          }
        }
      }

      async function getManifestUriFromAdManager_(assetKey) {
        const adManager = this.player_.getAdManager();
        const container = this.controls_.getServerSideAdContainer();

        try {
          adManager.initServerSide(container, this.video_);
          let request;

          // LIVE stream
          request = new google.ima.dai.api.LiveStreamRequest();
          request.assetKey = "c-rArva4ShKVIAkNfy6HUQ";

          request.format = google.ima.dai.api.StreamRequest.StreamFormat.DASH;
          // request.format = google.ima.dai.api.StreamRequest.StreamFormat.HLS;

          const uri = await adManager.requestServerSideStream(request);
          return uri;
        } catch (error) {
          console.log(error);
          console.warn("Ads code has been prevented from running " + "or returned an error. Proceeding without ads.");

          return false;
        }
      }

      function onErrorEvent(event) {
        // Extract the shaka.util.Error object from the event.
        onError(event.detail);
      }

      function onError(error) {
        // Log the error.
        console.error("Error code", error.code, "object", error);
      }

      document.addEventListener("shaka-ui-loaded", initApp);

      function requestPreRoll(){

        console.debug("play requestPreRoll...");
         const adManager = this.player_.getAdManager();
          if (adManager && ADVERTS_TAG) {
            try {
              console.log("@@@@@ ADVERTS_TAG", ADVERTS_TAG)
              adManager.initClientSide(this.controls_.getClientSideAdContainer(), this.video_, null);
              const adRequest = new google.ima.AdsRequest();
              adRequest.adTagUrl = ADVERTS_TAG;
              adManager.requestClientSideAds(adRequest);
              this.video_.play();

            } catch (error) {
              console.log(error);
              console.warn("Ads code has been prevented from running. " + "Proceeding without ads.");
            }
          }

      }


      $(document).ready(function () {


  $(".btn_play,").on("click", function (e) {
    console.debug("play button...");

    requestPreRoll();
  
  });
});


    </script>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

mrshulk · 2024-01-26T15:56:10Z

I found a solution, I need to add a player.configure.

this.player_.configure({
streaming: {
bufferingGoal: 120
}
});

avelad · 2024-01-29T09:02:51Z

So the question is resolved?

Related to #6169

mrshulk · 2024-01-31T10:43:36Z

So the question is resolved?

Yes, it was resolved.

mrshulk added the type: question A question from the community label Jan 26, 2024

avelad added status: waiting on response Waiting on a response from the reporter(s) of the issue component: ads The issue involves the Shaka Player ads API or the use of other ad SDKs labels Jan 29, 2024

avelad mentioned this issue Jan 29, 2024

fix(Ads): Fix initial ads configuration #6176

Merged

avelad added a commit that referenced this issue Jan 29, 2024

fix(Ads): Fix initial ads configuration (#6176)

5b141eb

Related to #6169

avelad added a commit that referenced this issue Jan 30, 2024

fix(Ads): Fix initial ads configuration (#6176)

4b997a9

Related to #6169

avelad added a commit that referenced this issue Jan 30, 2024

fix(Ads): Fix initial ads configuration (#6176)

2a471e3

Related to #6169

mrshulk closed this as completed Jan 31, 2024

shaka-bot removed the status: waiting on response Waiting on a response from the reporter(s) of the issue label Jan 31, 2024

shaka-bot added the status: archived Archived and locked; will not be updated label Mar 31, 2024

shaka-project locked as resolved and limited conversation to collaborators Mar 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Request Pre-rolls Ads doesn't working #6169

Request Pre-rolls Ads doesn't working #6169

mrshulk commented Jan 26, 2024 •

edited

mrshulk commented Jan 26, 2024

avelad commented Jan 29, 2024

mrshulk commented Jan 31, 2024

Request Pre-rolls Ads doesn't working #6169

Request Pre-rolls Ads doesn't working #6169

Comments

mrshulk commented Jan 26, 2024 • edited

mrshulk commented Jan 26, 2024

avelad commented Jan 29, 2024

mrshulk commented Jan 31, 2024

mrshulk commented Jan 26, 2024 •

edited