AutosOnShow Vehicle API

Add a player to your website quickly and easily


  <head>

     <script defer="defer" src="https://media-player.aos.tv/latest/app.js"  ></script>

  
  </head>

  <body>

     <div id="aos-player" data-setup='{"token":"17b3353bb1892c02e3646296d6a3486e4f792ea5" , "vehicle": "GX66YCR1" }'></div>

  


  <!-- 

  To add Custom color or icon image for tag:



1) To change color:


"customOptions": {"gallery": {"tag": {"featureColor": "#00ff00", "damageColor": "red"}}}



2) To change icon image:


"customOptions": {"gallery": {"tag": {"featureIcon": "http://eu.cdn.autosonshow.tv/images/target.png", "damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"}}}



Example: 



<div id="aos-player" data-setup='{"token": "17b3353bb1892c02e3646296d6a3486e4f792ea5", "vehicle": "GX66YCR1", "displayMode": "fullscreen", "customOptions": {"gallery": {"tag": {"featureColor": "orange", "damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"}}}}'></div>



3) To change the sequence of the button:


"data-sequence": '["spinner","video-player","personal-video-request","panorama","full-screen","gallery"]'



Example: 


<div id="aos-player" data-setup='{"token": "17b3353bb1892c02e3646296d6a3486e4f792ea5", "vehicle": "GX66YCR1", "displayMode": "fullscreen", "customOptions": {"gallery": {"tag": {"featureColor": "orange", "damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"}}}}' "data-sequence": '["spinner","video-player","personal-video-request","panorama","full-screen","gallery"]'></div>



4) To change button color as per the theme color:


"customOptions": {"gallery": {"tag": {"featureIcon": "http://eu.cdn.autosonshow.tv/images/target.png", "damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"},"actionBtn": {"btnColor": "orange", "btnIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"}}}



Example:


<div id="aos-player" data-setup='{"token": "17b3353bb1892c02e3646296d6a3486e4f792ea5", "vehicle": "GX66YCR1", "displayMode": "fullscreen", "customOptions": {"gallery": {"tag": {"featureColor": "orange", "damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"},"actionBtn": {"btnColor": "orange", "btnIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"}}}}'></div>


-->


  </body>

Integration

            curl --location --request POST 'https://br-api.aos.tv/token/' \ 

              --header 'Content-Type: application/x-www-form-urlencoded' \ 

              --data-urlencode 'grant_type=client_credentials' \ 

              --data-urlencode 'client_id=CLIENT_ID' \ 

              --data-urlencode 'client_secret=CLIENT_SECRET'
            
              <body>

    <div id="aos-player" data-setup='{"token":AUTH_TOKEN , "vehicle": VEHICLE_ID }'></div>

</body>
            
            <head>

              
              <script defer="defer" src="https://media-player.aos.tv/latest/app.js"  ></script>


              Or to use the latest version as and when it is released


              <script defer="defer" src="https://media-player.aos.tv/latest/app.js"></script>

              
              
                <script defer="defer" src="https://media-player.aos.tv/latest/app.js"></script>

              
          </head>

Fast & Light

Serve vehicle assets on your website instantly! No more waiting for loading times.

Component Based Architecture

With support for imagery, video, tagging and 360 imagery (amongst others) we've got you coverered

Secure

Protects your assets using secure authentication

Configuration

Let AutosOnShow deliver an out-the-box presentation for your vehicles, or if you want more control jump into the Javascript SDK and build your own player

Responsive

For better availability, the player is fully responsive across devices

Simplicity

You can have a player displayed on your webpage in 2 lines of HTML

Read our documentation for advanced customization

Documentation

Read our SDK Quickstart Guide for advanced customization

SDK Quickstart

Changelogs

v1.3.1

Bugfix
- Resolved issue related to tag position in sdk.