Html5 视频和 JavaScript 字幕

如何解决Html5 视频和 JavaScript 字幕

我有一个视频作为横幅播放，使用 javascript。我需要添加字幕轨道，但仅将字幕代码添加到视频部分是行不通的。我试过了..

• 在视频代码中添加了 vtt 字幕代码，但不起作用。

• 我在视频标签中添加了 <track label="English" kind="subtitles" srclang="en" src="/media/Images/Home2018/Banner/BannerVideo3.vtt"> 默认值，但这不起作用。

我认为需要以某种方式更新 JS 以包含字幕轨道。

我下面是我的代码：

    <video id="BannerVideo3" class="Banner" muted playsinline loop oncanplaythrough="playBannerVideo3()" controls autoplay muted playsinline>
</video>

<script>
function playBannerVideo3()
{
  var videoElement = document.getElementById('BannerVideo3');
  try 
  {
    videoElement.play();
  }
  catch(err) {}
}

var basePosterURL = '/media/Images/Home2018/Banner/BannerVideo3.jpg';
var baseVideoURL = '/media/Images/Home2018/Banner/BannerVideo3.mp4';

function getNameForCurrentWidth()
{
  var bodyWidth = document.body.clientWidth; // $('body').width();
  if (bodyWidth <= 767)
    return '_Phone';

  if (bodyWidth <= 990)
    return '_Tablet';

  return ''; // Desktop
}

var loadedWidthName;
function loadBannerVideo3(posterOnly)
{
  var newWidthName = getNameForCurrentWidth();
  if(newWidthName == loadedWidthName)
    return;

  loadedWidthName = newWidthName;
  var videoElement = document.getElementById('BannerVideo3');

  if (!videoElement.paused)
    videoElement.pause();

  videoElement.src = '';
  videoElement.poster = addToFilename(basePosterURL,loadedWidthName);

  if (posterOnly == true)
    return;

  setBannerVideoSrc(loadedWidthName);
}

function setBannerVideo3Src(newWidthName)
{
  // don't play video if in design or edit modes
  if( $('body.DesignMode').length == 1 ||  $('body.EditMode').length == 1)
    return;

  var videoElement = document.getElementById('BannerVideo3');
  videoElement.src = addToFilename(baseVideoURL,newWidthName);
  videoElement.load();
}

// load poster as soon as possible
$(function() // document.ready
{
  loadBannerVideo3(true);
});

  // load and play video after everything else loads
$(window).on('load',function()
{
  setBannerVideo3Src(loadedWidthName);
});

var resizeTimeout;
$(window).resize(function()
{ 
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(resizeEnd,200);   
});
function resizeEnd()
{
  loadBannerVideo();
}
</script>