三秒过后（视频已经渲染完成后）再动态将字幕添加进去

Question

三秒过后（视频已经渲染完成后）再动态将字幕添加进去，怎么添加

这是视频options中的配置
```javascript

export const options = (src: string, tSrc?: string) => {
  return {
    notSupportedMessage: t("videoAnalysis.aiChartsDetail.notSupportedMessage"),
    controls: true,
    responsive: true,
    autoplay: false,
    preload: "metadata",
    // preload: "auto",
    subsCapsButton: true,
    controlBar: {
      children: [
        // 写在这里，会在播放条上显示出来，并且是按照写的顺序显示位置。
        { name: "playToggle" }, //播放暂停按钮
        { name: "currentTimeDisplay" }, //当前播放时间
        { name: "progressControl" }, //播放进度条
        { name: "subsCapsButton" }, //字幕
        {
          name: "volumePanel", //音量控制
          inline: false //不使用水平方式
        },
        { name: "FullscreenToggle" }, //全屏
        // { name: isArea ? "" : "FullscreenToggle" }, //全屏
        { name: "dash-board-echart" },
        { name: "teaCenterHead" }
      ]
    },
    sources: [
      {
        src: src,
        type: "video/mp4"
      }
    ],
    tracks: [
      {
        src: tSrc,
        default: true
      }
    ]
  }
}

后续怎样才可以动态添加进去呢？

有搜索到 addRemoteTextTrack方法但是没有效果

      player.value.addRemoteTextTrack(
          {
            src: tSrc,
            kind: "captions",
            default: true
          },
          false
        )

这样写出来后也没有效果，请问一下有人知道怎么做吗？

Answer 1

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/268083
• 你也可以参考下这篇文章：【网页】在网页中添加隐藏播放器自动播放背景音乐的办法
• 您还可以看一下 夏曹俊老师的从零开发操作系统：从加电自检到内核引导课程中的 开发环境配置与第一个启动程序小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 图片懒加载的原理及实现中的 为什么要使用图片懒加载呢？什么是图片懒加载呢？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  1. 原理

  图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

  2. 实现

  思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。

  图片没有进入可视区域，也就是说图片的offsetTop需要小于页面的可视高度，但想一想，当图片在页面的下方的时候呢，需要页面滚动了一段距离之后才能看到图片，所以这里需要满足img.scrollTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现

  • HTML

  <img src="loading.gif" data-src="1.jpg" alt="">
  <img src="loading.gif" data-src="2.jpg" alt="">
  <img src="loading.gif" data-src="3.jpg" alt="">
  <img src="loading.gif" data-src="4.jpg" alt="">
  <img src="loading.gif" data-src="5.jpg" alt="">
  <img src="loading.gif" data-src="6.jpg" alt="">
  <img src="loading.gif" data-src="7.jpg" alt="">
  <img src="loading.gif" data-src="8.jpg" alt="">
  <img src="loading.gif" data-src="9.jpg" alt="">
  <img src="loading.gif" data-src="10.jpg" alt="">
  ......
  

  • CSS

  *{
  	margin: 0;
  	padding: 0;
  }
  img{
  	vertical-align: top;
  	width: 100%;
  	height: auto;
  }
  

  • JS

  let img = document.getElementsByTagName('img');
  let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
  lazyload(); 
  window.addEventListener('scroll',lazyload);
  function lazyload(){  //监听页面滚动事件
  	var seeHeight = window.innerHeight;  //可见区域高度
  	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  	for(let i = n; i < img.length; i++){
  		if(img[i].offsetTop < seeHeight + scrollTop){
  			if(img[i].getAttribute("src") == 'loading.gif'){
  				img[i].src = img[i].getAttribute("data-src");
  			}
  			n = i + 1;
  		}
  	}
  }
  

  图片懒加载也可以结合节流和防抖函数进行使用，优化页面。下次就来介绍一下节流和防抖如何实现！

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^