记一次OSS跨域视频截取封面图实现方案

需求背景

运营同事PC端发布的视频,可以直接在视频中选择时间,将当前时间的帧,作为视频的封面图。在这个过程中遇到了跨域问题,时间轴同步问题,video标签跨域问题,前端视频缓存问题

目标效果

记一次OSS跨域视频截取封面图实现方案_第1张图片

遇到的问题

1.本地选择视频可以实现截图,OSS中的视频会爆跨域问题,无法实现截图

本地选择的视频是blob格式是没问题的,而OSS中选择的视频域名和PC端管理系统的域名不相同,导致出现问题。解决办法:在OSS中设置跨域规则

2.后端跨域解决之后,前端渲染的video组件无法成功执行截图方法,会报错

本地渲染的视频地址已经被浏览器缓存,导致报错。解决办法:使用js创建一个dispaly:"none"的视频video,我们叫他new_video new_video的URL地址沿用video的视频地址加上随机数(加随机数的目的是防止被缓存),最重要的一点new_video要设置crossOrigin属性

3.修改video的时间轴,要联动修改new_video的时间轴

解决办法:增加一个对old_video的监听方法,动态赋值

代码




    OSS跨域视频截取封面图实现方案
    
    






你可能感兴趣的:(javascript前端)