В видео js я хочу изменить текстовую дорожку из выпадающего списка. Когда я выбираю опцию (скажем, китайский), субтитры будут автоматически изменены. Ниже мой код:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" /> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <style> .video-js .vjs-control-bar { display: none; } </style> <body> <video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'> <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' /> </video> <script src="https://vjs.zencdn.net/7.6.6/video.js"></script> <p><select name="sel" id="sel"><option value="en">English</option><option value="zh">Chinese</option></select></p> </body>
Я прочитал пост Динамически изменять заголовки видео js с помощью addTextTrack () , однако, не в состоянии понять. Я также прошел через https://docs.videojs.com/tutorial-text-tracks.html, но не смог понять, как этого добиться.
Это должно выглядеть так: http://dev3.indusnettechnologies.com/bamboo-tv/
var player = videojs('dotsub_example'); var tracks = player.textTracks(); var trackSelector = document.getElementById("sel"); trackSelector.addEventListener("change", function () { var selectedLanguage = this.value; for (var i = 0; i < tracks.length; i++) { var track = tracks[i]; track.mode = "disabled"; if (track.kind === 'captions' && track.language === selectedLanguage) { track.mode = 'showing'; } } });
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" /> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <style> .video-js .vjs-control-bar { display: none; } </style> <body> <video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'> <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' /> <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' /> </video> <script src="https://vjs.zencdn.net/7.6.6/video.js"></script> <p> <select name="sel" id="sel"> <option value="en">English</option> <option value="zh">Chinese</option> <option value="es">Spanish</option> <option value="fr">French</option> </select> </p> </body>