MediaCP Manual
    1. Getting Started
    2. Sales Questions
    3. Frequently Asked Questions
    4. Transcoder System Benchmarks
    5. Start your own streaming platform
    1. Change account currency
    2. Product Licensing
    1. Introduction
    2. Installation & Upgrade
      1. System Requirements
      2. Versions & Releases
      3. Installation
      4. Upgrading
      5. SSL Certificates
      6. Streaming Servers
        1. Nginx-Rtmp Video Server
        2. Wowza Streaming Engine
        3. Flussonic Media Server
        4. Video Feature Comparison
        5. Icecast 2 / Icecast KH
    3. Billing Integration
      1. WiseCP Integration Guide
      2. WHMCS Integration Guide
      3. Clientexec Integration Guide
      4. Blesta Integration Guide
    4. Migrate from other software
      1. Migrate From Centovacast
      2. Migrate From AzuraCast
    5. Backup & Restoration
      1. Backup MediaCP
      2. Restore MediaCP
      3. Transfer to another server
    6. Administration
      1. MediaCP System Commands
      2. Admin Tools
      3. Custom Web Service Configurations
      4. Change MediaCP domain name
      5. Port 80 / 443 Proxy
      6. Move media to another hard disk
      7. Custom Language Translations
      8. Custom Facebook App
      9. Secure your server
      10. Setup CSF Firewall
      11. Troubleshooting Login Errors
      12. Reset Admin Password
    7. Scaling
      1. Scale with Wowza and CloudFront CDN
      2. Nginx-Rtmp with CloudFront CDN
    8. Troubleshooting
      1. MySQL Database Troubleshooting
      2. Reporting Troubleshooting
      3. Troubleshooting Liquidsoap AutoDJ
      4. Video Relay Troubleshooting
      5. Grant access to support team
      6. Troubleshooting Wowza Streaming Engine
      7. FTP Troubleshooting
    1. Introduction
    2. Administrators Dashboard
    3. System Configuration
      1. General
      2. Services
      3. Video Players
      4. Albums
      5. Email
      6. Plugins
      7. Statistics
      8. Backups
      9. Custom HTML
      10. Misc
    4. Customer Accounts
      1. Managing existing Customers
      2. Create a new Customer
      3. Deleting a Customer
      4. Send email to Customer
      5. Login as another Customer
      6. Reset Customer Password
    5. Reseller Accounts
      1. Reseller Plans
      2. Create a Reseller Account
    6. Administrator Accounts
      1. Create a new Administrator
    7. Media Services
      1. Creating a Media Service
      2. Deleting a Media Service
    8. Announcements
      1. Managing Announcements
      2. Creating Announcement
      3. Deleting Announcement
    9. Statistics
    10. Software Health
    11. Software Updates
    12. Email Templates
    13. API
    1. Introduction
    2. Video Operation Manual
      1. Basics 101
      2. Service Overview
      3. File Manager
      4. Scheduling
      5. Streaming to Your Service
      6. Stream Targets
      7. GeoIP Country Locking
      8. Public Page
      9. Widgets & Links
      10. Reporting
    3. Audio Operation Manual
      1. Basics 101
      2. Station Overview
      3. Media Library
      4. Playlists
        1. General Rotation
        2. Jingles & Advertising
        3. Scheduling
        4. Repeat Protection
      5. Live DJ Connections
      6. Live Stream Recording
      7. DJ Manager
      8. Fallback, Backup and Intro Files
      9. Country Blocking
      10. Stream Authentication
      11. Stream Proxy
      12. Public Page
      13. HTML5 Player
      14. Widgets & Links
      15. Reporting
    4. Reseller Operations Manual
      1. Reseller Dashboard
      2. Customers
      3. Media Services
    1. Wowza and Flussonic on same system
    2. Submit a feature request
    3. Wowza Custom Properties
    4. API Documentation
    5. Custom Domain Names
    6. Shoutcast 2 Admin Guide
    1. Getting started with Audio Streaming
    2. Icecast Live Broadcasting
    3. Shoutcast 2 Live Broadcasting
    4. Broadcasting with AutoDJ
    5. DJ Accounts
    6. HTML5 Audio Player
    7. Mount Points
    8. Managing Your Media
    9. Managing Media Using FTP
    10. Shoutcast 2 Premium
    1. Getting started with video streaming
    2. Live Streaming Overview
    3. TV Station Overview
    4. Ondemand Video Streaming
    5. GeoIP Country Locking
    6. VAST Advertising
    7. Relay & IP Camera
    8. Stream Recording
    9. Connecting your encoder
    10. Preparing Your Media Files
    11. Managing Media Using FTP
    12. Understanding Video Playlists
    13. Embedding player on your website
    14. Smooth Streaming and Content Transition
    15. Video Transcoding (Adaptive Bitrate Streaming)
    16. Stream Watermark​
    17. DVR Rewind
    18. Statistics
    19. Facebook Live Streaming
    20. Youtube Stream Publishing
    21. Twitch Stream Publishing
    22. Shoutcast 2 Stream Publishing
    23. Icecast Stream Publishing
    24. RTMP Stream Publishing
    1. Cloud Video Overview
    2. Admin Manual - Cloud Video
      1. Team & Staff Members
      2. Plans & Customers
      3. WHMCS Billing Provisioning Module
      4. Login to your cloud platform
      5. Dashboard - A First Look
      6. Branding your platform
      7. Activating VOD on Customer Plan
    3. User Manual - Cloud Video
      1. Login to your video platform
      2. First Look
      3. Creating a Channel
      4. Channel Overview
      5. Broadcasting
      6. Recording
      7. Media Content
      8. Live Events
      9. 30 Minute Rewind
      10. Fallback Video
      11. TV Channels - 24x7 UGC
        1. TV Event Scheduling
      12. Video on Demand
      13. VOD Playlists
      14. Publishing
      15. Bandwidth Utilisation
      16. Viewing Analytics
      17. Publish Zoom Meetings
      18. Advertising
      19. Restreaming IP Cameras
    4. Video Guide Series
    5. Streaming Best Practices
    6. Feature Comparison
    7. Roadmap & Release Notes
HTML5 Audio Player

Last updated 4 weeks ago

The audio player is compatible with all modern browsers, it supports native HTML5 and SSL streaming and comes in 3 different sizes: Large, Small and Compact. The player is available only with the MediaCP software and it cannot be used with external streams outside of the MediaCP.

The Audio Player includes the following primary features:

  • Automatic Album Cover Art from iTunes or LastFM
  • Fallback custom background where a relative image cannot be located or cover albums are disabled
  • Direct Player Links
  • Mount Point Selection
  • Listener Count
  • Domain Restrictions – Play only on specific websites
The Audio Player is heavily cached, with nginx level caching on all player related end-points as well as a redis cache of stream information and player configuration. The player should be capable of handling thousands of visitors without struggle.

HTTPS / SSL & Stream Proxy

The Audio Player is designed to work either with native SSL from the streaming service (Shoutcast or Icecast) or with the MediaCP Stream Proxy. If the stream proxy is enabled on a service, this method is used as the preferred streaming url by the player. The stream proxy is delivered through nginx proxy_pass feature and provides minimal overhead and CPU consumption.

The Stream Proxy is enabled automatically for server types where SSL is either not available; or not ideal. This includes:

  • Shoutcast 2.5 – SSL support is not available in the server software

Autoplay

Autoplaying a stream is a complicated process with modern browsers, since the Chrome engine implemented Autoplay Policy Changes which prohibit a stream from autoplaying unless certain conditions are made

The policy specifies that autoplay is only possible where:

  1. The audio is muted; or
  2. The user has engaged with the website before autoplay starts; or
  3. The user has previously played media on the website with sound.

Because of these restrictions, it does not make a lot of sense to start an audio-only stream muted; because it will confuse the user visiting the website.

We have implemented an “Attempt Autoplay” option which will automatically attempts to play the broadcast on load of the player at 50% volume. This will require visitor prior interaction (click, tap, previous visit with play, etc.) so that it meets the above conditions.

Mount Points

The Audio Player streams the default Mount Point URL as defined in the MediaCP so it is important that you are broadcasting to the same Mount Points that are listed in the Mount Points configuration.

When more than one mount point is specified, the player will show a dropdown selection allowing the user to change to a different stream. This can be useful for providing multiple bitrate streams.

Album Covers

Album covers are displayed on the stream by default. The image is located from iTunes or Last.fm depending on the panel configuration. If an image is not available, the configured Player Background will be displayed instead.

It is possible to disable Album Covers from the Player Configuration, by unchecking the Covers item from Display Options.

Player Configuration

It is possible to access the player configuration while logged into the MediaCP. You will see the configuration icon available on the player itself.

Permitted Domains

It is possible to lock the player so that it will only work from a specified list of domains. This allows you to control where the player can be used. The list of domains should be provided in a simple list of domain names only, not including anything additional (do not include http:// or https://). For example: mediacp.net, mydomain.com

This function works by utilizing the browser Access-Control-Allow-Origin feature in conjunction with the JSON configuration URL (where the player gets information about the stream). If a domain is not included in the allowed list, it will be blocked from accessing the configuration data by the browser itself. 

Table of Contents