iOS and Brightcove Player

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Playback

In this topic, you will learn details of the use of Brightcove Player on iOS 10 and later. To see the Webkit (a web browser engine) standards for videos and iOS, reference the organization's New <video> Policies for iOS document.

Stop unwanted segment download

It is possible that iOS may download unwanted segments causing excessive bandwidth usage. In the situation where autoplay is enabled, segments will be downloaded even if preload is set to none. The only way to prevent this is to not use the autoplay attribute.

Auto playing a video

Given that the concern of possible unwanted segments being downloaded is not an issue, you can autoplay a video. For this to occur you must do the the following:

  • Add the autoplay attribute. For the iframe embed code, set this attribute to true.
  • Add the playsinline attribute. For the iframe embed code, set this attribute to true.
  • Add the muted attribute. For the iframe embed code, set this attribute to true. Alternatively, you can use a video with no sound track.

In-page embed code implementation:

<video-js data-video-id="5045678908001"
	data-account="1752604059001"
	data-player="default"
	data-embed="default"
	data-application-id
	class="video-js"
	autoplay playsinline muted
	controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

iframe embed code implementation:

<iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?
  videoId=5811862231001&autoplay=true&muted=true&playsinline=true"
	allowfullscreen
	webkitallowfullscreen
	mozallowfullscreen></iframe>

For a full discussion of autoplay, see the Autoplay Considerations document.

Playing a video non-fullscreen

To play a video non-fullscreen, you must perform the following step:

  • Set the playsinline attribute to true.

Playing a video fullscreen

When a user switches from inline playback to fullscreen mode, the iOS native player is used instead of the Brightcove player, with the following one exception:

  • iPad with Safari 12 running on iOS 12, which will automatically run Brightcove Player.

Using the native player allows the player to take advantage of the entire device screen. Obviously, with the Brightcove Player controls removed, some functionality could potentially be lost. If you wish NOT to allow fullscreen, but only for iOS devices, you could use the following code:

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
		fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
	if (videojs.browser.IS_IOS ) {
		fullScreenElement.parentNode.removeChild(fullScreenElement);
	}
  });
</script>