Giter VIP home page Giter VIP logo

Comments (5)

nums avatar nums commented on August 12, 2024 1

Hello,

I have made support for webkitEnterFullscreen here : 8267a5b

from indigo-player.

matvp91 avatar matvp91 commented on August 12, 2024

What iOS version & which mobile browser do you use? There are iOS Safari versions where native fullscreen is not supported and a fallback is required, which is not implemented yet.

Could you provide me a screenshot of the buttons that you find too small?

from indigo-player.

Janhouse avatar Janhouse commented on August 12, 2024

iOS 12.3.1 and tried in latest stable Safari and Firefox, they both work the same way.

Here is the screenshot. All of the buttons are too small.
File

Tested with this HTML

<html>
  <head><title>Stream</title></head>
  <body>
    <style>
	* {
		margin: 0;
		padding: 0;
	}
	body {background-color: black}
	.igui_timestat_duration {display:none!important}
	.igui_settings_select .igui_button_name-select-option:nth-child(2) {display:none!important}
	.igui_container_controls_seekbar {display:none}
    </style>
    <div id="playerContainer"></div>
    <script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
    <script>

      var vtag = document.createElement("video"); var hlsSupported = !!vtag.canPlayType && !!vtag.canPlayType("application/x-mpegurl");

      var source='/uber-dash/raw.mpd';
      var format='dash';

      if(hlsSupported) {
        format='hls';
        source='/uber-hls/raw.m3u8';
      }

      const config = {
        autoplay: true,
        sources: [
          {
            type: format,
            src: source,
          }
        ],
      };

      const element = document.getElementById('playerContainer');
      const player = IndigoPlayer.init(element, config);
    </script>
  </body>
</html>```

from indigo-player.

matvp91 avatar matvp91 commented on August 12, 2024

Regarding the small layout, it's because your page is rendered as a desktop web page. Mobile pages are best served with the proper viewport sizing (see: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).

Adding <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag should make the player properly scale on mobile.

As for not being able to fullscreen on iOS, I'll grab an iPhone and provide a fix or fallback soonish.

For the info, you do not need to check HLS support yourself. Provide HLS as first format and MPEG-DASH as second, indigo will figure out which format to play.

Edit: I've made the following changes:

  • If the native fullscreen API is not supported, the fullscreen button is disabled (50% opacity). This is expected behavior as the fullscreen extension only supports the native fullscreen API (for now).
  • on iOS, muting the player did not properly work, this is fixed.

I'll stretch the container in a "fixed" container as a fallback, which is what YouTube does. I'll also look into supporting videoElement.webkitEnterFullscreen() for iOS specifically.

from indigo-player.

Janhouse avatar Janhouse commented on August 12, 2024

@matvp91, thank you! 😃

from indigo-player.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.