
Developers
Player plugins
Developers
Player plugins
Adds a selection menu for multiple audio tracks in HLS or DASH streams.
Load the audio selection
plugin next to the core player and the HLS plugin or the DASH plugin.
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
<!-- or
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
-->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/asel.min.js"></script>
To enable the plugin in the async cloud player, declare it in the "plugins": []
config object with asel
.
You can configure the plugin with top level configuration option asel
.
The configuration option can either be false
which disables audio selection or
a configuration object with properties:
default_lang
- a string containing the desired default language. Has to match an existing language attribute in the HLS manifestsort
- a sorting function to control the order of the items in the menu. Signature (a: object, b: object) => number
.
In order for default_lang
to have an effect, make sure your m3u8 manifest does alllow autoselecting a track, ie the tag for the audio should look like
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio_0",CHANNELS="1",NAME="English",LANGUAGE="en",DEFAULT=NO,AUTOSELECT=YES,URI="somemanifest.m3u8"
AUTOSELECT=NO
will prevent the parameter from working.
You can control in which order the items will be rendered into the menu with passing a sorting function as the asel.sort
configuration option.
For example to sort by a pre-defined order in an array you could use the following function
function sort_by_lang(order) {
return function(a, b) {
return order.indexOf(a.lang) - order.indexOf(b.lang)
}
}
Configured with
{
// Other player configuration
asel: {
sort: sort_by_lang(["en", "es"])
}
}
The Audio selection JS API lives under asel
namespace in the player API.
Properties:
tracks
- A list of audio tracks for the stream. Track properties are parsed from HLS manifest:
id
audioCodec
autoselect
default
lang
name
url
get()
- function that returns the current trackset(index)
- function for changing the current track (index
refers to the index in the tracks
array)events
- A list of events that can be listened to
SET
- When a track is being selectedSWITCH
- When audio track is switchedTRACKS
- When tracks are parsed from the manifest and availablevar api = flowplayer('#container', {
src: "https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/ElephantsDream.smil/playlist.m3u8"
asel: {
default_lang: 'es'
}
})
api.on(api.asel.events.SWITCH, function() {
console.log('Track switched, current track', api.asel.get().name)
})
Codepen
Live streaming
Live analytics
Ad scheduling
Monetization