0

I'm having multiple on one single page, and want to let AMP (2.2.2) to automatically create AMP on all current

playback works ok but the volume control only works for the last instance of AMP. toggling the muted on other video will actually affect the last video's muted or volume.

is there anyway to fix this via Javascript or AMP setup?

Cheers,

Macomatic
  • 113
  • 9
  • Can you please post your code? – Itay Podhajcer Nov 14 '18 at 06:07
  • I'm having multiple of these ... Toggling the muted affects all players. – Macomatic Nov 14 '18 at 07:09
  • They all have the same id? – Itay Podhajcer Nov 14 '18 at 07:30
  • no they all have different IDs. normal play, pause all good except the sound control. any changes to sound applies to all player. but if I do create dynamically for each player, then it seems the sound control works as expected. But I do want to keep the – Macomatic Nov 14 '18 at 09:29
  • It feels like a problem in the way AMP script probes the HTML code for – Itay Podhajcer Nov 14 '18 at 09:47

4 Answers4

1

That didn't solve my problem with the player and volume control when you have more than one video player on the same page. Yes, I had unique IDs for the players. The only workaround for me is to include the player in an iframe.

See here: Azure media player multiple instances volume issue

RKAN07
  • 53
  • 5
0

The only workaround for having multiple AMP instances on 1 single page is to use JS to dynamically the AMP instance to avoid the volume control issue.

what I have is a blank div wrapping a blank video like:

  <div class="video-wrapper"><video id="vid1" controls preload="none" class="amp-video" tabindex="0" data-src="videoUrl" data-type="videoType"></video></div>

and then use jquery to initialise it on demand. My requirement is a bit complicated as I have content within different modules that loads dynamically. So I have to NOT load anything on page load until user did click something.

$('.amp-video').each(function(){
var $v = $(this);
$v.addClass('azuremediaplayer amp-default-skin amp-big-play-centered');
              myPlayer = amp($v.attr('id'), {
                techOrder: ["azureHtml5JS", "html5"],
                "nativeControlsForTouch": false,
                autoplay: !$v[0].muted,
                muted: $v[0].muted,
                controls: true,
                width: "100%",
                height: "100%"
              });
});
Macomatic
  • 113
  • 9
0

Looks like there is some problem with players initialized with loop. Since all players are created and rendered at once, volume controls are getting applied only for last player instance. So I have utilized onReady function in amp method and used recursion with one second time delay. (to wait for volume controls to apply to each player). It worked for me.

let vPlayer = [];
const playOptions = { // Options
  techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS", "silverlightSS", "html5"],
  autoplay: false,
  controls: true,
  poster: "",
  logo: { enabled: false },
};
const initPlayerInstances = () => {
  let oldLength = vPlayer.length;
  setEachPlayerViaRecursive(vPlayer.length, () => {
    console.log(vPlayer);
    setVideoSource(oldLength);
  })
}

/**
 * intialize each amp instance and wait for a second for it load in DOM
 * and then go for the next operation. otherwise its mute and unmute are not working
 * @param index intial index of vPlayer list
 * @param callback when all vPlayers added go back and do next operations
 */
const setEachPlayerViaRecursive = (index, callback) => {
  vPlayer[index] = amp('azuremediaplayer' + (index), playOptions, () => {
    setTimeout(() => {
      if (videoList.length - 1 > index) {
        setEachPlayerViaRecursive(index + 1, callback);
      } else {
        callback()
      }
    }, 1000)
  })
}


/**
 * when all players initialized successfully, then set player urls
 * for each vPlayer instance
 */
const setVideoSource = (oldLength) => {
  vPlayer.forEach((player, i) => {
    if (i > (oldLength - 1)) {
      player.src([{
        src: videoList[i].VideoUrl,
        type: "application/vnd.ms-sstr+xml"
      }]);
    }
  })
}

At the end call initPlayerInstances method.

initPlayerInstances();
Krishna Chaitanya
  • 11
  • 1
0

Using iframe didn't work for me. I had two videos on a page. I used setTimeout function to initialize the second video with a delay which solved the problem

var video1 = {
video1_options:'',
video1_player:'',

init: function() {

  video1.video1_options = {
    autoplay: false,
    controls: true,
    width: "100%",
    height: "auto",
    poster: "/assets/img/video/video-thumb-1.png"
  };
  video1.video1_player = amp("video-1", video1.video1_options);
  video1.video1_player.src([{ src: "VIDEO_URL", type: "application/vnd.ms-sstr+xml" }, ]);
  },
};

var video2 = {
  video2_options:'',
  video2_player:'',

  init: function() {
  
    video2.video2_options = {
      autoplay: false,
      controls: true,
      width: "100%",
      height: "auto",
      poster: "/assets/img/video/video-thumb-2.png"
    };
    video2.video2_player = amp("video-2", video2.video2_options);
    video2.video2_player.src([{ src: "VIDEO_URL", type: "application/vnd.ms-sstr+xml" }, ]);
  },
};

on document ready function =>

video1.init();

setTimeout(function (){
  video2.init();
},500)
Topu Choudhury
  • 1
  • 1