分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Html5 视频和 JavaScript 字幕，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Html5 视频和 JavaScript 字幕？

开发过程中遇到Html5 视频和 JavaScript 字幕的问题如何解决？下面主要结合日常开发的经验，给出你关于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>