Giter Club home page Giter Club logo

playkit-js's Introduction

PlayKit JS - State of the Art HTML5 Player

Build Status code style: prettier

PlayKit JS is an opinionated JavaScript library to enable seamless video playback across browsers and platforms with support for advanced streaming formats.

It leverages on HTML5 video, MediaSource Extensions and Encrypted Media Extensions for playback of clear and DRM protected video.

PlayKit JS goal is to make it as easy as possible to stream adaptive bitrate video and audio using modern browser technologies (although we do support progressive :-))

PlayKit JS is the core library to facilitate the handling of different playback formats and features with one interface. The library exposes a mechanism to extend its capabilities via plugins and adapters.

PlayKit JS is written in ECMAScript6, statically analysed using Flow and transpiled in ECMAScript5 using Babel.

Table of Contents

Getting Started

Installing

First, clone and run yarn to install dependencies:

git clone https://github.com/kaltura/playkit-js.git
cd playkit-js
yarn install

Building

Then, build the player

yarn run build

Embed the Player In Your Test Page

Finally, add the bundle as a script tag in your page, and initialize the player

<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
  <script type="text/javascript">
    var playerContainer = document.querySelector("#player-placeholder");
    var config = {...};
    var player = playkit.core.loadPlayer(config);
    playerContainer.appendChild(player.getView());
    player.play();
  </script>
</div>

Documentation

Running the Tests

Tests can be run locally via Karma, which will run on Chrome, Firefox and Safari.

yarn run test

You can test individual browsers:

yarn run test:chrome
yarn run test:firefox
yarn run test:safari

And Coding Style Tests

We use ESLint recommended set with some additions for enforcing Flow types and other rules.

See ESLint config for full configuration.

We also use .editorconfig to maintain consistent coding styles and settings, please make sure you comply with the styling.

Compatibility

TBD

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the AGPL-3.0 License - see the LICENSE.md file for details

playkit-js's People

Contributors

eransakal avatar giladna avatar inbalvasserman avatar jonathantgold avatar lianbenjamin avatar moshemaorkaltura avatar odedhutzler avatar orenme avatar roybregman avatar semarche-kaltura avatar sivana-kaltura avatar tanyalibatter avatar tzipi-kaltura avatar yairans avatar yuvalke avatar zoharbabin 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

playkit-js's Issues

"NO_ENGINE_FOUND_TO_PLAY_THE_SOURCE:7007" error

I am getting "NO_ENGINE_FOUND_TO_PLAY_THE_SOURCE:7007" error .

Below is the code which i m writing.Please have a look.

<script src="./playkit-js//dist/playkit.js"></script>
<script> var manifestUri = 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'; // Create a Player instance. var playerContainer = document.querySelector("#player-placeholder");
  var config = {
    sources: {
      dash: [{
        mimetype: "application/x-mpegurl",
        url: manifestUri
      }]
    },
  }
  var player = playkit.core.loadPlayer(config);
  playerContainer.appendChild(player.getView());
 player.play();
</script>

Creating a simple plugin

I've been struggling to write a simple plugin that I can incorporate via the UI variables in the KMC universal studio. I'm wondering if someone could point me in the right direction or direct me to a working example. I basically just want to trigger some javascript when the video that is playing ends.

Build not running

//@flow is not added in src/track/vtt-region.js file
also prettier had to be disabled for the build to run

Assistance for hyperlinking to a specific timestamp without reloading the page

Context

  • 3 kaltura playkit videos on a visualforce intranet page.
  • 1 question and answer table with various time stamps on those 3 videos (currently text)

Would like to have the time stamps be links and jump straight to the correct player and update that player to the right timestamp.

Expected behavior

There should be a way to create a hyperlink on a page that jumps to a video player and sets the video in it to a certain timestamp.

Think a similar question has been asked >5 years ago - https://forum.kaltura.org/t/is-there-a-way-to-hyperlink-to-a-specific-time-in-a-video/6518 - but the answer was about a link at the end of the video rather than jumping the video to a timestamp.

Actual behavior

Checked the docs which had a startTime configuration, which would likely allow for some custom javascript to change the config before loading and at least on initial load - but I couldn't find a way in the api - load takes a startTime - would that still replace the source first triggering a reload?

Apologies if this isn't the right place to ask for help with this. Got here by inspecting the HTML and seeing it was a playkit-js player.

InBrowserFullscreen:false for safari iOS 13 does not show full Native Player UI

Prerequisites
  • Have you checked for duplicate issues: __
  • Which Player version are you using: latest on SaaS cloud platform
  • Can you reproduce the issue with our latest release version: Kaltura Player lib
  • kaltura-ovp-player v0.55.0
  • playkit-cast-sender v0.4.2
  • playkit-flash v1.4.4
  • playkit-ima v0.20.4
  • playkit-offline-manager v1.2.0
  • Can you reproduce the issue with the latest code from master: yes
  • What browser and OS names and versions are you using: ios, iPad, safari, latest
  • If applicable, add test code or test page to reproduce:

playback: {
						preload: 'auto',
						autoplay: true,
						loop: false,
						allowMutedAutoPlay: true,
						playsinline: false,
						inBrowserFullscreen: false,

Expected behavior

With inBrowserFullscreen set to false, Touching the fullscreen button should bring the native player UI.

Actual behavior

instead, the fullscreen works but the web UI remains on the bottom part with the player. This web ui does not include the airplay button. It works correctly for Chrome and Firefox on iOS, only Safari does not.

Console output
Paste the contents of the browser console here.
For media errors reported on Chrome browser, please also paste the output of chrome://media-internals

playAdNow requesting wrong URL

Prerequisites
  • Have you checked for duplicate issues: yes
  • Which Player version are you using: playkit-js with IMA plugin
  • Can you reproduce the issue with our latest release version: yes
  • Can you reproduce the issue with the latest code from master: yes
  • What browser and OS names and versions are you using: Version 1.31.91 Chromium: 95.0.4638.69 (Official Build) (x86_64), macOS Version 11.6
  • If applicable, add test code or test page to reproduce: follow this link, click on "connect", then "broadcast" button. Watch the console for the output.
console.log("-> " + vastTagUrl);
kalturaPlayer.ads.playAdNow([{ url: [vastTagUrl] }]);
Expected behavior

Player should display the ad that's defined in the VAST tag, addressed by the URL stored in vastTagUrl.

Actual behavior

The requests are made for the URL https://imasdk.googleapis.com before the actual VAST tag's URL.

For example, if my URL is https://www.foo.com/bar, the playAdNow method ends up requesting for https://imasdk.googleapis.com/www.foo.com/bar

When I test it locally, this problem does not happen, and the ad gets displayed as it should be. Only after I deploy de website that the IMA requests prepends this URL before the ad's URL.

It's worth mentioning that, even if the ad is correctly displayed locally, when I click it, it's expected to redirect me to the URL defined in the VAST tag (inside NonLinearClickThrough tags), but the URL gets prepended by the same https://imasdk.googleapis.com. I believe the cause is the same as the problem I mentioned before, since the behavior is equal.

Console output
-> https:/api.livecommerce.tupi.io/files/1638542130779.xml
bridge3.490.0_en.html:370 GET https://imasdk.googleapis.com/api.livecommerce.tupi.io/files/1638542130779.xml 404
Ly @ bridge3.490.0_en.html:370
(anonymous) @ bridge3.490.0_en.html:386
Cz @ bridge3.490.0_en.html:384
Bz @ bridge3.490.0_en.html:383
Az.get @ bridge3.490.0_en.html:382
$U @ bridge3.490.0_en.html:926
(anonymous) @ bridge3.490.0_en.html:926
nM.I @ bridge3.490.0_en.html:643
Kh @ bridge3.490.0_en.html:113
G @ bridge3.490.0_en.html:112
kO @ bridge3.490.0_en.html:708
gO.I @ bridge3.490.0_en.html:707
Gh @ bridge3.490.0_en.html:111
b @ bridge3.490.0_en.html:109

How to invoke player action for the kaltura player v7?

Prerequisites

Actually I wanted to upgrading the current Kaltura player V2 to V7.
I remembered in V2 there is a function called sendNotification that we used to invoke player action. For example:

player.sendNotification('doPlay')
player.sendNotification('doSeek', 10)

So, how can I invoke player action in V7?
Also I have another question related to the player events.

The document mentioned that I should use the dispatchEvent with FakeEvent in order to dispatch a particular event.

kalturaPlayer.addEventListener(kalturaPlayer.Event.Core.PLAYING, (e) => {
      console.log('playing ', e.target)
})

kalturaPlayer.dispatchEvent(new FakeEvent(kalturaPlayer.Event.Core.PLAYING))

When I dispatch a particular it gives error that FakeEvent is not defined

How can I solve these problems? I really appreciate your response. Thank you

TypeError: this._logger.enabledFor is not a function | Category:7 | Code:7010

Prerequisites
  • Have you checked for duplicate issues: __
  • Which Player version are you using: 1.0.3
  • Can you reproduce the issue with our latest release version: __
  • Can you reproduce the issue with the latest code from master: __
  • What browser and OS names and versions are you using: Windows Chrome latest
  • If applicable, add test code or test page to reproduce:

Expected behavior

load "playkit-js-hotspots" plugin

Actual behavior

error in console, hotspots no longer display in entry

Console output
dcbf1ef6da883ba8205d.js:2 [Error] Category:7 | Code:7010 | TypeError: this._logger.enabledFor is not a function
    at e._log (contrib-logger.ts:62)
    at e.error (contrib-logger.ts:113)
    at Function.t.createPlugin (core-plugin-proxy.ts:61)
    at e.t.load (plugin-manager.js:100)
    at kaltura-player.js:667
    at Array.forEach (<anonymous>)
    at Proxy.s._configureOrLoadPlugins (kaltura-player.js:657)
    at Proxy.s.configure (kaltura-player.js:194)
    at Proxy.s.setMedia (kaltura-player.js:105)
    at kaltura-player.js:79

code

private _log(
    loggerMethod: LoggerMethods,
    level: LogLevel,
    message: string,
    messageContext: MessageOptions
  ): void {
    if (!this._logger.enabledFor(level)) {
      return;
    }

For media errors reported on Chrome browser, please also paste the output of chrome://media-internals

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.