├── .DS_Store ├── .gitignore ├── LICENSE ├── README.md ├── basic-implementation ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ └── VideoPlayer.js │ └── index.js ├── nextjs-shaka-player ├── .DS_Store ├── README.md ├── containers │ └── Tutorial │ │ └── index.jsx ├── package-lock.json ├── package.json ├── pages │ ├── _app.jsx │ └── index.jsx └── public │ └── styles │ └── index.css ├── with-default-ui ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── components │ └── VideoPlayer.js │ ├── index.css │ └── index.js └── with-ui-configuration ├── README.md ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── components └── VideoPlayer.js ├── index.css └── index.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amit08255/shaka-player-react-with-ui-config/950f41f51b2af8f2859a40c0c27684108e735ee6/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | .git/ 3 | .idea/ 4 | .next/ 5 | yarn.lock 6 | node_modules/ 7 | /nbproject/private/ 8 | /build/ 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Amit Kumar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shaka-player-react-with-ui-config 2 | Shaka player implementation in ReactJS. This repository contains basic shaka player implementation and also implementation of shaka player in ReactJS with custom UI configuration. 3 | -------------------------------------------------------------------------------- /basic-implementation/README.md: -------------------------------------------------------------------------------- 1 | ## Basic implementation of Shaka Player in ReactJS 2 | 3 | This is simple ReactJS app with basic implementation of shaka player. In this app, we are just loading a simple video in shaka player in our app. 4 | 5 | ## Installing app 6 | 7 | Before using this app, you need to install dependencies. Use below command to install dependencies - 8 | 9 | ```sh 10 | npm install 11 | ``` 12 | 13 | ## Starting app 14 | 15 | To use this app, use below command - 16 | 17 | ```sh 18 | npm start 19 | ``` 20 | 21 | It will start our app which can be accessed in browser at - http://localhost:3000 22 | 23 | 24 | # Internal details 25 | 26 | Read further details to know how you can implement shaka player in your ReactJS app. 27 | 28 | **Note** - Remember, if your ReactJS app uses server-side rendering, you must always load your shaka player component on client side. 29 | 30 | ## Adding shaka player in your React app 31 | 32 | For using shaka player in your app, you need to install shaka-player using command - 33 | 34 | ```sh 35 | npm install --save shaka-player 36 | ``` 37 | 38 | ## Simple React component with shaka player 39 | 40 | ```js 41 | 42 | //importing dependencies 43 | 44 | import React from 'react'; 45 | import shaka from 'shaka-player'; 46 | 47 | 48 | //Creating class component 49 | 50 | class VideoPlayer extends React.PureComponent{ 51 | 52 | constructor(props){ 53 | 54 | super(props); 55 | 56 | //Creating reference which will allow access to video player on DOM 57 | this.videoComponent = React.createRef(); 58 | 59 | //Adding reference to event handler functions 60 | this.onErrorEvent = this.onErrorEvent.bind(this); 61 | this.onError = this.onError.bind(this); 62 | } 63 | 64 | onErrorEvent(event) { 65 | // Extract the shaka.util.Error object from the event. 66 | this.onError(event.detail); 67 | } 68 | 69 | onError(error) { 70 | // Log the error. 71 | console.error('Error code', error.code, 'object', error); 72 | } 73 | 74 | //Initialize your shaka player here 75 | componentDidMount(){ 76 | 77 | //MPEG-DASH video URL 78 | var manifestUri = 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'; 79 | 80 | //Reference to our video component on DOM 81 | const video = this.videoComponent.current; 82 | 83 | //Initializing our shaka player 84 | var player = new shaka.Player(video); 85 | 86 | // Listen for error events. 87 | player.addEventListener('error', this.onErrorEvent); 88 | 89 | // Try to load a manifest. 90 | // This is an asynchronous process. 91 | player.load(manifestUri).then(function() { 92 | // This runs if the asynchronous load is successful. 93 | console.log('The video has now been loaded!'); 94 | }).catch(this.onError); // onError is executed if the asynchronous load fails. 95 | 96 | } 97 | 98 | render(){ 99 | 100 | 101 | /*Returning video component. Shaka player will be added to this component 102 | once its mounted on DOM 103 | */ 104 | return( 105 |