Azure Media Player Full Screen Resizing Fix

12 February 2017

Lately I’ve been working on switching to Azure Media Services from another video platform on my customer’s web site. I’ve found some challenges related to sizing of the player in different browsers with different playback methods (HTML5, Flash and Silverlight). Particularly the size of the player when exiting full screen mode has been flaky. I can’t say for sure that this isn’t the fault of the web site it lives on, but I don’t see anything indicating that either.

The problem is that the player keeps the height of the entire screen after exiting full screen mode. Video height is by the way also handled “manually” (setting a known video height with JavaScript) when resizing the browser window at Microsoft’s demo site at the time of writing this. I’m currently using version 1.8.1 of the player by the way.

Solving the issue

There is great documentation of the player at https://amp.azure.net/libs/amp/latest/docs/ where I found the exitFullscreen event. This is where I can manually set the correct height, which I get from the player itself once it’s loaded, at the loadedmetadata event. We have an Angular v1 controller that does a few more things, but these are the relevant parts related to the issue.

Part of Azure Media Player Angular v1 Controller

 1var playerOptions = {
 2    "techOrder": ["azureHtml5JS", "html5", "flashSS", "silverlightSS"],
 3    "logo": { enabled: false },
 4    "autoplay": $attrs.autoplay === "true",
 5    "controls": !($attrs.autoplay === "true" && $attrs.showcontrols === "false"),
 6    "width": "100%",
 7    "height": "auto",
 8    "poster": assets.ThumbnailUrl
 9}
10var videoElementIdSelector = "#" + $attrs.videocontainerid;
11var myPlayer = amp(videoElementIdSelector, playerOptions);
12
13var subtitles = [];
14var assetSubtitles = assets.Subtitles || [];
15assetSubtitles.forEach(function (subtitle, i) {
16    subtitles.push({
17        kind: "subtitles", src: getSrc(subtitle.Src), 
18		srclang: subtitle.SrcLang, label: subtitle.Title
19    });
20});
21
22myPlayer.src({
23    src: assets.Url,
24    type: "application/vnd.ms-sstr+xml"
25}, subtitles);
26
27// AMP bug fix start
28// Sometimes the video container doesn't get resized after existing fullscreen mode.
29$(myPlayer).bind("loadedmetadata", function () {
30    $scope.correctVideoHeight = $(videoElementIdSelector).height();
31});
32
33$(myPlayer).bind("fullscreenchange", function () {
34    if (!myPlayer.isFullScreen()) {
35        var videoContainer = $(videoElementIdSelector);
36        if (videoContainer.height() !== $scope.correctVideoHeight) {
37            videoContainer.height($scope.correctVideoHeight);
38        }
39    }
40});
41// AMP bug fix end