android x5视频播放器,巨坑: 如何在微信端(x5内核)实现视频的内联播放?

本文介绍了如何在微信端的直播项目中,结合TCPlayer播放器实现在手机上一边看直播一边评论聊天。通过研究,发现关键在于video标签的playsinline属性,该属性使得视频能在微信中内联播放,避免了全屏问题。在解决过程中,作者遇到TCPlayer缺少playsinline配置的问题,最后成功实现需求。
摘要由CSDN通过智能技术生成

前言

之前的项目是基于微信端的,接入了直播的板块,要求在手机上可以一边看直播一边评论聊天。当时研究了两天,才慢慢清晰,记录一下。

开始

先来看一张设计稿,清晰明了

197c4c9d56d3

QQ图片20190515170756.png

整个播放页面可以划分为两大部分,上面是视频,下面是聊天互动区域。

由于是直播,视频的实时播放格式的.m3u8格式的,播放视频使用了腾讯的TCPlayer播放器 ,根据它提供的API进行视频播放。

实践

使用TCPlay播放器时,video标签是播放器为你创建的,开发者只需要根据它的文档,提供相应的参数配置即可。

配置之后,在浏览器上播放是正常的,在android手机上播放就全屏了

在微信中打开链接,直接进入全屏播放了,聊天互动与观看直播不能兼得~

怎么办呢?查资料,找相似的案例,分享一下

经过多番摸索,找到最佳的解决方式:

这是最终生成的简化后的video标签,就是这个playsinline属性,实现了我们的内联播放效果。我之前走过一些坑,是因为TCPlayer自身提供了部分x5的配置项,但是这个playsinline并没有,而且video标签是TCPlayer生成的。

本文为转载文章,如有侵权请联系本人,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值