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)

Standalone demo

accesibility demo

By using this website you agree to our privacy policy
Results