metahype-video-player-api v1.0.3

video-player-api

Screen Video for use it with Video Player UI

The project uses:

• parcel 2.3.2
• Typescript 4.5.5
• Amazon IVS Player 1.7.0

Instalation

npm install @visyon360/video-player-api --save

Update package

1. npm run start Start compilation (development)
2. npm run build Build project (production)

Api Comunication

Use Window.postMessage() method to communication between your UI and this video screen. you can check the Demo ( http://localhost:1234/index.html )

You need to load /ivs.html file into an iframe and create this method to recibe messages from video player:

<iframe width="100%" height="100%" src="/ivs.html"></iframe>

<script>
    window.addEventListener('message',(e)=>{
        // ...your code 
    });
</script>

The player will send this event data when is loaded 'vplayer::iframe-loaded'.

Now you can send the configuration message to the player, like this:

<script>
    const params = JSON.stringify({'target': 'vplayer', 'action': 'config' , 'poster':'https://amp.dev/static/samples/img/ima-poster.jpg' ,'url': urlVideo , 'isLive': false ,'autoplay': true , 'isMuted': true , 'audioTrackId': 1 });
    iframe.contentWindow.postMessage('json::'+params, '*');
</script>

Methods

Play

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'play'})
iframe.contentWindow.postMessage( 'json::'+params, '*');

Pause

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'pause'})
iframe.contentWindow.postMessage( 'json::'+params, '*');

Muted

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'muted'})
iframe.contentWindow.postMessage( 'json::'+params, '*');    

Unmuted

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'unmuted'})
iframe.contentWindow.postMessage( 'json::'+params, '*');    

SeekTo

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'seekto' , 'time': 100 })
iframe.contentWindow.postMessage( 'json::'+params, '*'); 

Remove

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'kill'})
iframe.contentWindow.postMessage( 'json::'+params, '*');  

changeLocale (only hls)

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'changeLocale', 'audioTrackId': 1  })
iframe.contentWindow.postMessage( 'json::'+params, '*');  

changeLocaleSource (only ivs)

const params = JSON.stringify({ 'target': 'vplayer', 'action': 'changeLocaleSource', 'url': 'string'  })
iframe.contentWindow.postMessage( 'json::'+params, '*');  

Video format support

This version support Live Video and Video on demand in HLS protocol