Master: 
Make sure you have NPM installed.
- Clone the repository with
git clone https://github.com/openHPI/video-player. - Change the directory with
cd video-player. - Install dependencies by running
npm install. - Execute
npm run serveand head tohttp://localhost:8080/components/video-playerin your browser for a demo.
The video player consists of multiple subcomponents, which can be bundled for production by running
$ npm run bundle
This creates two bundled versions of the video-player component, which can be found in the build directory. es6 contains the regular component written in ECMAScript 6, while the bundle located in es5 is transpiled to ECMAScript 5 to support older browser.
To maximize the performance, it is recommended to serve the ES6 bundle to modern browsers and use the ES5 version only as fallback for older ones.
The component can then be used in any HTML site in the following way:
<html>
<head>
<!-- HTML Custom Elements Adapter is only needed when using the transpiled ES5 version of the component. -->
<script src="custom-elements-es5-adapter.js"></script>
<script src="webcomponents-bundle.js"></script>
<script src="video-player.js"></script>
</head>
<body>
<video-player configuration='{
"streams": [{"hd": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}]
}'></video-player>
</body>
</html>The bundle is automatically created for each version tag and attached to the corresponding GitHub release.
See api.md
See configuration.md
See features.md
See extending.md
See tests.md
See notes.md
The framework comes with several linter configurations. All linters can by executed using npm run lint.
A new GitHub release can be created by merging in the master branch and executing npm version [major|minor|patch]. This creates a new version tag and pushes the branch.
The sources are bundled and the release is created afterwards by Travis, if the tests are passing.
See analytics.md
Properties changed by the user are always automatically saved in the browser's LocalStorage. Possible for:
playbackRatequalityvolume
When using userPreferences in the configuration, it will override the preferences saved in LocalStorage.
Currently dual video playing is not fully supported on iOS, based on hardware rendering capabilities. Till there is an API to determince if some video will play, iOS will only be able to handle single stream. This will be handled by the player automaticly.