|
| 1 | +--- |
| 2 | +title: Azure Media Player API Methods |
| 3 | +description: The Azure Media Player API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, Silverlight, or any other supported playback technologies. |
| 4 | +author: IngridAtMicrosoft |
| 5 | +ms.author: inhenkel |
| 6 | +ms.service: media-services |
| 7 | +ms.topic: reference |
| 8 | +ms.date: 04/20/2020 |
| 9 | +--- |
| 10 | + |
| 11 | + |
| 12 | +# API # |
| 13 | + |
| 14 | +The Azure Media Player API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, Silverlight, or any other supported playback technologies. |
| 15 | + |
| 16 | +## Referencing the player ## |
| 17 | + |
| 18 | +To use the API functions, you need access to the player object. Luckily it is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of `vid1`. If you have multiple videos on one page, make sure every video tag has a unique ID. |
| 19 | + |
| 20 | +`var myPlayer = amp('vid1');` |
| 21 | + |
| 22 | +> [!NOTE] |
| 23 | +> If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player. |
| 24 | +
|
| 25 | +## Wait until the player is ready ## |
| 26 | + |
| 27 | +The time it takes Azure Media Player to set up the video and API will vary depending on the playback technology being used. HTML5 will often be much faster to load than Flash or Silverlight. For that reason, the player's 'ready' function should be used to trigger any code that requires the player's API. |
| 28 | + |
| 29 | +```javacript |
| 30 | + amp("vid_1").ready(function(){ |
| 31 | + var myPlayer = this; |
| 32 | +
|
| 33 | + // EXAMPLE: Start playing the video. |
| 34 | + myPlayer.play(); |
| 35 | + }); |
| 36 | +``` |
| 37 | + |
| 38 | +OR |
| 39 | + |
| 40 | +```javacript |
| 41 | + var myPlayer = amp("vid_1", myOptions, function(){ |
| 42 | + //this is the ready function and will only execute after the player is loaded |
| 43 | + }); |
| 44 | +``` |
| 45 | + |
| 46 | +## API methods ## |
| 47 | + |
| 48 | +Now that you have access to a ready player, you can control the video, get values, or respond to video events. The Azure Media Player API function names attempt to follow the [HTML5 media API](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html). The main difference is that getter/setter functions are used for video properties. |
| 49 | + |
| 50 | +```javacript |
| 51 | + // setting a property on a bare HTML5 video element |
| 52 | + myVideoElement.currentTime = 120; |
| 53 | +
|
| 54 | + // setting a property with Azure Media Player |
| 55 | + myPlayer.currentTime(120); |
| 56 | +``` |
| 57 | + |
| 58 | +## Registering for events ## |
| 59 | +Events should be registered directly after initializing the player for the first time to ensure all events are appropriately reported to the application, and should be done outside of the ready event. |
| 60 | + |
| 61 | +```javacript |
| 62 | + var myPlayer = amp("vid_1", myOptions, function(){ |
| 63 | + //this is the ready function and will only execute after the player is loaded |
| 64 | + }); |
| 65 | + myPlayer.addEventListener(amp.eventName.error, _ampEventHandler); |
| 66 | + //add other event listeners |
| 67 | +``` |
| 68 | + |
| 69 | +## Next steps ## |
| 70 | + |
| 71 | +<!---Some context for the following links goes here---> |
| 72 | +- [Azure Media Player Quickstart](azure-media-player-quickstart.md) |
0 commit comments