https://github.com/streamaserver/streama-video-player

Extracted streama video player
https://github.com/streamaserver/streama-video-player

Last synced: 6 months ago
JSON representation

Extracted streama video player

• Host: GitHub
• URL: https://github.com/streamaserver/streama-video-player
• Owner: streamaserver
• License: mit
• Created: 2017-03-04T11:54:18.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-04-06T14:46:41.000Z (about 3 years ago)
• Last Synced: 2025-08-12T08:16:39.043Z (10 months ago)
• Language: CSS
• Size: 1.21 MB
• Stars: 23
• Watchers: 6
• Forks: 8
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# The Streama Video-Player

A standalone version of the new video player used in the Streama project and the Streama mobile app.

# Table of contents

- [The player UI](#the-player-ui)

- [Installation (using bower)](#installation-using-bower)

- [Usage](#usage)

- [Options](#options)

- [FAQs](#faqs)

# The player UI 

### The Player

![UIExample1](example/Screen%20Shot%202017-06-23%20at%2023.03.49.png)

### Subtitle & Subtitle Size UI 

![UIExample2](example/Screen%20Shot%202017-06-23%20at%2023.03.55.png)

### For TV-Shows: Episode UI 

![UIExample3](example/Screen%20Shot%202017-06-23%20at%2023.04.02.png)

# Installation (using bower)

`bower install streama-video-player --save`  

This command installs the streama-video-player as well as all dependencies

# Usage

### Load dependencies

```html

    

    

    

    

    

    

    

    

    

    

    

    

    

    

```

### Load Streama-video-player

```html

    

    

    

    

    

    

```

### Directive usage

```html

	angular.module('yourModule', ['streama.videoPlayer']).run(function($rootScope){

		$rootScope.videoOptions = {

			videoSrc: 'http://techslides.com/demos/sample-videos/small.mp4'

		}

	});



    



``` 


# Options

```javascript

// default options

$scope.videoOptions = {

	customStartingTime: 0,

	rememberVolumeSetting: true,

	videoMetaTitle: '',

	videoMetaSubtitle: '',

	videoMetaDescription: '',

	videoSrc: '',

	videoType: '',

	videoTrack: '',

	videoOverlayEnabled: true,

	showEpisodeBrowser: false,

	showNextButton: false,

	showSocketSession: true,

	episodeList: [],

	selectedEpisodes: [],

	currentEpisode: {},

	isExternalLink: false,

	onSocketSessionCreate: angular.noop,

	onTimeChange: angular.noop,

	onError: angular.noop,

	onPlay: angular.noop,

	onPause: angular.noop,

	onClose: angular.noop,

	onNext: angular.noop,

	onVideoClick: angular.noop

};

// Example options for TV-Show Episode 

$scope.videoOptions = {

	videoSrc: 'https://streama.club/file/serve/1497.mkv',

	isExternalLink: true,

	episodeList: {

		1: [   // wrapper for season, number indicates season number

			{

				id: 1,  //unique ID for this piece of data

				name: 'Pilot', 

				season_number: 1, 

				episode_number:1, 

				episodeString: 's01e01', 

				still_path: 'https://image.tmdb.org/t/p/original/ydlY3iPfeOAvu8gVqrxPoMvzNCn.jpg', 

				overview: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.', 

				videoDuration: 1320  //in seconds

			}

		// and more episodes...

    ]

  },

	showEpisodeBrowser: true,

	currentEpisode : {

		episode: 1,

		season: 1,

		id: 1

	},

  subtitles: [

		{

			"id": 1561, 

			"src": "/example/sub-de.vtt", 

			"subtitleLabel": "Deutsch", 

			"subtitleSrcLang": "de", 

			"contentType": "application/x-subrip"

		}

		// and more subtitles

  ],

  currentSubtitle: 1562  // unique subtitle ID matching one of the ones in the subtitles list

}

```

# FAQs

- Make sure your http to the video has Access-Control-Allow-Origin enabled

- Make sure the videos you use are HTML5 compatible