title: Dumb Question: How do I make AVPlayer look like everyone else's?
body: <h2>My Current Setup (Subject to Change)</h2>
  
  <p>I have a simple iOS app right now that plays an M3U8 using AVPlayer. In order to place custom UI elements on top of the player (text alerts, mostly) I jimmy-rigged what is probably a <strong>terrible</strong> architecture, and I'm open to the idea of scrapping the whole thing and starting over.</p>
  
  <ul>
  <li>First I created a new UIView which I called "MyPlayer". This UIView has a XIB file with nothing in it</li>
  <li>Next I created a new NSObject (now UIView) which I called "PlayerDisplay". This class also has a XIB file associated with it, which contains an ImageView and a Label</li>
  <li>In <code>MyPlayer.m</code>'s init method, I instantiate a <code>PlayerDisplay</code> using an <code>initWithMyPlayer</code> method</li>
  <li>In <code>PlayerDisplay.m</code>'s initWithMyPlayer method, I created an <code>AVPlayerViewController</code> instance</li>
  <li>I called <code>[myPlayer addSubview:controller.view]</code> and <code>controller.view.frame = myPlayer.bounds</code> to get the player to display within my view</li>
  <li>I called <code>[[NSBundle bundleForClass:[self class]] loadNibNamed:@"PlayerDisplay" owner:self options:nil]</code> to load the XIB with the ImageView and Label</li>
  <li>I called <code>[myPlayer addSubview:self.contentView]</code> and <code>self.contentView.frame = myPlayer.bounds</code> to get the player to display my ImageView and Label over top of the player</li>
  </ul>
  
  <p>It felt hack-y at the time, and it feels hack-y now. But it allows me to insert a single <code>MyPlayer</code> view into an app and have it load all of my custom control and display logic. And it works (at least as far back as iOS 8, which is the oldest I've tested, and as far forward as iOS 12.4, which is the newest I've tested)</p>
  
  <p>However I recently wanted to look into creating custom controls and looked to some industry leaders for inspiration (Netflix, YouTube, etc) - and I noticed that <strong><em>every other video player on the market looks the same</em></strong>, but none of them look like mine.</p>
  
  <h2>Netflix</h2>
  
  <p><a href="https://i.stack.imgur.com/aUOeh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aUOeh.png" alt="A sample of Netflix&#39;s iOS player"></a></p>
  
  <h2>ESPN</h2>
  
  <p><a href="https://i.stack.imgur.com/CBlDA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBlDA.jpg" alt="A sample of ESPN&#39;s iOS player"></a></p>
  
  <h2>Hulu</h2>
  
  <p><a href="https://i.stack.imgur.com/MgGZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MgGZs.png" alt="A sample of Hulu&#39;s iOS player"></a></p>
  
  <h2>Amazon Prime</h2>
  
  <p><a href="https://i.stack.imgur.com/iaqQU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iaqQU.png" alt="A sample of Amazon Prime&#39;s iOS player"></a></p>
  
  <h2>YouTube</h2>
  
  <p><a href="https://i.stack.imgur.com/UiZx8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UiZx8.jpg" alt="A sample of YouTube&#39;s iOS player"></a></p>
  
  <h2>Twitch</h2>
  
  <p><a href="https://i.stack.imgur.com/3TiFx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3TiFx.png" alt="enter image description here"></a></p>
  
  <p>Every one of these players has:</p>
  
  <ul>
  <li>White icons with transparent backgrounds placed directly on top of the video (no control bar background)</li>
  <li>A play/pause button in the dead center of the video</li>
  <li>Seek back/forward buttons on either side of the play button</li>
  <li>A seek bar at the bottom of the video</li>
  <li>A single icon in the top-left</li>
  <li>A horizontal list of icons in the top-right</li>
  </ul>
  
  <p>Not only that, but Netflix and ESPN use the exact same <s>icon set</s> seek icons (although upon further inspection, the play buttons and cast buttons differ slightly)</p>
  
  <p><s>Similarly, Hulu and Amazon Prime use the exact same icon set</s> It was pointed out that Hulu and Amazon Prime differ sufficiently to be different icon sets. I still stand by Netflix and ESPN having identical seek buttons, though. I've rearranged the pictures to make this more obvious</p>
  
  <p>It's too unbelievable to me that every single company disabled the default controls, built their own user interface from scratch, and they all <strong><em>just so happened</em></strong> to look identical. I feel like either AVPlayer has an option to enable this layout, Apple provides a framework for building UIs from icon sets which lays things out in this manner, or there may be a third-party library that is considered the "de facto" standard for video streaming, much like ExoPlayer is the leading name on Android</p>
  
  <p>Compare and contrast all of the above players with <strong><em>my</em></strong> player, which is using Apple's default UI for an <code>AVPlayerViewController</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/Ukbvc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ukbvc.png" alt="MyPlayer"></a></p>
  
  <ul>
  <li>The control bar has a background color and rounded corners</li>
  <li>The play button is within the control bar</li>
  <li>There are no seek forward / back buttons</li>
  <li>There's only a volume control in the top right instead of a list of icons</li>
  </ul>
  
  <h2>How do I make my player look like theirs?</h2>
  
  <p>Is there just a flag in AVPlayer to say "use the other UI"? Is there a third-party library I should be using? What am I doing differently from all of the big names?</p>
  
  <p>Note: I did discover <a href="https://developer.apple.com/documentation/avkit/avplayerviewcontrolsstyle" rel="nofollow noreferrer">AVPlayerViewControlsStyle</a>, which I should theoretically be able to utilize with <code>avPlayerView.controlsStyle = ...</code>, however as you can tell from my setup above - I don't actually have an instance of <code>AVPlayerView</code>. Just my own custom view and the <code>AVPlayerViewController</code>. I tried typing <code>controller.view.controlsStyle</code> into Xcode to see if it would auto-complete, but it did not - making me think I don't have an <code>AVPlayerView</code> <em>at all</em></p>
  
  <p>Second Note: I also saw <code>AVPlayerLayer</code> when looking through the official Apple docs. What is that used for? Should I be utilizing it?</p>