question

DanteDeSantis-7559 avatar image
0 Votes"
DanteDeSantis-7559 asked DanteDeSantis-7559 edited

Azure Media Player Chrome App - Mobile

I have been working on a Azure Media Player project and it has been going great, everything is working properly. Once I was satisfied with the state of my project I decided to test it. My testing went great on PC and Mac across all browsers. Testing on mobile devices like my iPhone, iPad and Fire Tablet did not go so good. The player ran as expected on Safari for my iPhone and iPad, even full-screening the window maintains the control bar I defined rather than using the native iOS player controls :). However when using the Chrome App on my iPhone and iPad my control bar contains the captions button even though I do not have it enabled in my code. Also when I full-screen the Media Player I lose my defined control bar which is replaced by the native iOS player controls :(.

Does anyone know a way to ensure that my defined control bar appears in full-screen mode on the chrome app for mobile devices? Also any help with disabling the captions button on the chrome app for mobile devices would be greatly appreciated as well.

Thanks in advance,
-Dante

azure-media-services
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JamesLodge-0307 avatar image
0 Votes"
JamesLodge-0307 answered JamesLodge-0307 edited

Hi @DanteDeSantis-7559

I’m like you regarding working on a project using AMS.

I have a similar issue but regarding CC/Subs, but it answers your question as to why is the CC controls exposed in AVPlayer webvtt-subtitlescaptions-in-a-hls-stream-for-ios-i.html


Here is Apples Doc
_index.html

You’ll see that AVPlayer defaults to showing the CC control when the EXT-X-MEDIA header isn’t present in the manifest.

I have a question for you, how are you avoiding using AVPlayer in Safari on iPhone? I assume you’re using Azure Media Player rather than video.js or such like?


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

DanteDeSantis-7559 avatar image
0 Votes"
DanteDeSantis-7559 answered DanteDeSantis-7559 edited

@JamesLodge-0307

Thank you for your help. I am looking into the solution you presented , hopefully it works :).

As for your question I accidently misspoke, full-screening on iPhone will display the native iOS video player controls as seen here:

77872-img-1051.png


However on my when using Safari on iPad, I get my defined AMS control bar as seen here:

77789-image0.png

My iPhone is running iOS 14.2 while my iPad is running iOS 13.5.1 I am really not sure why my AMS contol bar displays while on iPad, I never changed any settings for Safari. Hope this helps in someway.

-Dante



img-1051.png (167.8 KiB)
image0.png (549.6 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

<video id="azuremediaplayer" class="azuremediaplayer amp-flush-skin amp-big-play-centered"></video>
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: false,
logo: { "enabled": false },
width: "640",
height: "480",
poster: "",
playbackSpeed: {
enabled: true,
]
},
plugins: {
timelineMarker: {
markertime: ["00:00:45", "00:01:25", "00:02:15"],
section: ["Overview", "Example 1", "Solution 1"]
}
timelineButton: {
markertime: ["00:00:30", "00:01:00", "00:02:00", "00:02:45"]
},
tagButton: {
section: ["Permutation", "Combination", "Conditional Probability", "Intersection"],
link: []
}
}
}

0 Votes 0 ·

@DanteDeSantis-7559

Regarding the time line maker, but more specifically the timelinebutton code, could you point me to the documentation for that please?


I see the Time Line Marker plugin, but were is the time Line button plugin?

many thanks

0 Votes 0 ·

@BerthaDocHouse-7852

There is no plugin code for the Timeline Button. This was created by myself, I basically just created a button using the same format as another pre existing flyout button built within the Azure Media Player.

I believe I based it off the captions button and flyout menu.

1 Vote 1 ·
JamesLodge-0307 avatar image
0 Votes"
JamesLodge-0307 answered

This is exactly the same behaviour I see. iOS iPhone AVPlayer and iPad HTLM5 player. I’ve never found a way to change it. It would actually resolve my CC issue as I wouldn’t be reliant on the manifest containing the EXT-X-MEDIA header for closed captions, because this is only needed for AVPlayer. I’m pretty sure this behaviour is baked in to iOS and is device specific. I’ve looked through the webkit experimental features setting in Safari before on the iPhone. There’s is a “Media Capability Externsion” setting but it’s on by default.

Thanks for clearing up, I thought I was missing something.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

DanteDeSantis-7559 avatar image
0 Votes"
DanteDeSantis-7559 answered

@JamesLodge-0307

Please let me know if you find a way around this.

Thanks for all your help :)

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.