前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WebRTC播放器通过js Video标签拉流播放有时无法刷新视频画面的原因排查

WebRTC播放器通过js Video标签拉流播放有时无法刷新视频画面的原因排查

原创
作者头像
TSINGSEE青犀视频
修改2021-04-30 14:26:19
2.2K0
修改2021-04-30 14:26:19
举报
文章被收录于专栏:TSINGSEE青犀视频TSINGSEE青犀视频

对于WebRTC的研究,TSINGSEE青犀视频已经进入一个更深的阶段,不仅仅满足于播放或者分屏此类功能,还需要视频的连贯、自动刷新等功能。

在WebRTC播放器的开发中,我们使用的是js Video标签,在播放WebRTC拉到流时,有大部分几率出现下图状况,图像刷新不出来。

在界面中点击开始按钮,流可以播放出来。但是在代码添加video.onloadedmetadata方法,里面写入video.load()和video.play()函数,再多次刷新页面也会出现视频没有刷新出来的情况。

这里我们想到用定时器去刷新video标签,使用的是video.load()方法,通过这种方法测试后,视频流的播放确实可以刷新出来,但是会导致视频播放界面闪烁,造成卡顿的假象,体验不好。

因此我们上网查询了一下,导致这个问题的主要原因,是浏览器不允许用户对网页进行触发之前播放音频,而视频不受限制。但因为视频文件同时包含了音频,所以也同样被禁止。

这个问题比较常见的做法是在video标签加上muted属性,或者使用js加上video.muted = false,这样即可解决WebRTC的播放问题了。

WebRTC的播放仍需我们进一步的拓展,我们也会不定期将我们的开发过程通过博文进行记录,大家可以关注我们获取最新消息。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
实时音视频
实时音视频(Tencent RTC)基于腾讯21年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档