Comments (5)
Hello,
I have made support for webkitEnterFullscreen here : 8267a5b
from indigo-player.
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.
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.
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.
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.
@matvp91, thank you! 😃
from indigo-player.
Related Issues (20)
- Firefox not loading custom ThumbnailExtension
- Autoplay even if autoplay is set to false
- crossorigin attribute configuration
- Can't seek when two players are in one page
- full screen doesnt work on mobile
- sorry.... i mistaked.... :((((
- Live Indicator
- Quality Labels HOT 1
- theme.css is automatically loaded when imported as a module HOT 1
- Vertical cropping
- IMA Advertising in PIP-mode
- player often hangs on navigation HOT 3
- google drive support?
- can support blob? HOT 3
- Can we add multiple audio to hls?
- Missing return types in src/{index.d.ts,types.ts}
- Missing init function in src/{index.d.ts}
- Poster image.
- fit to screen
- Play videos one after the another based on the queue in Indigo player
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from indigo-player.