How to control the embedded Streams player

%3CLINGO-SUB%20id%3D%22lingo-sub-2040488%22%20slang%3D%22en-US%22%3EHow%20to%20control%20the%20embedded%20Streams%20player%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2040488%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20looking%20to%20use%20the%20Streams%20platform%20in%20a%20few%20custom%20events%2C%20with%20the%20player%20embedded%20into%20our%20enterprise%20portal.%26nbsp%3B%20I%20need%20to%20be%20able%20to%20do%20just%20basic%20things%20like%20load%20and%20unload%20the%20player%2C%20start%20playing%20when%20the%20event%20begins%2C%20and%20capture%20data%20about%20the%20player%20status%20(playing%2C%20paused%2C%20stopped%2C%20error).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAll%20I've%20been%20able%20to%20find%20is%20a%20simple%20embed%20with%20an%20iframe.%26nbsp%3B%20Are%20there%20hooks%20to%20monitor%20the%20player%20so%20that%20we%20can%20get%20real-time%20data%20with%20Ajax%2C%20for%20example%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2041931%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20control%20the%20embedded%20Streams%20player%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2041931%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F921266%22%20target%3D%22_blank%22%3E%40phil444%3C%2FA%3E%26nbsp%3BFrom%20what%20I%20understand%20there%20aren't%20any%20API%20hooks%20for%20this.%26nbsp%3B%20We%20only%20have%20some%20details%20on%20the%20embed%20here%3A%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fstream%2Fportal-embed-video%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fstream%2Fportal-embed-video%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fstream%2Fembed-video-oembed%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fstream%2Fembed-video-oembed%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20future%20planning%20what%20things%20are%20you%20interested%20in%3F%26nbsp%3B%20When%20you%20see%20it%20is%20stopped%20or%20paused%20to%20do%20you%20want%20to%20put%20an%20overlay%3F%26nbsp%3B%20Are%20you%20trying%20to%20see%20if%20stopped%20at%2055%25%20of%20the%20way%20through%3F%26nbsp%3B%20If%20you%20had%20some%20hooks%20what%20you%20would%20want%20to%20do%20with%20it%3F%26nbsp%3B%20What%20are%20you%20building%20on%20top%20of%20the%20Stream%20videos%20if%20I%20may%20ask%3F%26nbsp%3B%20Thank%20you%20for%20the%20feedback.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2044575%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20control%20the%20embedded%20Streams%20player%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2044575%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20have%20our%20own%20system%20that%20we%20developed%2022%20years%20ago.%26nbsp%3B%20I%20want%20to%20enable%20the%20community%20to%20use%20new%20tools%20as%20they%20become%20available%2C%20and%20to%20integrate%20with%20other%20technologies.%26nbsp%3B%20I%20could%20see%20some%20scientists%20wanting%20to%20do%20their%20own%20one-off%20videos%20using%20Streams%2C%20but%20also%20taking%20advantage%20of%20our%20massive%20user%20base%2C%20and%20intelligent%20search%20algorithms%20and%20countless%20other%20reasons...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20already%20have%20tested%20streaming%20from%20our%20system%20TO%20Streams.%26nbsp%3B%20That%20was%20easy.%26nbsp%3B%20But%20now%20I%20want%20to%20be%20able%20to%20take%20someone's%20Streams%20event%20and%20be%20able%20to%20host%20it%20on%20OUR%20platform%2C%20in%20real%20time.%26nbsp%3B%20I%20can%20do%20with%20other%20platforms%2C%20for%20example%20YouTube%2C%20as%20they%20have%20a%20hooks%20in%20their%20iframe%20player%20that%20let%20me%20control%20it%20and%20get%20feedback%20about%20it's%20status.%26nbsp%3B%20That's%20basically%20all%20I%20need%20and%20I%20can%20take%20it%20from%20there.%3C%2FP%3E%3CP%3EIf%20I%20just%20use%20the%20simple%20embed%20code%20Streams%20gives%20me%2C%20it%20plays%2C%20but%20I%20have%20absolutely%20no%20control%20over%20it%2C%20and%20no%20way%20to%20update%20my%20database%20with%20real-time%20statistics%2C%20and%20so%20on.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere's%20a%20little%20code%20snippet%20from%20my%20controller%20for%20a%20YouTube%20embedded%20player.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%26nbsp%3Bvar%26nbsp%3Bplayer%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bvar%26nbsp%3Bplayerstatus%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bplayerstatus%26nbsp%3B%3D%26nbsp%3B'stopped'%3B%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bfunction%26nbsp%3BonYouTubeIframeAPIReady()%26nbsp%3B%7B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bfunction%26nbsp%3Blaunch()%26nbsp%3B%7B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bplayer%26nbsp%3B%3D%26nbsp%3Bnew%26nbsp%3BYT.Player('player'%2C%26nbsp%3B%7B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3BvideoId%3A%26nbsp%3B'%26lt%3B%25%3D%26nbsp%3Brs(%22YouTube%22)%26nbsp%3B%25%26gt%3B'%2C%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3BplayerVars%3A%26nbsp%3B%7B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bautoplay%3A%26nbsp%3B1%2C%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%2F%2F%26nbsp%3BAuto-play%26nbsp%3Bthe%26nbsp%3Bvideo%26nbsp%3Bon%26nbsp%3Bload%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bcontrols%3A%26nbsp%3B1%2C%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%2F%2F%26nbsp%3BShow%26nbsp%3Bpause%2Fplay%26nbsp%3Bbuttons%26nbsp%3Bin%26nbsp%3Bplayer%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bmodestbranding%3A%26nbsp%3B1%2C%26nbsp%3B%26nbsp%3B%2F%2F%26nbsp%3BHide%26nbsp%3Bthe%26nbsp%3BYoutube%26nbsp%3BLogo%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Biv_load_policy%3A%26nbsp%3B3%2C%26nbsp%3B%26nbsp%3B%2F%2F%26nbsp%3BHide%26nbsp%3Bthe%26nbsp%3BVideo%26nbsp%3BAnnotations%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bautohide%3A%26nbsp%3B1%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%2F%2F%26nbsp%3BHide%26nbsp%3Bvideo%26nbsp%3Bcontrols%26nbsp%3Bwhen%26nbsp%3Bplaying%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%2C%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3Bevents%3A%26nbsp%3B%7B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B'onReady'%3A%26nbsp%3BonPlayerReady%2C%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B'onStateChange'%3A%26nbsp%3BonPlayerStateChange%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%7D)%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

I'm looking to use the Streams platform in a few custom events, with the player embedded into our enterprise portal.  I need to be able to do just basic things like load and unload the player, start playing when the event begins, and capture data about the player status (playing, paused, stopped, error).

 

All I've been able to find is a simple embed with an iframe.  Are there hooks to monitor the player so that we can get real-time data with Ajax, for example?

5 Replies

@phil444 From what I understand there aren't any API hooks for this.  We only have some details on the embed here: 

https://docs.microsoft.com/en-us/stream/portal-embed-video

https://docs.microsoft.com/en-us/stream/embed-video-oembed

 

For future planning what things are you interested in?  When you see it is stopped or paused to do you want to put an overlay?  Are you trying to see if stopped at 55% of the way through?  If you had some hooks what you would want to do with it?  What are you building on top of the Stream videos if I may ask?  Thank you for the feedback.

We have our own system that we developed 22 years ago.  I want to enable the community to use new tools as they become available, and to integrate with other technologies.  I could see some scientists wanting to do their own one-off videos using Streams, but also taking advantage of our massive user base, and intelligent search algorithms and countless other reasons...

 

We already have tested streaming from our system TO Streams.  That was easy.  But now I want to be able to take someone's Streams event and be able to host it on OUR platform, in real time.  I can do with other platforms, for example YouTube, as they have a hooks in their iframe player that let me control it and get feedback about it's status.  That's basically all I need and I can take it from there.

If I just use the simple embed code Streams gives me, it plays, but I have absolutely no control over it, and no way to update my database with real-time statistics, and so on.

 

Here's a little code snippet from my controller for a YouTube embedded player.

 

 var player;
      var playerstatus;
      playerstatus = 'stopped';

      function onYouTubeIframeAPIReady() {
        }

      function launch() {
        player = new YT.Player('player', {
            videoId: '<%= rs("YouTube") %>',
            playerVars: {
                autoplay: 1,        // Auto-play the video on load
                controls: 1,        // Show pause/play buttons in player
                modestbranding: 1,  // Hide the Youtube Logo
                iv_load_policy: 3,  // Hide the Video Annotations
                autohide: 1         // Hide video controls when playing
            },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });

@Daniel Escapa When you see it is stopped or paused to do you want to put an overlay?

 

I need to know if it is stopped or playing, so that I can update my live usage statistics database in real-time.  Going the other way, when I have a scheduled event, for example, my player would show a clock and message before the event starts, then our TV operations center can send a command to start the event when the speaker is ready.  So in the page, the Streams player needs to "start" when I fire the event at it.  Also, maybe the event will end early, or late.  Again, I need to be able to command the remote players to stop and unload if our producer ends the event.

 

This is simple stuff on your end to implement.

Maybe something like a function that receives "start", "stop".

And a listener that responds with "idle", "playing", "buffering", "error".

Has there been any reply to this? We need to do something similar.

@PeterNeg...nothing so far