Accessibility demo
Sample implementation
Libraries
<!-- <head> -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />
<!-- <body> -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/default/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/keyboard.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/share.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/qsel.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/asel.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/speed.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/subtitles.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
HTML code
<p>
<button>Focus here</button>
</p>
<div class="player">
</div>
Javascript
var subtitles =
[ { src : "https://builds.flowplayer.com/samples/en.vtt"
, lang : "en"
, label : "English"
}
, { src : "https://builds.flowplayer.com/samples/pt.vtt"
, lang : "pt"
, label : "Portuguese"
, is_default: true
}
]
var options =
{ src: "//edge.flowplayer.org/functional.m3u8"
, token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w"
, rewind: true
, start_time: 10
, subtitles : {tracks: subtitles}
, share: { link: true, facebook: true }
, logo: "https://flowplayer.com/user/pages/images/flowplayer-logo-lightgrey.png"
, logo_href: "https://flowplayer.com"
, title: "native / default"
}
window.player =
flowplayer(".player", options)