首页
学习
活动
专区
工具
TVP
发布

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

360视频前端团队围绕HEVC前端播放及解密实现了一套基于WebAssembly、WebWorker的通用模块化Web播放器,在LiveVideoStackCon2019深圳的演讲中360奇舞团Web...随着公司的业务发展,后面也负责了IoT业务前端支持,最近两年主要配合360视频的一些Web前端支持工作。基于HEVC的播放器,实际上就是来源于我们最近做的一个叫QHWWPlayer的播放器。...HEVC并不是一个新鲜事物,但对于我们团队来说,Web前端的HEVC播放器一直是个亟待优化的领域。虽然移动终端或PC端HEVC播放器已经遍地开花,但在Web端仍旧有很多地方需要改进。...若索引文件为后置,如果播放器直接下载了一部分数据就直接丢给FFmpeg解码器进行解码,由于FFmpeg解码器无法获取索引,当然也就无法解码成功。...若在这里播放器不做判定支持,则存在由于音画同步控制依赖音频帧视频帧时间戳比对,但没有音频帧数据的原因导致无法正常播放,而播放器使用者能进行主动控制则可以避免该问题。

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

新知 | 腾讯视立方播放器技术实现与应用

本期我们邀请了腾讯音视频技术导师——李正通,为大家分享腾讯视立方播放器技术实现与应用。...腾讯视立方播放器技术背景 腾讯视立方播放器基于腾讯视频同款内核打造,完美融合了腾讯视频的能力,视频兼容性、适配能力以及播放稳定性均大幅提升,解决了系统引擎各种播放异常问题。...兼容适配:主流视频格式协议100%覆盖,对于大量在系统播放器播放异常的非常规编码的视频也能可靠稳定的播放。 多平台支持:支持安卓、iOS、 Web以及Flutter等多种平台。...腾讯采用的优化思路是使用不超过两个播放器实例,并通过服务去管理播放器的复用与使用。...因为在播放器播放之前,无法知道多码率M3U8中有几个码流,所以开发者可以在启播前指定优先播放的视频分辨率。

2.3K30

EasyGBS播放器全屏后无法展示台组件的调整方法

去年EasyGBS最新增加了语音和台控制功能,基于操作性考虑,我们也将台控制和语音对讲功能集于一个控制面板当中,如下图: image.png 正常情况下,如果视频全屏显示,也可以直接在视频右侧显示组件...,但在我们的日常测试中,有时会发现EasyGBS播放器全屏后无法展示台组件。...image.png 点击播放器全屏,全屏的是播放器组件,实际上播放器台是分开的,播放器不包含台,当播放器全屏后属于最高层级,以至于遮挡了台。...image.png 实际上,台只是被遮挡,我们修改时要取消这个遮挡。找到播放器组件和台组件,给两个组件定义上ID属性。...image.png 在页面加载完成后执行如下代码: image.png 将层级调整后,再次预览播放器界面,可以看到台已经在播放器上方了: image.png EasyGBS更新新版以来,我们做了不少功能上的改进

73030

TRTC Web SDK + 播放器 Web SDK 实现 CDN 直播观看

播放器SDK 播放器SDK属于免费的产品,可以集成到Web端,安卓和iOS,播放器 SDK 基于腾讯强大的后台能力与 AI 技术,为客户提供视频点播和直播播放能力的强大播放载体。...播放器 SDK 深度融合腾讯点播、直播服务,拥有流畅稳定的播放性能,集广告植入、数据监测等功能于一身,覆盖多类应用场景,满足客户多样需求,让客户轻松聚焦于业务发展本身,畅享极速高清播放新体验。...播放器 SDK 目前处于公测阶段,为了获取更好的产品功能及播放性能体验,建议结合腾讯点播和直播使用。...Web端针对不同的业务场景和使用场景,分为两个播放器:1、点播超级播放器 2、TCPlayer Lite 要在Web端实现CDN直播观看,需要使用TCPlayer Lite。...该播放器仅支持传入地址播放,不关联业务,适用于轻量化 Web 视频播放场景,支持点播和直播,支持通过 CSS 定制化界面。 具体介绍请参见:使用文档

6.3K00

视频融合平台EasyCVR集成播放器,但是无法播放该如何解决?

EasyCVR视频融合平台基于边端一体化架构,兼容性高、拓展性强,可支持多类型设备、多协议方式接入,包括国标GB/T28181、RTMP、RTSP/Onvif协议,以及厂家的私有协议,如:海康Ehome...图片有用户反馈,EasyCVR在非按需模式的情况下,集成flv视频流到自己的平台6路轮播时,会出现其中几路不能播放的现象,但是返回EasyCVR平台后刷新一下又可正常播放了。...图片收到反馈后,技术人员立即开展排查解决,以下为解决步骤:1、首先,从视频流的保活和现场视频流内核有没有推或流的不稳定性来排查,结果都是正常的;2、排除掉视频流的关系后,再排查播放器,排查得出播放器没做重连机制...;3、其原因应该是现场流没收到流,播放器没做重连机制;4、继续排查发现,原来是这个flv浏览器同源策略导致的,只能播放6路,切换的时候上次的流没有停掉,因此导致无法播放;5、找出原因后,我们建议用户用ws_flv...来播放,即可解决问题。

73740

网站插入 Aplayer网易 音乐播放器

: list, random volume 0.7 播放器音量 lrctype 0 歌词格式类型 listfolded false 指定音乐播放列表是否折叠 storagename metingjs...LocalStorage 中存储播放器设定的键名 autoplay true 自动播放,移动端浏览器暂时不支持此功能 mutex true 该选项开启时,如果同页面有其他 aplayer 播放...,该播放器会暂停 listmaxheight 340px 播放列表的最大长度 preload auto 音乐文件预载入模式,可选项: none, metadata, auto theme #...ad7a86 播放器风格色彩设置 使用音乐平台提供插件 不使用Aplayer播放器; 以网易为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链。...type=0&id=5068325488&auto=0&height=430"> 效果: image.png 后记 toc点击后点击后无法跳转问题,原因是aplayer播放器与toc

3.2K30

花椒 Web 端多路音频流播放器研发

一、背景 语音交友直播间 Web 端使用 WebRTC (Web Real-Time Communications) 实现多路音频流传输的播放。...但由于服务等原因,看播端我们需要改成 HTTP-FLV 或 HLS 协议的媒体服务。...所以我们使用 Web Audio API 开发个播放器。 三、实践 流程: 对音频流解封装 提取音频数据并 decode 合并多路音频数据并播放 获取音频的可视化数据 数据流程图 ?...以下只介绍 HTTP-FLV (编码为 H.264 + AAC) 的直播流播放器研发。 解析音频前,需要知道的知识点 数字音频 计算机以数字方式将音频信息存储成一系列零和一。...; 当数据被全部读完前,每次我们只获取一个 chunk,这个 chunk 是无法直接播放音频的。所以我们需要进一步对每个 chunk 解封装。提取音频数据。

3.1K20

如何解决EasyGBS播放器无法被选中进行台控制的情况?

EasyGBS国标视频服务平台的灵活性非常强,它不拘泥、不受限于摄像机的品牌厂商及其配套平台,只要是网络监控摄像机IPC、硬盘录像机NVR、且设备支持标准的GB/T28181协议,都可以通过标准化协议注册到平台进行直播...、录像检索与回看、台控制等操作。...在台操作上,支持调整设备的预置位、控制镜头焦距等等。 近期我们在使用中,出现EasyGBS播放器无法被选中进行台控制的情况。...经过排查发现是由于@click事件并没有触发,因此无法选中,导致无法进行对台的控制。 进一步深入排查,发现是由于播放器点击事件“阻止事件冒泡”,导致的上述情况。

20010

花椒web端实时互动流媒体播放器

播放视频时,调用中间件video.js来输出的Player来实现播放,这个Player根据视频地址的结尾字符来初始化播放器:new HLS 或者 flvjs.createPlayer,对外提供一致的接口...,对HLS.js和FLV.js创建的播放器进行调用。...和 FLVPlayer; NativePlayer 是对浏览器本身播放器的一个再包装, 使之能和FLVPlayer一样, 相应共同的事件和操作; 大家最主要使用的还是FLVPlayer这个播放器;...当主持人提出问题后, 后台人员会在后台填写问题, 经视频SDK传输给360视频, 视频对视频进行处理, 加入视频补充增强信息, 当播放SDK收到带有SEI信息的视频后, 经过解码去重, 将其中包含的信息传递给综艺直播间的互动组件..., 所以本播放器直接将SEI信息(Uint8Array格式数据)经GET_SEI_INFO事件抛出, 用户需自行按照己方视频给定的格式去解析信息; 另外注意SEI信息是一段时间内重复发送的, 所以用户需要自行去重

3.9K43

EasyCVR内置的EasyWasmPlayer播放器分发RTMP流在VLC中无法播放的原因分析

近期有用户在调用EasyCVR接口获取转发的实时流遇到VLC不能播放的情况。...接口定义如下: 在调用此接口时protocol传值为RTMP,得到如下返回: 接着用VLC播放就出现异常情况,发现无法播放,如下图: 但是在EasyCVR平台却发现可以播放: 这时我们就可以发现上图中...EasyCVR系统选择的是EasyWasmPlayer播放器,这个播放器是TSINGSEE青犀视频开发的H.265播放器,专门用来播放H.265编码格式的视频流。...问题就在这里,因为vlc不支持RTMP扩展H.265拉流,上图中EasyCVR默认播放的是FLV协议的流。...如果是需要客户端播放的话,可以用EasyPlayer RTMP专业版播放器,它支持全终端适用,如果是需要WEB播放的话,由于FLASH插件已经被各浏览器厂家摒弃,因此现在只能是通过转成HTTP协议才可以完成

85310

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

本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。 ?...如果不设置autoplay属性,必须是用户单击播放按钮才会播放音频文件。...loop:loop:(循环播放)告诉浏览器在音频到达末尾时,再从头开始重新播放 preload:auto、mete、none:告诉浏览器如何下载音频 auto:让浏览器下载整个文件,以便用户单击播放按钮时就能播放...二、打造自己的播放器 我们使用JavaScript控制播放控件的行为(自定义播放控件),实现如下功能: 利用HTML+CSS制作一个自己的播放控件条,然后定位到视频最下方 视频加载loading效果...播放、暂停 总时长和当前播放时长显示 播放进度条 全屏显示 1.播放控件 视频播放器 <div class

4.6K40

一个播放器村的故事

近段时间逛村时发现好多音乐因为版权问题已经不支持“生成外链播放器”了,作为村铁粉的我听歌只用村,网站上的音乐也基本全部用的村的。...id=110097 如这个地址下的音乐,点击图标下的“生成外链播放器”,会弹出“由于版权保护,无法生成外链”。...右键点击“生成外链播放器”,然后点击“检查”,里面会有一段代码,我们复制其中一小段 data-href=”/outchain/2/110097/” 替换上面那个地址后面部分后变成下面地址 https:/...可以试试播放器APlayer, 其实好多朋友有装此款插件,而老王本人喜欢折腾代码不喜欢装插件。APlayer是一款非常简单易用的播放器,加上外观与村相似,第一眼看上就喜欢上了。...引入播放器 Code Source <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css

77220

腾讯音视频播放器又上新啦!短视频秒开组件、加密画中画等功能让音视频播放更专业!

那么本文就来分享一下关于腾讯音视频播放器新品的使用体验,教大家如何快速接入相关的新功能,让音视频播放器有更上一层楼的功能和效果。...腾讯音视频播放器根据腾讯音视频官方的消息显示,播放器SDK是音视频终端SDK的子产品之一,它采用“腾讯视频”同款播放内核,经过内部业务长期优化和海量服务验证,对比系统播放器性能可提升20%-50%,...截止这里,关于短视频秒开组件接入使用就介绍到这里,但是需要说明一下,这里只是对腾讯音视频播放器新增的短视频秒开组件的部分使用体验,也不完整,所以如果大家想要深度去学习和使用,还请移步腾讯音视频播放器官方文档查阅学习...高级画中画组件接入教程上文也提到了由于web端不涉及短视频秒开的功能,这里以移动端的使用来讲,而且腾讯音视频播放器的画中画功能目前只支持iOS端,所以这里还是以iOS端的具体使用来分享。...无论是个人开发者还是企业用户,通过使用腾讯音视频服务,都能够轻松实现高质量的音视频应用。同时也希望本文对你在音视频播放器的使用接入方面有所帮助,快来尝试腾讯音视频播放器的新功能吧!

33152

实时音视频开发学习7 - CDN直播与回放

配置CNAME 配置CANME完成后需要15分钟生效,若设置多层CNAME,直播无法有效解析结果。 腾讯设置方法: 登录腾讯控制台,搜索域名管理或DNS解析DNSPod进入域名服务控制台。...Web端对接播放 腾讯web超级播放器TCPlayerLite是为了解决在手机和PC浏览器上播放音视频流的问题,使得能够在不依赖用户安装APP的情况下就能在朋友圈和微博等社交平台进行传播。...准备工作 播放页面引入TcPlayer脚本 如果在域名限制区域,则引入下面连链接,但是直接在本地网页是无法调用,web播放器无法处理跨域问题。 防止播放容器,并设置ID属性。...清晰度转换 播放器本身是没有能力去改变视频清晰度的,视频源只有一种清晰度,称之为原画,而原画视频的编码格式和封装格式多种,Web无法支持播放所有的视频格式,如点播支持以 H.264 为视频编码,MP4...为此,腾讯提出使用TXLivePlayer播放器来降低延时效果。 左侧iPhone 6s使用了TRTC SDK进行直播,右侧小米使用TXLivePlayer播放FLV协议的直播流。

3.1K61

点盾加密播放器缓冲解决方法

我们在播放视频的过程中或多或少都遇到过缓冲的情况,像网络不好、播放器版本不对又或是文件格式有问题等,都有可能会引起缓冲,那么在使用点盾播放器时,出现缓冲也是因为这些问题引起的吗?...“迈克菲”了,因为它会误删下载的某一文件,导致点盾播放器无法正常播放,那么以迈克菲为例,小编今天来给大家讲一下如果遇到缓冲情况我们应该如何来解决吧!...图片 一般来说出现这种提示,我们首先要判断播放器版本和网络是否为正常,其次检查下视频文件是否为dolit/dolit2结尾的文件,或者是不是正常的mp4文件。...因为作为加密专用播放器来说,点盾不仅能播放对应的加密文件,还能够播放常规的mp4文件。有些老师课程中可能会包含其他格式的文件,但学员可能没有注意到,并且以为也是使用点盾打开,这就会出现上图的提示。...重新下载播放器进行安装进行以上操作后,文件就可以进行播放了哦~所以遇到缓冲时,我们可以根据以上的方法先来进行自检和操作~

54340

EasyPlayer客户demo点击全屏无法实现播放器的全屏调整优化

EasyPlayer播放器是TSINGSEE青犀视频维护的一个RTSP播放器项目,EasyPlayer遵循了标准流媒体码流协议,进行实时播放以及码流录制,在数据流的播放速度以及画质的解码显示上均做了大量深度的优化...不少用户采用EasyPlayer来搭建播放器Demo,搭建测试过程中,在demo上点击全屏只能是当前页面全屏,无法做到播放器全屏,这显然是不符合使用习惯的,因此我们对该处问题进行优化。...以上问题的全屏代码如下: 从上可知获取的dome是个数组,当点击事件触发时不能使其全屏,因此我们需要根据点击的按钮判断想要全屏的demo元素,更改代码如下: 更改后全屏效果如下: EasyPlayer播放器功能全面

1K10
领券