挖坑指南: 如何在微信端（x5内核）实现视频的内联播放？

最新推荐文章于 2025-03-12 15:21:15 发布
置顶 最新推荐文章于 2025-03-12 15:21:15 发布
阅读量4.3k 收藏 3
点赞数 4
分类专栏： 挖坑指南 文章标签： 微信播放视频 视频内联播放 playsinline x5-playsinline x5播放video
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39015132/article/details/82958916
版权

前言

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

开始

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

设计稿

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

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

实践

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

参数列表：https://cloud.tencent.com/document/product/267/7479#.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8

配置之后，在浏览器上播放是正常的

最低0.47元/天 解锁文章
移动端video视频内联播放兼容方案
linxner的博客
04-01 2956
该方案的主要问题是解决安卓播放时会自动全屏的问题，苹果的内联播放还是比较简单的。 <video id="video" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-playe...
移动端 使用X5 内核 html自动播放视频
码可菠萝的博客
09-25 1万+
1.首先集成配置X5内核1. 集成SDK下载链接： https://x5.tencent.com/tbs/sdk.html如果是Android Studio用户将 相应的jar包放在 jniLibs 文件夹下，如果是Eclipse用户，放在libs文件夹下即可。x5暂时不提供64位so文件，为了保证64位手机能正常加载x5内核，如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录：
微信内视频及普通浏览器内视频内联播放方案H5inlinevideo
08-11
微信内视频及普通浏览器内视频内联播放方案（H5 inline video）
微信升级后不再使用x5内核，debugx5.qq.com打不开，如何开启微信调试？
qq_42720845的博客
02-07 2576
chrome浏览器打开 chrome://inspect/#devices，在左侧page栏下，会看到 WebView in com.tencent.mm。微信版本升级后，不再使用x5内核（升级为了xweb内核），原有的通过debugx5.qq.com开启微信调试的方式不再生效，无法打开vConsole查看页面请求等信息。其实以上方案就是最常用的真机调试h5页面的方式，只是多了需要打开http://debugxweb.qq.com/?等于说微信内原有的x5调试方案没了（可能也有，只是我不知道）。
关于video标签属性你了解多少？
最新发布
weixin_47389477的博客
03-12 374
关于video标签,在W3Cschool中有些比较属性的属性，但是一些别的属性，你了解多少？：在ios设备上是否全屏播放"：作用是允许视频在腾讯X5浏览器中内联播放，不设置此属性的话，视频默认在全屏模式下播放：playsinline属性主要用于控制视频在iOS设备上的播放模式，防止视频在全屏模式下播放，而是强制视频在页面内联播放‌。这个属性最初是由WebKit浏览器引擎（如Safari）实现的，并不是所有浏览器都支持。然而，随着移动设备的普及和视频播放需求的增加，越来越多的浏览器开始支持类似的功能‌。
关于新版微信内核x5问题
weixin_44018989的博客
03-01 7286
** 关于新版微信内核x5问题 ** 此文连接上个文章 https://editor.csdn.net/md/?articleId=115495850 对于新版本的微信，如果直接访问debugx5.qq.com会出现错误界面，原因是因为微信关闭了x5内核，只需要开启之后在进入即可 还是打开任意聊天界面，在打字区域输入 debugmm.qq.com/?forcex5=true 然后发送消息，点击发送出去的消息即可，然后直接返回就打开了 之后就是输入debugx5.qq.com，与上面操作一样，打开调试功能即可
微信X5内核调试
weixin_40977578的博客
09-01 1万+
准备工作：Chrome浏览器，安卓手机，数据线，梯子 一、在Chrome地址栏中输入chrome://inspect ，出现以下界面： 二、手机微信端打开http://debugx5.qq.com,会出现以下几种情况： ①：若出现无法打开debugx5！（debug5页面仅在使用了X5内核时有效,由于当前没有使用X5内核,无法打开 debug5!尝试进入 Debug tbs安装或打开Ⅹ5内核）， 则点击进入 Debug tbs安装或打开Ⅹ5内核 ，进入后出现如下界面： 点击“安装线..
微信调试、手机QQ调试、Qzone之x5内核inspect调试解决方案
07-22 1万+
一、微信webview调试方法 整个调试链路示意图如下： 具体调试环境搭建，请看下面流程分解（以微信调试为例进行阐述） 1、安装微信新版本，使用应用宝进行安装微信最新版，如下图： 2、下载TbsSuiteNew.apk，安装到手机中。【下载地址：http://res.imtt.qq.com///tbs_inspect/TbsSuiteNew.zip】，打
通过青年大学浅析微信x5内核
weixin_44018989的博客
04-07 5287
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
微信内置浏览器缓存清理及关闭微信默认的X5内核
树上骑个猴的博客
01-29 1万+
之前做过很多公众号的项目，项目写完后给客户看项目，客户一而再再而三的修改元素向左挪1px，向右挪2px。改好之后让客户看，客户说我特泽发克，你啥都没有修改，你竟然骗我！！！ 这其实就是微信内置浏览器的缓存在作祟啦，那么如何清理微信内置浏览器的缓存呢？ 你们是否知道 ios版微信 和 android版微信 的内置浏览器的内核是不一样的呢？ android版微信内置浏览器（X5内核） 在安卓版微信内打开链接 http://debugx5.qq.com 拉到调试页面的最底端，勾选上所有的缓存项目，点击清除。
神经病啊！——微信同层播放器接(踩)入(坑)总结
weixin_34032792的博客
03-21 456
估计踩过微信视频这个坑的，内心都想说上一句： “神经病啊！” 而微信也终于出了个《H5同层播放器接入规范》，算是正常点了……好了闲话不说，下边进入正题： 1. <video>标签里的内联播放相关属性 微信在video标签上新增了一些x5的私有属性，分别是： x5-video-player-type启用同层播放。取值固定为'...
禁止在微信端播放视频自动全屏播放demo（安卓苹果通用）
03-09
禁止在微信端播放视频自动全屏播放demo（安卓苹果通用代码）
html5 video微信浏览器视频不能自动播放
weixin_34242509的博客
05-07 4081
2019独角兽企业重金招聘Python工程师标准>>> ...
微信x5内核浏览器大坑
qq_34374058的博客
02-06 1万+
1.清理缓存cookies： 普通方式清不掉（包括牛逼的各种清理软件）访问：debugx5.qq.com 拉到最下方，即可清理 2.监听浏览器自带返回按键：  $window.addEventListener("popstate", function(e) {   alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  }, false);  3.分
Vue项目解决微信浏览器下拉“网页由xxx提供，QQ浏览器X5内核提供技术支持
weixin_43209953的博客
01-23 4768
外层html、body等设为不可滚动,ps:#app为vue项目基础DOM;.wx-pages为App.vue内部路由 html,body,#app,.wx-pages{ padding: 0; margin: 0; height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; ...
强改微信内置浏览器——让x5内核滚粗
热门推荐
feisher
11-11 8万+
起因基于不可告人之原因，国内很多厂商喜欢二次定制，系统就不说了，腾讯团队愣是高出个X5内核，内核都干了什么我们就不去追究了，关键是网页载入速度变慢了，这能忍……emmmm强改原理利用腾讯提供的TBS调试页面，删除TBS内核，强制使用系统内核过程1.调起调试页面debugtbs.qq.com通过发送消息到微信，或者如下图（我直接使用传输助手）2.进入调试页面 （点击对话中的网址）3.强制使用系统内核
微信X5调试
汪敏的博客
09-08 3560
微信X5调试微信X5调试 微信X5调试
微信浏览器内核-------QQ浏览器X5内核
gz4524的博客
04-02 2727
也就是说微信、手机QQ内置浏览器都是腾讯的QQ浏览器。 X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。 如何查看：进入微信进入朋友圈或者公众号浏览器内容页，摁着页面下拉，在上部就可以看到内核版本了； css兼容性。 1. flex布局在 iphone6 plus的手机时，无法生效。（解决： displ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值