Is it possible to detect if a browser supports Native Player ?

[chandarsunderraj]

Description

I am trying to initialise a video playback from a CTA, by creating a dynamic video tag with a modal popup to play video in desktop, play the video in native fullscreen in mobile devices which supports native playback.
After playback will kill destroy the instance on modal close or native player close event.

Issue

Right now the issue is, modal loads up in mobile & later video starts playing into native fullscreen in iPhone.
Hence i would like to know is there any way i could detect if a browser supports native playback & load the video without a custom modal. Such that the transition from click of CTA to native player will be seamless.

Regards,
Chandar Sunderraj

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

I don't think there's really a way to detect it. iPhones and older iPads used native playback in fullscreen (and on iPhone always unless inline is set). But I've seen some other browsers on Android and what not that implement their own "native" playback.

[chandarsunderraj]

@gkatsev Thanks for the response, right now VideoJS is doing that internally by not loading their custom controls on a device that supports native playback, if could access the same check, i would not add a modal, instead would directly trigger a play which would play it in a Native fullscreen player.

[gkatsev]

You can try using player.usingNativeControls() which should tell you whether the player will be using native controls or not.

[chandarsunderraj]

@gkatsev i tried with the player.usingNativeControls() it always returns false, tried the same iOS simulator and in actual iPhone8 both had a same false as response.
Is there any other options ? How does videojs decides to load custom player controls or native player controls ?

[gkatsev]

Looks like the code for it here

video.js/src/js/tech/html5.js

Lines 102 to 109 in a37f853

	// Determine if native controls should be used
	// Our goal should be to get the custom controls on mobile solid everywhere
	// so we can remove this all together. Right now this will block custom
	// controls on touch enabled laptops like the Chrome Pixel
	if ((browser.TOUCH_ENABLED || browser.IS_IPHONE ||
	browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true) {
	this.setControls(true);
	}

[chandarsunderraj]

@gkatsev , thanks for your response,
For my use case of closing the custom modal for video playback when the native playback close icon is pressed is done with the following code

video.addEventListener('webkitendfullscreen', (e) => { //code to destroy my custom modal on close of x icon in ios native close button });

By this devices that doesn't support native playback played the video in my custom modal, iOS devices that supported native playback, i can destroy or close the custom modal on close of native players close.