首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

360视频Web前端HEVC播放器实践剖析

360视频云前端团队围绕HEVC前端播放及解密实现了一套基于WebAssembly、WebWorker的通用模块化Web播放器,在LiveVideoStackCon2019深圳的演讲中360奇舞团Web...随着公司的业务发展,后面也负责了IoT业务前端支持,最近两年主要配合360视频云的一些Web前端支持工作。基于HEVC的播放器,实际上就是来源于我们最近做的一个叫QHWWPlayer的播放器。...HEVC并不是一个新鲜事物,但对于我们团队来说,Web前端的HEVC播放器一直是个亟待优化的领域。虽然移动终端或PC端HEVC播放器已经遍地开花,但在Web端仍旧有很多地方需要改进。...MOOV 前置或后置 在媒体处理中像MOOV等的索引数据有前置与后置两种情况,这里需要注意的是,我们的播放器基于Web端。...从下载、解码到渲染,视频播放器的基本流程就此建立,播放器便有了获取媒体数据、完成解码、呈现音画效果的基本能力。

2.3K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5 VideoAPI,打造自己的Web视频播放器

    本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。 ?...4.常用方法 方法名称 :解释 play():开始播放音频/视频 pause():暂停当前播放的音频/视频 5.常用API属性 属性名称 : 解释 duration:返回当前音频/视频的长度(以秒计...二、打造自己的播放器 我们使用JavaScript控制播放控件的行为(自定义播放控件),实现如下功能: 利用HTML+CSS制作一个自己的播放控件条,然后定位到视频最下方 视频加载loading效果...播放、暂停 总时长和当前播放时长显示 播放进度条 全屏显示 1.播放控件 视频播放器 为了显示播放按钮等图标我使用了字体图标 2.视频加载loading效果 一开始先隐藏视频,用一个背景图片替代,等到视频加载完成可以播放时在显示视频 CSS: .player

    4.9K40

    ffmpeg视频播放器相关

    软解码容易造成容易造成音视频不同步。 硬解码:在解码之前判断是否支持硬解码,如果支持硬解码就直接通过ffmpeg处理视频数据H264 H265等,为其加上头信息,然后硬解码交其OpenGLES渲染。...音视频同步问题 音频线性播放,视频同步到音频上。 视频线性播放,音频同步到视频上。 用一个外部线性时间,音频和视频都同步到这个外部时间上。...由于人们对声音更敏感,视频画面的一会儿快一会儿慢是察觉不出来的。而 声音的节奏变化是很容易察觉的。所以我们这里采用第一种方式来同步音视频。...这里需要计算当前视频帧的播放时间和当前音频的播放时间来进行比较,然后计算出睡眠时间来让视频不渲染还是延迟渲染,保持音视频尽量同步。...//如果>0表示音频播放在前,视频渲染慢了,需要加速渲染 <0表示音频播放在后,视频渲染快了,需要延迟渲染 double getFrameDiffTime(AVFrame *avFrame) {

    5.6K31

    视频播放器有哪些用途?视频播放器有哪些处理流程?

    ,现在的手机或者电脑上面都拥有专用的视频播放器,那么视频播放器有哪些用途?...视频播放器有哪些处理流程?下面小编就为大家带来详细介绍一下。 image.png 一、视频播放器有哪些用途?...视频播放器是一般都是指设备中可以播放文件的软件或者一些电子产品,那么视频播放器有哪些用途?...视频播放器一般是将文件播放给用户们观看的软件或者电子产品,那么视频播放器有哪些处理流程?...以上就是关于视频播放器有哪些用途以及视频播放器有哪些处理流程的文章内容,相信大家对于视频播放器已经有所了解了,平时大家也会经常使用到视频播放器,希望小编今天的介绍对大家有用。

    3.8K10

    视频加密怎么播放_win播放器加密视频

    视频加密方式大多数是由三部分组成的:加密客户端、账号后台管理系统以及加密视频播放器。...具体的实现过程是视频所有者利用加密客户端对视频进行加密,然后把视频传给视频购买者;而在加密授权的时候,对视频进行播放次数、播放日期,绑定硬件等设置,购买者拿到视频后可以实现在手机、电脑、平板等设备观看...1.视频加密最主要的功能是对视频加密,越安全越可靠,点量视频加密一机一码可以实现5层加密 2.客户专属私有化协议,不易被破解 3.防止多种软硬件录屏技术 4.视频盗用可追查 5.统计视频日志和报表等...6.可定制播放器播放器端可直接选择管理课程 7.视频播放过程可插入问答、动画、广告等 8.可批量加密视频,快速高效 9.一键制作试播文件 10.绑定硬件,防止恶意传播 11.可设置加密视频有效期...,视频过期可自毁!

    7.5K40

    FFmpeg 播放器视频渲染优化

    前文中,我们已经利用 FFmpeg + OpenGLES + OpenSLES 实现了一个多媒体播放器,本文将在视频渲染方面对播放器进行优化。 ?...视频渲染优化 前文中,我们都是将解码的视频帧通过 swscale 库转换为 RGBA 格式,然后在送给 OpenGL 渲染,而视频帧通常的格式是 YUV420P/YUV420SP ,所以大部分情况下都需要...当视频尺寸比较大时,再用 swscale 进行格式转化的话,就会存在性能瓶颈,所以本文将 YUV 到 RGBA 的格式转换放到 shader 里,用 GPU 来实现格式转换,提升渲染效率。 ?...YUV 转 RGB 本文视频渲染优化,实质上是对 OpenGLRender 视频渲染器进行改进,使其支持 YUV420P 、 NV21 以及 NV12 这些常用格式图像的渲染。...判断解码后视频帧的格式,AVFrame 是解码后的视频帧。

    3.2K30

    一款web端的好用又好看的音乐、视频播放器-XGPlayer

    前言 视频播放器一直是Web端比较难整的功能,虽然已经有比较优秀的开源库。可以满足日常开发大部分的功能,但是在一些功能上还是不尽如人意。今天给大家介绍一款由西瓜团队开源的视频播放器。...考虑到当前点播依旧是mp4居多,我们做了个大胆的假设:在播放器端加载视频、解析视频、转换格式,让不支持分段播放的mp4动态支持,这样就无须转换源视频的格式,服务器端也无其他开销。...直到最近,我们想完善文档并把播放器源代码开源出来给更多的视频从业者一个参考,我们一起交流学习,共同进步。...(mp4点播),播放器提供了较丰富的配置选项,如自动播放、贴图、音量控制、内置控件关闭等等,更多配置参考 运行效果 丰富的配置 选择器 视频源 尺寸 流式布局 自适应视频内容宽高 音量调节 封面图...音乐播放器 竟然还支持音乐播放…… 总结 官网还有很多实用的在线工具和示例Demo。大家可以去官网查看,总之一定会有你想不到的配置和功能。

    2.9K10
    领券