Vue + 原生JS + 原生CSS3 实现视频时间点在时间轴上的动态可视化

需求

1. 根据关键字在视频中的出现时间，在模拟的视频时间轴中显示对应的位置
2. 用户点击，选择不同的关键字，显示对应关键词时间
3. 点击进度条中的关键词时间点，视频对应跳转到该时间播放

实现效果

• 完整源代码可移步wantingtr’s github
• 点这里查看完整项目演示

模拟后台数据

针对这个需求模拟后台发来的数据，每个关键词分别有value内容以及time数组，包括该关键词在视频中出现的所有时间点，在页面中展示的也应为对应每个关键词的时间点在时间轴上的可视化。

videoAnalysis: {
   
    //关键词
    key: [
        {
   
            value: "学习", 
            time: [
                '00:00:01',
                '00:05:52',
                '00:01:12',
                '00:02:32'
            ]
        },
        {
   
            value: "2018",
            time: [
                '00:02:02',
                '00:03:52',
                '00:07:12',
                '00:04:52',
                '00:04:12',
                '00:06:32',
                '00:01:32'
            ]
        },
        //...
    ],

实现方法

数据结构

//数据结构
data: {
   
    keyStatus: [],
    keyX:[],//关键词时间坐标
    videoTotalTime: '00:10:00', //视频总时长
}

1. keyStatus是一个一维对象数组，储存每个关键词的显隐布尔值{status: false}。若用户点击，则对应index值为true，其他为false

2. keyX是一个二维数组，储存每个关键词对应的所有时间点的坐标，利用：style来动态控制每个时间点在时间轴上的横坐标

html

<!--关键词显示-->
<div id="keyContent" 
    class="keyContent1" 
    v-for="(item,index) of videoAnalysis.key" 
    :key="index" 
    @click= "changeKey(index)">
            {
  {item.value}}
</div>