文章关键字 ‘video’

使用JS快速获取video视频任意位置的缩略图

2024年01月15日,星期一

封面图,坠落的天使

其实获取视频的缩略图并不需要视频解码就能实现,方法就是其貌不扬的HTML video元素。

阅读全文…

ogv.js让iPhone支持webM视频解析播放

2021年07月24日,星期六

ogvjs与webm解码封面

在前端同行的提醒下,了解了下ogv.js解码webM视频,也就是使用canvas播放webM视频,可以让iOS,iPhone播放webM视频,但是,我的主要目的是解决Android原生video 视频层级问题的。

阅读全文…

借助ffmpeg.wasm纯前端实现多音频和视频的合成

2021年03月20日,星期六

熊猫 合体

不借助C/C++,纯JS浏览器中ffmpeg.wasm实现指定长度、位置和数量的音频和视频合并成新的视频,此领域目前为数不多优质文章,建议收藏备忘。

阅读全文…

HTML audio基础API完全使用指南

2019年07月7日,星期日

Audio基础API大全

音视频播放暂停控制,播放时长获取,播放速率,以及检测什么时候播放结束,当前媒体资源是否处于暂停状态等,都在本文有所介绍,本文就是audio/video元素各类基础API完全介绍,总能找到你需要的东西。

阅读全文…

纯CSS图片滤镜项目CSSgram简介

2019年06月7日,星期五

CSSGram项目封面图

本文介绍一个CSS项目CSSgram,借助css滤镜和混合模式实现Instagram中的26种滤镜效果,不仅可以作用于图片,还可以作用于视频。

阅读全文…

深入理解CSS mix-blend-mode滤色screen混合模式

2019年05月28日,星期二

无论在哪个语言中,无论是什么设计工具,滤色混合模式都是非常基础,非常常见的一种混合模式,如果你致力于在图形表现领域有所作为,一定要把这种模式的混合算法、特效以及应用场景记得滚瓜烂熟。

阅读全文…

如何让MP4 video视频背景色变成透明?

2019年05月16日,星期四

mp4视频背景透明

有一些非常幸福的复杂动向,或者一些场景特效使用视频来实现是非常简单的,但是视频有一个严重的问题,那就是背景它不是透明的,无法跟底部图像很好的融合在一起,那有没有什么解决方法可以让它的背景变透明呢?

阅读全文…

从天猫某活动视频不必要的3次请求说起

2018年12月24日,星期一

天猫

我们在移动端做H5开发的时候,有时候会用到MP4视频,对于一些酷效果,是性价比最高的方式。然而,很多前端开发在使用这些视频的时候没有注意,或者根本就不知道视频的某些信息的位置会影响浏览器的请求个数,从而影响网页性能。

阅读全文…

CSS ::backdrop伪元素是干嘛用的?

2018年12月22日,星期六

backdrop头图

CSS ::backdrop伪元素可以控制视频,弹框或者普通全屏元素的黑色蒙层背景样式的。兼容性还很不错,实际项目中可以用一用。

阅读全文…

HandBrake乃MP4免费压缩webm转换工具不二之选

2018年12月3日,星期一

HandBrake官网logo

HandBrake是视频处理的软件,开源,免费,而且对web视频呈现非常友好。对于我们开发者而言,用来进行MP4视频压缩可谓是不二之选,无需特别技巧便可直接将各类视频格式转换成MP4格式,可以指定帧率,画面质量,声音速率,以及画面大小来实现我们的压缩效果,极小尺寸,同时视频依旧高质量,运行稳定,非常推荐。

阅读全文…