Log In

Installation

1. Simple include in a javascript project

<head>
  ...
  <script src="https://teyuto.tv/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/video/player?w=10912', //playerEmbedUrl (it is obtained from the getVideo call)
	options  
);

Option parameters

VariableOptionsOthers
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
playerColorHEX color String'#dddddd' default
responsive'on' , 'off' String'on' default
if responsive is 'on', height and width are not used
widthpixels
The width in pixels (e.g. width="100")
560 default
heightpixels
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 nameDescriptionParameter
playThe video started to play (for the first time or after having been paused)-
pauseThe video has been paused-
loadstartloadstart Is fired when the browser has started to load a resource.-
suspendThe suspend event is fired when media data loading has been suspended.-
abortThe abort event is fired when the resource was not fully loaded, but not as the result of an error.-
errorThe error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).-
stalledThe stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.-
canplayThe 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.-
playingThe 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.-
waitingThe waiting event is fired when playback has stopped because of a temporary lack of data.-
seekingThe 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.-
seekedThe seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.-
endedThe 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.-
durationchangeThe durationchange event is fired when the duration attribute has been updated.-
ratechangeThe ratechange event is fired when the playback rate has changed.-
resizeThe resize event is fired when the player is resized-
volumechangeThe volumechange event is fired when the volume has changed.-
fullscreenchangeThe player goes to (or goes back from) full screen-
useractiveThe user is active-
userinactiveThe user is inactive-
timeupdateThe playback time has changed-

Full example

<html>
  <head>
    ...
    <script src="https://teyuto.tv/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/video/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>