Installation

1. Simple include in a javascript project

<head>
  ...
  <script src="https://teyuto.tv/app/js/playerSdk.js"></script>
</head>

2. Then, create your player using new teyutoPlayer():

let options={
  autoplay:'on'
};

let player = new teyutoPlayer(
    '#target',  //targetElement
    'https://teyuto.teyuto.tv/app/live/player?w=10912', //playerEmbedUrl (it is obtained from the getVideo call)
    options  
);

Option parameters

Variable

Options

Others

autoplay

'on' , 'off' String

'on' default

muted

'on' , 'off' String

'off' default

controls

'on' , 'off' String

'on' default

playbackRates

'on' , 'off' String

'on' default

qualitySelector

'on' , 'off' String

'on' default

playerColor

HEX color String

'#dddddd' default

responsive

'on' , 'off' String

'on' default
if responsive is 'on', height and width are not used

width

pixels
The width in pixels (e.g. width="100")

560 default

height

pixels
The width in pixels (e.g. width="100")

315 default

loop

'on' , 'off' String

'off' default

captions

'on' , 'off' String

'on' default

seekButtons

'on' , 'off' String

'on' default

chromecast

'on' , 'off' String

'on' default

airPlay

'on' , 'off' String

'on' default

Methods

  • player.play();
  • player.pause();
  • player.getCurrentTime();
  • player.setCurrentTime(10); //in seconds
  • player.mute();
  • player.unmute();
  • player.getVulume();
  • player.setVolume(1); //from 0 to 1

Events

Event name

Description

Parameter

play

The video started to play (for the first time or after having been paused)

pause

The video has been paused

loadstart

loadstart Is fired when the browser has started to load a resource.

suspend

The suspend event is fired when media data loading has been suspended.

abort

The abort event is fired when the resource was not fully loaded, but not as the result of an error.

error

The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).

stalled

The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.

canplay

The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.

playing

The playing event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.

waiting

The waiting event is fired when playback has stopped because of a temporary lack of data.

seeking

The seeking event is fired when a seek operation starts, meaning the Boolean seeking attribute has changed to true and the media is seeking a new position.

seeked

The seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.

ended

The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.

durationchange

The durationchange event is fired when the duration attribute has been updated.

ratechange

The ratechange event is fired when the playback rate has changed.

resize

The resize event is fired when the player is resized

volumechange

The volumechange event is fired when the volume has changed.

fullscreenchange

The player goes to (or goes back from) full screen

useractive

The user is active

userinactive

The user is inactive

timeupdate

The playback time has changed

Full example

<html>
  <head>
    ...
    <script src="https://teyuto.tv/app/js/playerSdk.js"></script>
  </head>

  <body>
    <div id="target"></div>
    
    <!-- buttons that call player methods to control the video playback -->
    <button onclick="javascript:player.play();">play</button>
    <button onclick="javascript:player.pause()">pause</button>
    <button onclick="javascript:player.setVolume(0)">mute</button>
    <button onclick="javascript:player.setVolume(1)">unmute</button>


    <button onclick="javascript:alert(player.getCurrentTime());">getCurrentTime</button>
    <button onclick="javascript:alert(player.getVolume());">getVolume</button>

    <button onclick="javascript:player.setCurrentTime(15);">setCurrentTime (15seconds)</button>
    <button onclick="javascript:player.setVolume(0.5);">setVolume (0.5)</button>
    ...
  </body>

  <script>
    let options={
      autoplay:'on', 
      muted:'on', 
      controls:'on', 
      responsive:'off', 
      width:560, height:300, 
      playbackRates:'on', 
      qualitySelector:'on', 
      playerColor:'#dddddd',
      loop:'off',
      captions:'on'
    };

    let player = new teyutoPlayer(
      '#target',    //targetElement
      'https://teyuto.teyuto.tv/app/live/player?w=10912', //player_url (it is obtained from the video/get call)
      options  
    );
    
    
    //Events
    player.on('play', function(e) {
        // e.detail is the player
        console.log('play event received', e.detail); 
    });
    player.on('pause', function(e) {
        // e.detail is the player
        console.log('pause event received', e.detail);
    });
  </script>
</html>