HTML
贝壳里的沙
毕业于中国石油大学软件工程系,先后就职于北京方正集团、北京用友财务软件股份有限公司、广东安居宝数码科技股份有限公司、广东东道信息科技有限公司,拥有10年以上的开发管理经验,擅长安防相关的音视频编技术应用,在大数据分析处理等方面有丰富的经验和独到见解。
展开
-
H5之webcoekt播放JPEG图片流
一、简介既然webcoekt是基于tcp连接的,理论上讲所有的浏览器是可以私有协议处理二进制的,如果我们需要播放视频,我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端,然后前端通过websocket接收图片然后将图片显示到img或canvas中即可,当然这个是我自己设想的,也是应该可以做的到了,做到如下需要以下技术支持:后端直接ffmpeg转码为jpeg图片流后端定制播放协议包括基本指令如play、stop、pause、faster、slower后端需要提供websocket支持原创 2020-09-23 15:49:48 · 2891 阅读 · 2 评论 -
H5播放H264之websocket
一、简介关于前端使用websocket播放音视频我倒是没想过,但是理论上确实是可行的,因为websocket是长连接,虽然知道web端的常见用法,但是作为c++开发人员我最疑惑的问题就是:使用js处理二进制?这个做法很不常见,恕我没太多了解,我一直以为js一般处理二进制不方便,所以脑海里一直自以为是js编解码效率高吗?因为是基于浏览器的脚本语言的二不是直接基于系统api的独立进行,转行较多,效率应该不高,所以我也一直避讳用js去处理编解码其实,我自以为的经过不断的探索发现也确实是对的,相对而言j原创 2020-09-21 17:48:15 · 6448 阅读 · 3 评论 -
H5播放webrtc视频
一、简介WebRTC概念WebRTC是由Google主导的,由一组标准、协议和JavaScript API组成,用于实现浏览器之间(端到端之间)的音频、视频及数据共享。WebRTC不需要安装任何插件,通过简单的JavaScript API就可以使得实时通信变成一种标准功能。为什么使用webrtc现在各大浏览器以及终已经逐渐加大对WebRTC技术的支持。下图是webrtc官网给出的现在已经提供支持了的浏览器和平台。二、H5播放webrtcwebrtc播放经过不断探索,基本上没有现行的库来直接播放原创 2020-09-21 17:43:10 · 12515 阅读 · 6 评论 -
SRS之启用webrtc播放
一、简介WebRTC概念WebRTC是由Google主导的,由一组标准、协议和JavaScript API组成,用于实现浏览器之间(端到端之间)的音频、视频及数据共享。WebRTC不需要安装任何插件,通过简单的JavaScript API就可以使得实时通信变成一种标准功能。为什么使用webrtc现在各大浏览器以及终已经逐渐加大对WebRTC技术的支持。下图是webrtc官网给出的现在已经提供支持了的浏览器和平台。二、srs启动webrtc需要srs的最低版本:SRS4.0.14,为了拉取到最新原创 2020-09-21 17:29:15 · 18855 阅读 · 16 评论 -
H5播放Rtmp之vue-video-player
一、简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所以不需要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:HLS(1) 使用http协议,兼容所有浏览器。(2) 延时非常大,不太适合实时视频源,适合文件点播或历史录像直播。RTMP(1) 使用flash插件播放,不兼容所有浏览器(特别2020年12月后chrome带头不再支持原创 2020-09-21 17:16:43 · 2558 阅读 · 1 评论 -
H5播放Rtmp之Flowplayer播放
一、简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所以不需要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:HLS(1) 使用http协议,兼容所有浏览器。(2) 延时非常大,不太适合实时视频源,适合文件点播或历史录像直播。RTMP(1) 使用flash插件播放,不兼容所有浏览器(特别2020年12月后chrome带头不再支持原创 2020-09-21 17:10:52 · 3899 阅读 · 1 评论 -
H5播放Rtmp之videojs播放
一、简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所以不需要任何插件,到处播放,处处兼容,所以rtmp和hls在web端的特点如下:HLS(1) 使用http协议,兼容所有浏览器。(2) 延时非常大,不太适合实时视频源,适合文件点播或历史录像直播。RTMP(1) 使用flash插件播放,不兼容所有浏览器(特别2020年12月后chrome带头不再支持原创 2020-09-21 17:04:56 · 24767 阅读 · 7 评论 -
H5播放HLS之DPlayer播放
一、创建vue项目http://dplayer.js.org/guide.htmlDPlayer使用是基于vue的,所以先安装vue并创建vue项目卸载vuenpm uninstall -g vue-cli安装vue为最新(4.x)npm install -g @vue/clivue -V如果需要指定版本安装vue3.x则可以npm i -g @vue/cli@^3.12.1vue -V创建项目vue create videocd videonpm run servev原创 2020-09-21 16:58:52 · 5175 阅读 · 0 评论 -
H5播放HLS之videojs播放视频
一、简介如果要让网页支持在所有浏览器上播放,就需要使用第三方的播放器。VideoJs是一个较好的播放器库,完全免费,不像JWPlayer一样需要付费才能使用一些高级功能。videojs播放库是比较有名的一个播放库,它不仅支持hls也支持rtmp,不过如果是播放rtmp它最终也是通过flash插件完成的,我们暂时只看hls。二、实现如果使用videojs播放hls前端代码实现如下:<!DOCTYPE html><html lang="en"> <head>原创 2020-09-21 16:51:33 · 5738 阅读 · 0 评论 -
H5播放HLS之video标签播放
视频推流为了产生HLS视频,我们可以借助srs来实现rtmp推流并生成HLS流,具体详细使用可以参考我之前的文章,这里不再赘述。我们要实现web端播放传统的音视频,最重要的实现就是rtmp实时视频推送至srs集群,为了演示我这里只启动一个srs简单应用,重点放在web端播放相关技术的讲解,关于srs实时视频推送一块,我在《SRS直播集群方案》一文已经做了很详细的介绍,这里不再赘述。首先,我们可以使用ffmpeg或者obs采集本地视频并推送到srs协转服务中,这里我使用obs进行采集与推送(ffmpeg原创 2020-09-21 16:45:46 · 8154 阅读 · 0 评论 -
H5播放HLS之hls.min.js库
H5播放HLS之hls.min.js库视频推流H播放HLS视频推流为了产生HLS视频,我们可以借助srs来实现rtmp推流并生成HLS流,具体详细使用可以参考我之前的文章,这里不再赘述。我们要实现web端播放传统的音视频,最重要的实现就是rtmp实时视频推送至srs集群,为了演示我这里只启动一个srs简单应用,重点放在web端播放相关技术的讲解,关于srs实时视频推送一块,我在《SRS直播集群方案》一文已经做了很详细的介绍,这里不再赘述。首先,我们可以使用ffmpeg或者obs采集本地视频并推送到s原创 2020-09-21 15:24:38 · 6866 阅读 · 0 评论 -
CSS浮动(float,clear)通俗讲解
CSS浮动(float,clear)通俗讲解转载 2017-02-20 20:49:48 · 379 阅读 · 0 评论 -
关于HTML学习重点-绝对布局和相对布局总结
其实这篇文章早就该写了,很久写了关于HTML布局相关的经验总结,一直在百度云上,只是偶尔查询翻到对应资料,担心日后很难找到,所以最后还是决心以文章的形式记录下来供大家参考查阅,实现这篇文章应有的价值; 之前从事Java2-3年,对JavaWeb相关技术都有较深的了解,当然自从从事C++工作之后,一直在专研C++相关技术,所以对Java而言,我已经忘得差不多了,虽然如此,如果真的要原创 2016-07-24 11:29:22 · 9121 阅读 · 0 评论 -
关于IE浏览器加载外部js注意事项
几年前,我还是一个做Java的程序猿,虽然说不上是高手,起码对JavaWeb相关技术有一定的了解,写一些前端的html或js没什么问题,几乎也没遇到过问题,不过已经转行n年了,Java的事已经忘记的一干二净了,一旦遇到点问题就不知道怎么解决了,庆幸的事,我花了部分时间把疑难杂症解决了: 使用C++调用HTML加载百度地图,为了使编程面向对象化,我想将百度地图封装成类并且将实原创 2015-10-31 17:05:58 · 5985 阅读 · 0 评论