js+css给视频添加字幕

一个没什么用的功能。。。字幕大部分都是在视频文件里的，纯属娱乐；

效果图：

B8A5EF85-FCEC-4d8a-9B2E-5DF55580614B.png

1、需要一个视频和一个字幕文件
2、代码部分
首先需要解析一个字幕文件，具体方法上一篇文章有提到，解析后得到的json如下

      srtInfoList: [
        {
          endTime: 9.696,
          index: 0,
          sort: "1",
          startTime: 4.84,
          text: "Snow. It had to be snow.",
          timeLine: "00:00:04,840 --> 00:00:09,696",
        },
        {
          endTime: 26.98,
          index: 1,
          sort: "2",
          startTime: 20.08,
          text: "Snow. It had to be snow.",
          timeLine: "00:00:20,080 --> 00:00:26,980",
        },
      ],

//视频部分和存放字幕部分
判断当当前播放时间在指定字幕时间区间
      <div class="video-part">
        <video id="video" :src="videoSrc" controls></video>
        <div class="srt-info" v-for="(item,index) in srtInfoList" :key="index">
          <div class="text" v-if="srtTime>item.startTime && srtTime<item.endTime">{{item.text}}</div>
        </div>
      </div>

  data() {
    return {
      videoSrc:
        "你的视频地址",
      srt:
        "你的字幕地址2020-07-27/1c42181ff8647c8d4d53c5a2bfbbf503.srt",
      srtInfoList: [],
      srtTime: '',
    };
  },
//在此处监听视频播放
  mounted() {
      var myVid = document.getElementById("video");
      // eslint-disable-next-line no-unused-vars
      let that = this;
      myVid.addEventListener(
        "timeupdate",
        function() {
          console.log(myVid.currentTime)
          that.srtTime = myVid.currentTime//传入当前播放时间
        },
        false
      );
  },

最后是样式

    .video-part {
      width: 520px;
      position: relative;
      video {
        position: relative;
        width: 520px;
      }
      .srt-info {
        width: 100%;
        position: absolute;
        bottom: 24px;
        .text {
          width: 420px;
          position: relative;
          left: 50%;
          margin-left: -210px;
          text-align: center;
          line-height: 20px;
          color: #fff;
        }
      }
    }