Code Monkey home page Code Monkey logo

indigo-player's People

Contributors

dependabot[bot] avatar ladsong avatar matvp91 avatar psuru avatar sergivb01 avatar stoicbuddha avatar vjoao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

indigo-player's Issues

Missing return types in src/{index.d.ts,types.ts}

tsc reports to following issues with ./src/types.ts:

node_modules/indigo-player/src/index.d.ts:28:17 - error TS7010: 'setChunksPath', which lacks return-type annotation, implicitly has an 'any' return type.

28 export function setChunksPath(chunksPath: string);
                   ~~~~~~~~~~~~~

node_modules/indigo-player/src/index.d.ts:34:17 - error TS7010: 'addModuleLoader', which lacks return-type annotation, implicitly has an 'any' return type.

34 export function addModuleLoader(moduleLoader: IModuleLoader<IModule>);
                   ~~~~~~~~~~~~~~~

node_modules/indigo-player/src/index.d.ts:40:17 - error TS7010: 'setConsoleLogs', which lacks return-type annotation, implicitly has an 'any' return type.

40 export function setConsoleLogs(enableConsoleLogs: boolean);
                   ~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:334:3 - error TS7010: 'create', which lacks return-type annotation, implicitly has an 'any' return type.

334   create(name: string, callback: NextHook);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:360:3 - error TS7010: 'on', which lacks return-type annotation, implicitly has an 'any' return type.

360   on(name: string, callback: EventCallback);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:361:3 - error TS7010: 'once', which lacks return-type annotation, implicitly has an 'any' return type.

361   once(name: string, callback: EventCallback);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:362:3 - error TS7010: 'emit', which lacks return-type annotation, implicitly has an 'any' return type.

362   emit(name: string, eventData?: IEventData);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:366:3 - error TS7010: 'load', which lacks return-type annotation, implicitly has an 'any' return type.

366   load();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:367:3 - error TS7010: 'unload', which lacks return-type annotation, implicitly has an 'any' return type.

367   unload();
      ~~~~~~~~~

node_modules/indigo-player/src/types.ts:369:3 - error TS7010: 'play', which lacks return-type annotation, implicitly has an 'any' return type.

369   play();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:370:3 - error TS7010: 'pause', which lacks return-type annotation, implicitly has an 'any' return type.

370   pause();
      ~~~~~~~~

node_modules/indigo-player/src/types.ts:371:3 - error TS7010: 'seekTo', which lacks return-type annotation, implicitly has an 'any' return type.

371   seekTo(time: number);
      ~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:372:3 - error TS7010: 'setVolume', which lacks return-type annotation, implicitly has an 'any' return type.

372   setVolume(volume: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:373:3 - error TS7010: 'selectTrack', which lacks return-type annotation, implicitly has an 'any' return type.

373   selectTrack(track: ITrack);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:374:3 - error TS7010: 'selectAudioLanguage', which lacks return-type annotation, implicitly has an 'any' return type.

374   selectAudioLanguage(language: string);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:375:3 - error TS7010: 'setPlaybackRate', which lacks return-type annotation, implicitly has an 'any' return type.

375   setPlaybackRate(playbackRate: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:379:3 - error TS7010: 'load', which lacks return-type annotation, implicitly has an 'any' return type.

379   load();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:380:3 - error TS7010: 'unload', which lacks return-type annotation, implicitly has an 'any' return type.

380   unload();
      ~~~~~~~~~

node_modules/indigo-player/src/types.ts:382:3 - error TS7010: 'setSource', which lacks return-type annotation, implicitly has an 'any' return type.

382   setSource(src: string);
      ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:384:3 - error TS7010: 'play', which lacks return-type annotation, implicitly has an 'any' return type.

384   play();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:385:3 - error TS7010: 'pause', which lacks return-type annotation, implicitly has an 'any' return type.

385   pause();
      ~~~~~~~~

node_modules/indigo-player/src/types.ts:386:3 - error TS7010: 'seekTo', which lacks return-type annotation, implicitly has an 'any' return type.

386   seekTo(time: number);
      ~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:387:3 - error TS7010: 'setVolume', which lacks return-type annotation, implicitly has an 'any' return type.

387   setVolume(volume: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:388:3 - error TS7010: 'setPlaybackRate', which lacks return-type annotation, implicitly has an 'any' return type.

388   setPlaybackRate(playbackRate: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:392:3 - error TS7010: 'load', which lacks return-type annotation, implicitly has an 'any' return type.

392   load();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:393:3 - error TS7010: 'unload', which lacks return-type annotation, implicitly has an 'any' return type.

393   unload();
      ~~~~~~~~~

node_modules/indigo-player/src/types.ts:395:3 - error TS7010: 'play', which lacks return-type annotation, implicitly has an 'any' return type.

395   play();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:396:3 - error TS7010: 'pause', which lacks return-type annotation, implicitly has an 'any' return type.

396   pause();
      ~~~~~~~~

node_modules/indigo-player/src/types.ts:397:3 - error TS7010: 'seekTo', which lacks return-type annotation, implicitly has an 'any' return type.

397   seekTo(time: number);
      ~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:398:3 - error TS7010: 'setVolume', which lacks return-type annotation, implicitly has an 'any' return type.

398   setVolume(volume: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:399:3 - error TS7010: 'selectTrack', which lacks return-type annotation, implicitly has an 'any' return type.

399   selectTrack(track: ITrack);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:400:3 - error TS7010: 'selectAudioLanguage', which lacks return-type annotation, implicitly has an 'any' return type.

400   selectAudioLanguage(language: string);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:401:3 - error TS7010: 'setPlaybackRate', which lacks return-type annotation, implicitly has an 'any' return type.

401   setPlaybackRate(playbackRate: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:424:3 - error TS7010: 'play', which lacks return-type annotation, implicitly has an 'any' return type.

424   play();
      ~~~~~~~

node_modules/indigo-player/src/types.ts:425:3 - error TS7010: 'pause', which lacks return-type annotation, implicitly has an 'any' return type.

425   pause();
      ~~~~~~~~

node_modules/indigo-player/src/types.ts:426:3 - error TS7010: 'seekTo', which lacks return-type annotation, implicitly has an 'any' return type.

426   seekTo(time: number);
      ~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:427:3 - error TS7010: 'setVolume', which lacks return-type annotation, implicitly has an 'any' return type.

427   setVolume(volume: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:428:3 - error TS7010: 'selectTrack', which lacks return-type annotation, implicitly has an 'any' return type.

428   selectTrack(track: ITrack);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:429:3 - error TS7010: 'selectAudioLanguage', which lacks return-type annotation, implicitly has an 'any' return type.

429   selectAudioLanguage(language: string);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:430:3 - error TS7010: 'setPlaybackRate', which lacks return-type annotation, implicitly has an 'any' return type.

430   setPlaybackRate(playbackRate: number);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:431:3 - error TS7010: 'destroy', which lacks return-type annotation, implicitly has an 'any' return type.

431   destroy();
      ~~~~~~~~~~

node_modules/indigo-player/src/types.ts:433:3 - error TS7010: 'on', which lacks return-type annotation, implicitly has an 'any' return type.

433   on(name: string, callback: EventCallback);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:434:3 - error TS7010: 'once', which lacks return-type annotation, implicitly has an 'any' return type.

434   once(name: string, callback: EventCallback);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:435:3 - error TS7010: 'removeListener', which lacks return-type annotation, implicitly has an 'any' return type.

435   removeListener(name: string, callback: EventCallback);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:436:3 - error TS7010: 'emit', which lacks return-type annotation, implicitly has an 'any' return type.

436   emit(name: string, eventData?: IEventData);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/indigo-player/src/types.ts:438:3 - error TS7010: 'setError', which lacks return-type annotation, implicitly has an 'any' return type.

438   setError(error: IPlayerError);
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Can't seek when two players are in one page

I have added multiple players in one page.

the thing is when I play one of them for the first time the seek bar works correctly (it shows how much downloaded and where is now and you can click it)
BUT when I play another one of them I can only click the last one, and the previous ones wont do anything when you click on the seek bar.

Autoplay even if autoplay is set to false

Describe the bug
When calculating the property canAutoplay of env, the can-autoplay library from

export async function getEnv(config: Config): Promise<IEnv> {
starts the player in function startPlayback, even if config.autoplay is set to false. The reason is, getEnv is run on init and starts the video player.

This leads to unexpected video playback and throws an error in Safari, where Safari blocks autoplay.

To Reproduce
Steps to reproduce the behavior:

  1. Clone master branch
  2. Set autoplay to false
  3. Put console.logs in can-autoplay library

Expected behavior
Ultimately, .init should not playback video if autoplay is set to false.
In calculating getEnv object, can-autoplay should not playback the video.

Screenshots
image

Desktop (please complete the following information):

  • OS Windows 10
  • Browser Edge
  • Version 96.0.1054.43

Adding custom videoTags

Is it possible to either have a

config = {
videoTags: autoplay loop muted,
....

or a way to add the muted and loop variable ?
similar to the way you do autoplay: true,

Embed Video

Please create option to embed video in browser

Seekbar Component should be accessible for new modules

I am currently trying to create a module for displaying BIF files, which work approximately the same way the thumbnails.vtt file works in the docs. Unfortunately, I don't seem to have a decent way of accessing the same components you used for creating the Thumbnail module.

What I would like to see is a way to bring this into new modules so I can figure out hover position and draw elements near it.

controll aspect ratio

I have some 4:5 videos, their dimensions are 1080 × 1350 and lower.
When I add them into the indigo-player , then I get black bars on each side. as its fitting to player windows. I know I probably can control this by CSS on the player windows, but this will off course variate per display and so on.

Therefor, introduce aspect ratio as a control, where either you can read the aspect ratio of the file natively, or it can be punched inn as a variable.

WebVTT thumbs do not work, if the list doesn't start with 00:00.000

Describe the bug

if the entries in the .vtt file do not start with 00:00.000, which is unfortunately the default behavior, if you use [makesprites.py] and do not manually set the TIMESYNC_ADJUST constant to -1, Indiego-player will not show any thumbs on the cue/progress-bar.

To Reproduce

just manually modify the first entry of a working .vtt-file and increment the start time

Expected behavior

well -- it's in fact a flaw of another application, but nevertheless it would be nice, if indigo-player could tolerate this kind of vtt-files, because the actual cause for this issue rather hard to debug for most users.

[btw: i have to say, your player is IMHO by far the best available open source video player right now! :) ]

crossorigin attribute configuration

Hello
I'm trying to refrence a video from another host I have. so I want to set the cross origin attribute on the videos to credentials and some times there shouldn't be a crossorigin attribute at all.

Here is a solution I thought of
set the attribute in the config object.
and if we set it to false the video tag should not have crossorigin attribute at all

tanks in advance

Poster image.

Is your feature request related to a problem? Please describe.
Instead of preview image mode, I hope indigo player can support poster image of video instead of using
still cut of the first frame?

Describe the solution you'd like
I hope there is config option for poster image.

Quality Labels

Quality labels are for some reason implemented in width, although according to unwritten standards, labels are considered in height, for example, Full HD, 1920 * 1080 is 1080 / 1080p, not 1920

Provide a React component

Description
Provide a npm module that exposes a Player component for React.
Idea: import Player from 'indigo-player/react' (currently not available, this is merely an idea).

Code sample

import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import IndigoPlayer from 'indigo-player';

const CHUNKS_PATH = `https://cdn.jsdelivr.net/npm/indigo-player@${
  IndigoPlayer.VERSION
}/lib/`;

export default function Player({ config, chunksPath }) {
  const container = useRef(null);

  useEffect(() => {
    IndigoPlayer.setChunksPath(chunksPath);
  }, [chunksPath]);

  useEffect(() => {
    const player = IndigoPlayer.init(container.current, config);
    return () => player.destroy();
  }, [config]);

  return <div ref={container} />;
}

Player.propTypes = {
  config: PropTypes.shape({}).isRequired,
  chunksPath: PropTypes.string,
};

Player.defaultProps = {
  config: undefined,
  chunksPath: CHUNKS_PATH,
};
  • Proper cleanup when player.destroy() is called.
  • Find a proper way to expose the player API which is returned by IndigoPlayer.init.
  • I'm not convinced about the IndigoPlayer.setChunksPath implementation for libraries. Chunks never really worked out-of-the-box when including an npm lib.

How to play mpeg-dash + Clearkey?

Is it possible to use this player to play mpeg-dash + clearkey?

One of the code examples at https://matvp91.github.io/indigo-player/#/Configuration?id=mpeg-dash-drm-widevine-amp-playready use a playready and widevine licence:

{
sources: [
// Play a Dash manifest
{
type: 'dash',
src: 'https://amssamples.streaming.mediaservices.windows.net/622b189f-ec39-43f2-93a2-201ac4e31ce1/BigBuckBunny.ism/manifest(format=mpd-time-csf)',
drm: {
widevine: {
licenseUrl: 'https://amssamples.keydelivery.mediaservices.windows.net/Widevine/?KID=1ab45440-532c-4399-94dc-5c5ad9584bac',
},
playready: {
licenseUrl: 'https://amssamples.keydelivery.mediaservices.windows.net/PlayReady/',
},
},
},
],
}

I thought that i needed to buy a drm licence to use playready or widevine, the license listed above is for free or just for testing?

Allow developers to create external modules.

This ticket is related to all status updates regarding the addModuleLoader API.

  • Implement the addModuleLoader API in the core.
  • Release as a beta version (& if needed, multiple beta's will be released with refinements).
  • Provide proper documentation about this API.
  • Provide a repository with an external module example.

Release

Version 1.2.0 is released on npmjs, with a first version of the addModuleLoader API. You can install it as following: npm install indigo-player.

Documentation

A first draft of the documentation can be found here: https://matvp91.github.io/indigo-player/#/CreateAModule

Sample project

An example project can be found here: https://github.com/matvp91/indigo-player-extension-example

HN Feedback

Collection of the feedback from https://news.ycombinator.com/item?id=18939145.

  • When clicking the video, it should trigger playOrPause (preferably with a confirmation temporarily visible).
  • The behavior of the volume button on mobile:
    • When clicking the icon, it should open the slider
    • OR remove the volume button on mobile completely and people can use the physical volume buttons of the device instead.
  • Add state of volume to the UI (eg: 0.5 is a volume-1 icon, 1 is a volume-2 icon, muted is a crossed icon).
  • Possibly add an option to force the player in landscape when going fullscreen on a mobile device.

google-ima Extension is incompatible with iOS.

Describe the bug
iOS uses a single video element approach, google-ima SDK will re-use the same video element to display it's ads. As for other approaches, google-ima utilizes an overlay.

To Reproduce
Use the IMA sample tags to play a preroll on iOS.

Desktop (please complete the following information):

  • Browser: iOS
  • Version: All

Play videos one after the another based on the queue in Indigo player

Describe the bug
I have been working on Indigo player since last few days. I have some file URLs inside an array. I'm getting random URL from the array and trying to play videos one after the other. But I'm not finding a way to do so.

Expected behavior
It should take song URLs from array and play one after the another.

Desktop (please complete the following information):

  • OS: [UBUNTU]
  • Browser [FIREFOX]
  • Version [90.0.2]

player often hangs on navigation

over the last weeks i developed a new simple open source tool (covtc) to generate DASH/HLS content more easily and user friendly, which also puts indigo-player as default playback solution into the generated bundles. while testing the first results of this transcoding solution, i noticed, that indigo-player very often stops playing when you navigate to another position in the clip by pressing the mouse somewhere in the navigation bar. even pressing the stop and go button doesn't change this behavior anymore. this happens in firefox just as in chrome. there is also no noticeable error message or other useful information visible in the webdevelopper console of both browsers, which would indicate a plausible cause for this behavior.

please could you take a look at this example webpage:

http://users.mur.at/ms/diverses/btc/

the issue should be relative easy to reproduce by few clicks on the navigation bar.

nevertheless it could be caused by an erorr on my side resp. some wrong encoder settings in the encoding pipeline as well, but the symptoms are definitely not observable in mpv or vlc on an actual debian testing machine. i just didn't test it with other webplayers until now.

Error in Tumbnail module

Apparently the parsing process has some kind of error, if a sprite is specified in the VTT file relative to the VTT file, then the player loads the sprite relative to the root of the site
2020-04-20-205114
2020-04-20-205250

In the case that is provided in the screenshot, the tooltip.jpg file and tooltip.vtt are next to each other in the same folder

There is no method to switch video source

Is your feature request related to a problem? Please describe.
I need to be able to switch the video source for a module I'm building that keeps the video behind a passwall (although I'll need to do this for paywall as well).

Describe the solution you'd like
I would like a method in the player object like player.src or player.source which would have the same format as the regular source object, which would allow source switching on the fly.

Describe alternatives you've considered
I have tried setting the source on the video element manually, but it throws a DOM Exception when I go to play the video 100% of the time.

can support blob?

Can this player support blob url to play private (mp4 or webm) videos ?
can you add this function in this please ?

Vertical cropping

Describe the bug
The 16:9 video on the example page crops the lower half of the video when you go fullscreen on a 21:9 monitor. Preferably it should add black bars on the sides instead.

To Reproduce
Steps to reproduce the behavior:

  1. Have a 21:9 monitor
  2. Go to https://matvp91.github.io/indigo-player/#/
  3. Click on fullscreen

Expected behavior
Black bars on the sides, the full video visible in the middle

Screenshots
image
image

Desktop

  • OS: Manjaro
  • Browser: Chromium
  • Version: 81.0.4044.113

IMA Advertising in PIP-mode

When the IMA option is turned on and the picture-in-picture mode is switched on, the following is observed (namely, when playing a commercial):

  • the ad plays successfully in the mini player
  • the yellow progress bar does not fill
  • at the end of the commercial, the transition to the main video is not performed

Live Indicator

Hey,

Is there any way to show a live indicator? Didn't find anything in docs.

Best regards.

Deprecate the tracks API in favor of explicitly exposing languages and resolutions.

#59 (comment) explains this a bit more in depth.

The tracks API is not aware of the differences in each rendition besides resolution & bandwidth. A track is not aware of the language, which would break quality selection (you'll end up selecting a different language all of sudden when manually scaling down / up an adaptive stream format).

This proposal would be about exposing languages and resolutions.

  • languages: [language: string] - Contains a list of languages as defined in the manifest.
  • resolutions: [resolution: IResolution] - Contains a list of resolutions, with the IResolution interface containing the following properties: width, height, bitrate. This list is kept in sync with the selected language.

Both language and resolution should be added to the extension responsible for state management.

Notes

Yet to figure out how to handle manifests with no multiple language tracks.

Firefox not loading custom ThumbnailExtension

I have come across a weird issue where Firefox is partially using the custom ThumbnailExtension and partially not. The method getThumbnail gets called from the default extension in Firefox but not in Microsoft Edge. Using indigo-player 1.5.1

To Reproduce
I will try to create a reproduction.

Expected behavior
Both browser Edge and Firefox should behave the same.

Desktop (please complete the following information):

  • OS: Windows 10 Pro 21H1
  • Browser Firefox 94.0.2 (64-bit), Microsoft Edge 96.0.1054.41 (Official build) (64-bit)

KeyboardNavigationExtension - nagivate through the video with keyboard shortcuts.

This extension takes care of keyboard navigation.

  • "m" - toggle mute
  • "space" - toggle play pause
  • "up arrow" - increase volume by 0.1
  • "down arrow" - decrease volume by 0.1
  • "left arrow" - go back 15 seconds in time (but do not go lower than 0)
  • "right arrow" - go forwards 15 seconds in time (but do not go higher than the duration of the asset)
  • "f" - toggle fullscreen

Also keeps track of whether the player is focused or not (if document.activeElement is part of the current player instance). This way we don't always hijack the keyboard navigation. The following options can be provided by the config (and can be handled by the extension loader):

"keyboardNavigation":

  • true - keyboard navigation is always on
  • false - keyboard navigation is not even loaded
  • "focus" - only listen to the keystrokes when the player has the focus, this is the default behavior

Quick notes on accessibility

First off, great job on getting this out! Love it. A few quick notes.

  • Keyboard-only navigation didn't seem possible on the demo. You might consider a new method for hiding/showing controls (https://github.com/matvp91/indigo-player/blob/master/src/ui/components/Main.tsx#L17) ... e.g. add tabindex="0" to the outer element and then consider handling focus.
  • You probably should add proper ARIA attributes to ensure screen reader support
  • Buttons should have type="button" to avoid accidental submit behavior

Setup to leverage HLS.js API

Thanks for building amazing player.This is not issue Just a question.
Is there any way to leverage HLS.js API through indigo player? I want to do some xhrsetup for my video.
If it is possible then 2 question arises , first how can I do that and second is what happens on ios devices, because hls.js is not needed on ios devices for your player.

Using with webpack/ES6 imports

Is your feature request related to a problem? Please describe.
It seems that to use this project with a webpack build, the built and minified script lib/indigo-player.js needs to be loaded with script-loader (or just added as a <script> tag).

Describe the solution you'd like
It would be nice to be able to import indigo-player as an ES6 module to gain typings, avoiding using the global and integrate into our normal chunk lazy-loading workflow e.g

import IndigoPlayer from 'indigo-player';

IndigoPlayer.init()

Currently this generates a lot of TypeScript errors for me (TS 3.5.1):

10:01:21 0|tsc      | node_modules/indigo-player/src/types.ts(334,3): error TS7010: 'create', which lacks return-type annotation, implicitly has an 'any' return type.
10:01:21 0|tsc      | node_modules/indigo-player/src/types.ts(360,3): error TS7010: 'on', which lacks return-type annotation, implicitly has an 'any' return type.
10:01:21 0|tsc      | node_modules/indigo-player/src/types.ts(361,3): error TS7010: 'once', which lacks return-type annotation, implicitly has an 'any' return type
...

Happy to help work on this or provide more info if it's unclear.

image height should used in the bandwidth chooser instead of image width

Describe the bug

right now the bandwidth chooser in the right bottom of the player shows the image width instead of height for the variant entries in the HLS playlist. that's rather irritating, because all other players use the image height in this place. image height is also commonly used in the video tech world eg. to refer to FHD as "1080p" etc.

Unable to go fullscreen on iOS

I am unable to view full screen video on latest iOS. Clicking that tiny button (which is way too small for mobile) or double tapping the video doesn't do anything.

Subtitles don't scale based on the size of the video player.

Describe the bug
Subtitles don't scale based on the size of the video player.

To Reproduce

  1. Run the player
  2. Go fullscreen

Expected behavior
Subtitles need to be bigger and be adapted to the size of the player.

Desktop (please complete the following information):

  • OS: All
  • Browser: All

This package is currently only usable directly on browser

To really use this build, it requires you to directly use the output build from the lib/ directory. If developers who uses TypeScript plans to use this package by importing it, they cannot use it since the types for index.d.ts and index.ts do not match (e.g. the init function is missing from the definitions).

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.