文章关键字 ‘video’

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头图

backdrop这个单词是背景幕布,就是戏曲表演后面的一块布。::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。在web中哪些元素需要视觉聚焦呢?一个是HTML5 <video>视频元素,还有就是HTMl5.2 <dialog>元素,以及处于全屏状态下的普通元素。这些元素的背景样式均可以交给::backdrop伪元素进行控制。

阅读全文…

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

2018年12月3日,星期一

HandBrake官网logo

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

阅读全文…

HTML5 video视频播放Picture-in-Picture画中画技术

2018年12月2日,星期日

视频画中画技术

Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture,也就是俗称的画中画技术,也就是很多视频网站看评论时候,播放视频变小挂在右下角的这种交互技术。实际上,这里的画中画要比当前视频网站的画中画要更强,强在其是一个客户端层面的接口,小视频窗口是操作系统窗体级别的,就算你的浏览器切换到其他选项卡页面,或者最小化,也会在你电脑右下角播放视频。

于是乎,我们可以一边码代码一边看网页小视频了!

阅读全文…

揭秘视频网站video视频倍速播放的实现

2018年07月14日,星期六

B站,或者腾讯视频等主流视频网站视频现在都支持倍速播放功能。这个功能对于当下快节奏的生活而言,是很有用的,说夸张点是延长了我们的生命,哈哈哈。

对于一个靠技术吃饭人,总免不了关注点在技术实现上,究竟是如何实现的呢?且看~

阅读全文…

玩转HTML5 Video视频WebVTT字幕使用样式与制作

2018年03月22日,星期四

HTML5 Video视频支持支持外挂字幕,文件后缀名是.vtt,称为WebVTT格式,专门的web字幕格式。使用很简单,用一个<track>元素即可。并且字幕的样式是可以控制的。

阅读全文…