最近在开发过程中,遇到这样的需求:上传视频并在同一页面的多个模拟机型上展示并播放该视频。
这就导致了一个问题,我们这些视频虽然是同一个,但是由于加载视频的请求是在同一时间发出的,所以会导致加载多次视频,加载的数拍团码据翻倍。
所以需要思考如何减少视频的加载,保证后续其它的视频都能够走缓存。由于不知道上传的视频加载需要多长事件、所以延迟其它机型的视频加载显然不太现实,所以经过思考,不如换成封面来替代视频,后续点击播放的时候再赋值src。
将video标签放入canvas,然后利用drawImage生成封面图, 这个video标签必须要有首帧数据 。换句话说,页面上的video标签是存在且已经加载出第一帧的页面,我们的封面图其实就是第一帧的视频。
将获取到的视频url贴到一个video标签中,通过video标签的 loadeddata 事件,在加载了第一帧后立刻形成封面图,然后贴到所有video标签的poster属性上。
以ant-design 的upload组件为例,上传视频后能获取到file信息,然后根据URL.createObjectURL方法获取到本地视频播放地址,贴到video中然后利用canvas生成封面,然后贴到所有video标签的poster属性上。
URL.createObjectURL() 获取的url对视频文件的引用会一直存在内存中,只有在页面触发了unload时或者使用URL.revokeObjectURL()释放后才袭哪会从内存清除。所以要使用本地视频数据时或枝,在生成封面图后一定要通过URL.revokeObjectURL()释放。
小程序返厅扮转发,图片不配置会自动截取顶部页面。如配置图片,比漏灶例不为5:4则会截取图片顶部内容。
为使伏裂自定义图片完整展示,做了以下 *** 作。
1.jpg,png背景色,png支持透明色
2.异步方法,最好是在进入页面就调用,否则需要await才行
3.注意canvas的宽高
微信小程序分享时,封面图片裁剪为5:4
小程序官网
jpg 与 png 的区别
方法1:
使用 canvas 绘制
方法2:
在视频的标签的 src 属性后加上一个时间戳 #t ,表示简毁显笑咐蔽示视碰州频时从这个时间开始,默认其为显示的第一帧。 在部分安卓机型上不生效
Generating a random preview image on a HTML5 video tag
Start HTML5 video at a particular position when loading?
Dynamically using the first frame as poster in HTML5 video?
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)