Multiple instances of Azure Media Player render volume control useless
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,
javascript
azure video-streaming asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
add a comment |
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,
javascript
azure video-streaming asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
Can you please post your code?
– Itay Podhajcer
Nov 14 '18 at 6:07
I'm having multiple of these <video id="video1" controls muted autoplay preload="none" width="100%" height="100%" class="header-video azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='"nativeControlsForTouch":false,"fluid":true,"techOrder:["azureHtml5JS", "html5"]'><source src="**.ism" type="application/vnd.ms-sstr+xml"></video> ... Toggling the muted affects all players.
– Macomatic
Nov 14 '18 at 7:09
They all have the same id?
– Itay Podhajcer
Nov 14 '18 at 7: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 <video> tag without changing too much to the current site.
– Macomatic
Nov 14 '18 at 9:29
It feels like a problem in the way AMP script probes the HTML code for <video> tags. I do remember using this player in an Angular app and it was a pain until I got it to work as required (I also couldn't avoid using some dynamic scripting to solve the problems I had). Sorry.
– Itay Podhajcer
Nov 14 '18 at 9:47
add a comment |
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,
javascript
azure video-streaming asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
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,
javascript
azure video-streaming javascript
azure video-streaming asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
asked Nov 14 '18 at 4:32
MacomaticMacomatic
538
538
Can you please post your code?
– Itay Podhajcer
Nov 14 '18 at 6:07
I'm having multiple of these <video id="video1" controls muted autoplay preload="none" width="100%" height="100%" class="header-video azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='"nativeControlsForTouch":false,"fluid":true,"techOrder:["azureHtml5JS", "html5"]'><source src="**.ism" type="application/vnd.ms-sstr+xml"></video> ... Toggling the muted affects all players.
– Macomatic
Nov 14 '18 at 7:09
They all have the same id?
– Itay Podhajcer
Nov 14 '18 at 7: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 <video> tag without changing too much to the current site.
– Macomatic
Nov 14 '18 at 9:29
It feels like a problem in the way AMP script probes the HTML code for <video> tags. I do remember using this player in an Angular app and it was a pain until I got it to work as required (I also couldn't avoid using some dynamic scripting to solve the problems I had). Sorry.
– Itay Podhajcer
Nov 14 '18 at 9:47
add a comment |
Can you please post your code?
– Itay Podhajcer
Nov 14 '18 at 6:07
I'm having multiple of these <video id="video1" controls muted autoplay preload="none" width="100%" height="100%" class="header-video azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='"nativeControlsForTouch":false,"fluid":true,"techOrder:["azureHtml5JS", "html5"]'><source src="**.ism" type="application/vnd.ms-sstr+xml"></video> ... Toggling the muted affects all players.
– Macomatic
Nov 14 '18 at 7:09
They all have the same id?
– Itay Podhajcer
Nov 14 '18 at 7: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 <video> tag without changing too much to the current site.
– Macomatic
Nov 14 '18 at 9:29
It feels like a problem in the way AMP script probes the HTML code for <video> tags. I do remember using this player in an Angular app and it was a pain until I got it to work as required (I also couldn't avoid using some dynamic scripting to solve the problems I had). Sorry.
– Itay Podhajcer
Nov 14 '18 at 9:47
Can you please post your code?
– Itay Podhajcer
Nov 14 '18 at 6:07
Can you please post your code?
– Itay Podhajcer
Nov 14 '18 at 6:07
I'm having multiple of these <video id="video1" controls muted autoplay preload="none" width="100%" height="100%" class="header-video azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='"nativeControlsForTouch":false,"fluid":true,"techOrder:["azureHtml5JS", "html5"]'><source src="**.ism" type="application/vnd.ms-sstr+xml"></video> ... Toggling the muted affects all players.
– Macomatic
Nov 14 '18 at 7:09
I'm having multiple of these <video id="video1" controls muted autoplay preload="none" width="100%" height="100%" class="header-video azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='"nativeControlsForTouch":false,"fluid":true,"techOrder:["azureHtml5JS", "html5"]'><source src="**.ism" type="application/vnd.ms-sstr+xml"></video> ... Toggling the muted affects all players.
– Macomatic
Nov 14 '18 at 7:09
They all have the same id?
– Itay Podhajcer
Nov 14 '18 at 7:30
They all have the same id?
– Itay Podhajcer
Nov 14 '18 at 7: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 <video> tag without changing too much to the current site.
– Macomatic
Nov 14 '18 at 9:29
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 <video> tag without changing too much to the current site.
– Macomatic
Nov 14 '18 at 9:29
It feels like a problem in the way AMP script probes the HTML code for <video> tags. I do remember using this player in an Angular app and it was a pain until I got it to work as required (I also couldn't avoid using some dynamic scripting to solve the problems I had). Sorry.
– Itay Podhajcer
Nov 14 '18 at 9:47
It feels like a problem in the way AMP script probes the HTML code for <video> tags. I do remember using this player in an Angular app and it was a pain until I got it to work as required (I also couldn't avoid using some dynamic scripting to solve the problems I had). Sorry.
– Itay Podhajcer
Nov 14 '18 at 9:47
add a comment |
1 Answer
1
active
oldest
votes
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%"
);
);
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293230%2fmultiple-instances-of-azure-media-player-render-volume-control-useless%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%"
);
);
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
add a comment |
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%"
);
);
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
add a comment |
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%"
);
);
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
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%"
);
);
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
answered Nov 19 '18 at 3:19
MacomaticMacomatic
538
538
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293230%2fmultiple-instances-of-azure-media-player-render-volume-control-useless%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please post your code?
– Itay Podhajcer
Nov 14 '18 at 6:07
I'm having multiple of these <video id="video1" controls muted autoplay preload="none" width="100%" height="100%" class="header-video azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='"nativeControlsForTouch":false,"fluid":true,"techOrder:["azureHtml5JS", "html5"]'><source src="**.ism" type="application/vnd.ms-sstr+xml"></video> ... Toggling the muted affects all players.
– Macomatic
Nov 14 '18 at 7:09
They all have the same id?
– Itay Podhajcer
Nov 14 '18 at 7: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 <video> tag without changing too much to the current site.
– Macomatic
Nov 14 '18 at 9:29
It feels like a problem in the way AMP script probes the HTML code for <video> tags. I do remember using this player in an Angular app and it was a pain until I got it to work as required (I also couldn't avoid using some dynamic scripting to solve the problems I had). Sorry.
– Itay Podhajcer
Nov 14 '18 at 9:47