Henrik Sommerfeld

Azure Media Player Full Screen Resizing Fix

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
10var videoElementIdSelector = "#" + $attrs.videocontainerid;
11var myPlayer = amp(videoElementIdSelector, playerOptions);
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    });
23    src: assets.Url,
24    type: "application/vnd.ms-sstr+xml"
25}, subtitles);
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();
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    }
41// AMP bug fix end
No matching posts found. You can use wildcards and search only in titles, e.g. title:iot
Loading search index, please wait...
Search index failed to download 😢