Search code examples
videochromecast

Chromecast progressive MP4 playback zooming in to crop video, shows scrollbars

I was having issues getting adaptive HLS working in the new public release of the Google Cast SDK (which I'll save for a different question) so as a sanity check I wanted to revert back to a progressive MP4 which was working fine in the developer preview version of the SDK.

The video does play, however there is a problem, it is zoomed in and scrollbars appear on the screen.

Here is the section of my Chrome Sender code that creates the MediaInfo instance:

var mediaInfo = new chrome.cast.media.MediaInfo('http://url_to_progressive_mp4.mp4');
mediaInfo.contentType = 'video/mp4';
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.duration = 1732;

http://url_to_progressive_mp4.mp4 is a signed URL on CloudFront, I can open it up in Chrome (browser), VLC, etc. It also worked just fine in the developer preview release of the SDK.

My receiver is a custom receiver and is the same as the example in the docs:

<html>
<head>
  <title>Cast</title>
  <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
</head>
<body>
  <video id='media'/>
  <script>
    window.onload = function() {
      window.mediaElement = document.getElementById('media');
      window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
      window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
      window.castReceiverManager.start();
    }
  </script>
</body>

I can't understand why it would do this and I want to get the MP4 working again before I continue with HLS.

Solution

  • The Cast team states the following in the receiver.html of the simple receiver sample app on their Github page:

    We find that having everything fit in the HTML boxes tends to look nicer on TV
so, we also set overflow: hidden, which clips all flowing outside of boxes or
adding of scrollbars, which aren't useful on TV.
-->
<style type="text/css">
  @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
  body {
    font-family: "Droid Serif", serif;
    color: #444;
    line-height: 150%;
    border: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }
  video {
    width: 100%;
    height: 100%;
    margin: auto auto;
    overflow: hidden !important;
  }
</style>