ES6(十二)—— Reflect
ES6(十二)—— Reflect

Reflect API

2020-09-23 13:37:12阅读全文

响应式解决方案
响应式解决方案

使用媒体查询设置html的font-size,并且再额外使用rem设置字体大小。vw,vh设置元素宽高,rem的转换是px/font-size。

2020-09-23 12:17:08阅读全文

CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。
CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。

我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:

2020-09-23 12:15:25阅读全文

vscode系列: 做个五脏俱全的翻译插件
vscode系列: 做个五脏俱全的翻译插件

要做的效果如下, 就是一个翻译功能~

2020-09-23 11:47:44阅读全文

关于node的express框架的中间件
关于node的express框架的中间件

结论:其实就是当有请求时,会先处理中间件,等到各种中间件处理完毕,最后才进入路由的方法体。 我们可以使用use来注册中间件,然后中间件里使用next()来帮助我们执行完该中间件后执行下一个中间件,如果没有使用next(),那么请求将会被挂起,并且后边的中间件得不到被执行的机会

2020-09-23 10:08:31阅读全文

H5之webcoekt播放JPEG图片流
H5之webcoekt播放JPEG图片流

既然webcoekt是基于tcp连接的,理论上讲所有的浏览器是可以私有协议处理二进制的,如果我们需要播放视频,我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端,然后前端通过websocket接收图片然后将图片显示到img或canvas中即可,当然这个是我自己设想的,也是应该可以做的

2020-09-23 08:04:43阅读全文

⚡️前端多线程大文件下载实践,提速10倍,拿捏百度云盘
⚡️前端多线程大文件下载实践,提速10倍,拿捏百度云盘

没错,你没有看错,是前端多线程,而不是Node。这一次的探索起源于最近开发中,有遇到视频流相关的开发需求发现了一个特殊的状态码,他的名字叫做 206~

2020-09-23 05:23:56阅读全文

H5播放webrtc视频
H5播放webrtc视频

WebRTC是由Google主导的,由一组标准、协议和JavaScript API组成,用于实现浏览器之间(端到端之间)的音频、视频及数据共享。WebRTC不需要安装任何插件,通过简单的JavaScript API就可以使得实时通信变成一种标准功能。

2020-09-23 05:01:16阅读全文

H5播放Rtmp之Flowplayer播放
H5播放Rtmp之Flowplayer播放

我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所以不需要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:

2020-09-23 04:37:26阅读全文

H5播放H264之websocket
H5播放H264之websocket

关于前端使用websocket播放音视频我倒是没想过,但是理论上确实是可行的,因为websocket是长连接,虽然知道web端的常见用法,但是作为c++开发人员我最疑惑的问题就是:

2020-09-23 04:31:12阅读全文

Node 之 Path
Node 之 Path

1、__dirname 和 __filename 是模块中 的一个内置成员,他们分别是:

2020-09-23 02:37:36阅读全文

SRS之启用webrtc播放
SRS之启用webrtc播放

WebRTC是由Google主导的,由一组标准、协议和JavaScript API组成,用于实现浏览器之间(端到端之间)的音频、视频及数据共享。WebRTC不需要安装任何插件,通过简单的JavaScript API就可以使得实时通信变成一种标准功能。

2020-09-23 01:55:06阅读全文

H5播放HLS之hls.min.js库
H5播放HLS之hls.min.js库

为了产生HLS视频,我们可以借助srs来实现rtmp推流并生成HLS流,具体详细使用可以参考我之前的文章,这里不再赘述。

2020-09-23 01:17:18阅读全文

ECMAScript 6新特性简介
ECMAScript 6新特性简介

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,正式发布与2015年6月。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

2020-09-22 21:51:15阅读全文

H5播放HLS之video标签播放
H5播放HLS之video标签播放

为了产生HLS视频,我们可以借助srs来实现rtmp推流并生成HLS流,具体详细使用可以参考我之前的文章,这里不再赘述。

2020-09-22 21:27:24阅读全文

H5播放HLS之DPlayer播放
H5播放HLS之DPlayer播放

DPlayer使用是基于vue的,所以先安装vue并创建vue项目

2020-09-22 19:55:07阅读全文

H5播放Rtmp之videojs播放
H5播放Rtmp之videojs播放

我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所以不需要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:

2020-09-22 17:43:54阅读全文

HTML前端知识
HTML前端知识

1) HTML语言概念介绍2) HTML语言代码编写

2020-09-22 11:48:20阅读全文

H5播放Rtmp之vue-video-player播放播放
H5播放Rtmp之vue-video-player播放播放

我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所以不需要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:

2020-09-22 10:25:57阅读全文

H5播放HLS之videojs播放视频
H5播放HLS之videojs播放视频

如果要让网页支持在所有浏览器上播放,就需要使用第三方的播放器。VideoJs是一个较好的播放器库,完全免费,不像JWPlayer一样需要付费才能使用一些高级功能。

2020-09-22 10:04:14阅读全文

前端如何优雅处理类数组对象?
前端如何优雅处理类数组对象?

Leo 部门最近来了位前端实习生 Robin,作为师傅,Leo 认真的为 Robin 介绍了公司业务、部门工作等情况,还有前端的新人学习地图。

2020-09-22 01:33:50阅读全文

纯CSS实现markdown自动编号
纯CSS实现markdown自动编号

第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了,当时还单独涉猎过这个主题,Word 有个很好的特性级联标题,一次设置好之后,后续只要设置标题样式就能按照设置的标题编号方式自动编号,我们要做的只是将对应的标题设置成对应基本的标题样式就好了,这个方法让我爱不释手,多年来一直沿用。完全解决了中

2020-09-22 01:17:32阅读全文

搞懂dom的事件机制
搞懂dom的事件机制

最近遇到一个问题,当在一个dom元素中绑定了一个事件回调,但是触发该事件后事件的回调却未被执行,可能是什么原因呢?

2020-09-21 23:49:41阅读全文

derrick 创建 nodejs 项目容器
derrick 创建 nodejs 项目容器

docker 已经出山很久了,初出江湖就一鸣惊人,在程序员的江湖里声名远扬,作为江湖里的一粒尘埃,早就想从他身上学个一招半式,通过江湖上的口口流传,掌握了他的基本套路,用来锻炼锻炼身体很给力。但是一直以来,这一招半式,只能使用构建自己的开发环境,无法和自己开发的项目结合改造为容器化,因为之前没接触过

2020-09-21 13:37:15阅读全文

hexo npm WARN deprecated request@2.88.2: requeues/3142
hexo npm WARN deprecated request@2.88.2: requeues/3142

这是什么问题,每次执行淘宝镜像就会出现这种问题

2020-09-21 12:48:45阅读全文

XHTML元素类型
XHTML元素类型

根据css显示状态,XHTML元素被分为三种类型:块状元素,内联(行内)元素,可变元素。

2020-09-21 08:54:12阅读全文

ES6(十)—— Destructure(解构)
ES6(十)—— Destructure(解构)

Array-Destructure

2020-09-20 21:44:00阅读全文

for await …of 表达式的煎蛋实现小demo
for await …of 表达式的煎蛋实现小demo

偶然间看到一个小例子:

2020-09-20 18:33:35阅读全文

ES6(九)—— String
ES6(九)—— String

Template

2020-09-20 15:45:30阅读全文

实现微信产品问题反馈群实时监控与问题自动录入(上)
实现微信产品问题反馈群实时监控与问题自动录入(上)

因为我们的用户都喜欢通过微信群讨论的方式进行产品问题反馈,这无疑给日常的线上问题处理的效率带来极大的影响。曾经尝试对用户习惯进行线上填写方式的引导,但最终以失败告终。无奈下看看弄一个微信群监控机器人是否可行。

2020-09-20 08:39:17阅读全文

Node
Node

Node特点

2020-09-20 08:32:57阅读全文

?️ Web 站点暗色模式探索
?️ Web 站点暗色模式探索

最近发布了自己的新博客 https://xlbd.me , 博客站点设计了暗色模式风格,但是当时只是基于媒体查询 perfers-color-schema 实现的跟随系统偏好设置切换主题风格,本次带来了可用户自定义的浅色/暗色主题风格切换功能,同时兼容跟随系统偏好设置切换主题风格。

2020-09-20 03:52:24阅读全文

h5 - 实现播放功能
h5 - 实现播放功能

我们在页面开发过程中会遇到,在页面中播放视频的需求。通常我们利用成熟的 视频播放插件来处理

2020-09-19 23:27:05阅读全文