api - JWPlayer how to change Captions Track from Javascript? -
in jwplayer, how change (or set) caption tracks .. lets clicking on external html buttons.
lets say:
- if click html
[ button 1]
video captioned "eng.srt". - if click html
[ button 2]
video captioned "esp.srt".
and may there no captions tracks start @ all. respective captions tracks set upon html button click (even while playing?)
you can change subtitles using javascript-api-reference
captions
these api calls used listen or update active captions track if 1 or more closed captions tracks provided video. api can used log captions usage or build own cc menu outside jw player.
setcurrentcaptions(index) change visible captions track provided index. index must within list provided getcaptionslist. note index of 0 turns captions off.
oncaptionslist(callback) fired when list of available captions tracks updated. happens shortly after playlist item starts playing. event attributes: tracks (array): full array new captions tracks.
oncaptionschange (callback) fired when active captions track changed. happens in respons e.g. user clicking controlbar cc menu or script calling setcurrentcaptions. event attributes: track (number): index of new active captions track in getcaptionslist() array. note captions off if track 0.
example set up
<div id="myelement"></div> <div id="off_sub">off</div> <div id="eng_sub">eng</div> <div id="farsi_sub">farsi</div> <div id="jap_sub">japanese</div> <div id="russ_sub">russian</div> <script> jwplayer("myelement").setup({ playlist: [{ image: "/uploads/myposter.jpg", file: "/uploads/myvideo.mp4", tracks: [ { file: "/uploads/mycaptionsen.vtt", label: "english", kind: "subtitles" }, { file: "/uploads/mycaptionsfa.vtt", label: "farsi", kind: "subtitles" }, { file: "/uploads/mycaptionsja.vtt", label: "japanese", kind: "subtitles" }, { file: "/uploads/mycaptionsru.vtt", label: "russian", kind: "subtitles" } ] }] }); </script>
your requirement
<script> $("#off_sub").click(function(){ jwplayer("myelement").setcurrentcaptions(0);//off caption }); $("#eng_sub").click(function(){ jwplayer("myelement").setcurrentcaptions(1);//eng caption }); $("#farsi_sub").click(function(){ jwplayer("myelement").setcurrentcaptions(2);//farsi caption }); $("#jap_sub").click(function(){ jwplayer("myelement").setcurrentcaptions(3);//japanese caption }); $("#russ_sub").click(function(){ jwplayer("myelement").setcurrentcaptions(4);//russian caption }); </script>
refer below api list better understanding :
hope helps :)
Comments
Post a Comment