解决微信中视频层级播放问题（附代码）

最新推荐文章于 2025-05-27 11:58:44 发布

原创最新推荐文章于 2025-05-27 11:58:44 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信视频播放 #h5播放器 #视频播放 #视频播放器标签

html5 同时被 3 个专栏收录

168 篇文章

订阅专栏

视频应用与直播

67 篇文章

订阅专栏

网页视频播放器

58 篇文章

订阅专栏

本文提供了在微信环境中解决视频层级播放问题的有效方案，通过特定的HTML5 video元素属性配置，确保了视频在微信内的正常播放体验。同时，分享了一系列与在线视频应用相关的技术文章链接，涵盖从播放器设计到直播实现的多个方面。

2018-11-20 长沙雨一直下气氛不算融洽/好冷

关键：x5-video-player-type="h5"

//微信解决视频层级播放问题
<div class="myvideo>
<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
<source src="test.mp4" />
</video>
</div>

解决微信中视频层级播放问题（附代码如上），over。

我的其他原创文章：

在线视频应用：flash播放器换html5播放器常见的问题汇总
HTML5之Video对象属性和方法（html5播放器设计必须研究的）
保利威HTML5播放器使用文档（参考备用）
如何做电脑游戏桌面录屏直播实现手机直接观看
原创教程：带ppt课件和讲师画面的教学视频录制完整教程
无广告的免费视频存储空间并提供视频上传转码的功能，很不错的哦
HTML5倍速功能视频播放器（加速2倍，1.5倍播放）
微信公众号直播有哪些不一样的玩法？

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿酷tony

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

🏆 前端领域优质创作者

07-30

1万+

微信小程序，激励式广告，产生收益，如何开通广告，广告ID，广告不显示不加载，报错，发布上线后不显示，接入广告，开通流量主插入广告功能，微信小程序视频广告，激励视频，广告位，流量主，全屏弹出视频看广告，小游戏激励广告，激励视频广告，在小程序中添加激励视频广告，流量变现，流量主激励视频，底部弹出激励视频弹窗，如何知道用户是否看完视频，实时检查是否观看完广告，播放次数限制，临时退出广告如何再次打开，插入激励广告，详细教程，激励广告视频长度如何修改，获取复活次数道具奖励补签额外金币激励，广告联盟，让用户看广告，视频

智能AR_VR内容创作平台的社交架构：架构师如何设计分享功能？（附微信_抖音集成方案）

热门推荐

weixin_51734087的博客

08-22

1万+

一个教你写视频播放的微信小程序

微信播放视频

weixin_30699955的博客

05-09

193

查了一圈，兼容，iso 和安卓微信浏览器播放的代码知乎有真相：https://www.zhihu.com/question/36423771?sort=created <video src="" controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto"...

微信小程序video组件列表播放视频wxvideos-master.zip

09-25

微信小程序video组件列表播放视频wxvideos-master.zip

微信源码，在线看电影源码

10-09

$url = "https://api.weixin.qq.com/cgi-bin/user/info?access_token=".ACCESS_TOKEN."&openid={$openid}&lang=zh_CN"; $userInfo = $this->https_request($url); $nickname = $userInfo['nickname'];//获取昵称 $sex = $userInfo['sex']; //获取性别 $city = $userInfo['city'];//获取用户所在城市 $headimgurl = $userInfo['headimgurl'];//获取用户头像 //换成小头像 $smallimgurl = substr($headimgurl,0,-1)."132"; //将图片保存到自己的服务器上 $file = file_get_contents($smallimgurl); //保存到SAE上 $storage = new SaeStorage();//初始化 $domain = 'images'; //指定存储文件的目录名 $imgName = $openid.".jpg"; $storage->write($domain,$imgName, $file); $headimgurl = $storage->getUrl($domain,$imgName);//读取某储存文件的URL $subscribe_time = $userInfo['subscribe_time'];//获取用户关注的时间

一文搞定opencv中常见的关键点检测算法(附代码)

3D视觉工坊

07-27

868

作者：K.Fire | 来源：计算机视觉工坊前言角点时图像中存在物体边缘角落位置的点或者一些特殊位置的点，角点检测(Corner Detection)是计算机视觉系统中获取图像特征的一种方法，是运动检测、图像匹配、视频跟踪、三维重建和目标识别的基础。本篇文章将介绍opencv中常用的几种角点检测方法的原理和基于C++的实现。一、Harris角点检测Harris角点原理：设置一个矩形框，将这个矩形框...

微信小程序B站首页设计与原生开发实战教程

在本项目中，开发者通过使用微信小程序内置的视图容器（如view、scroll-view、swiper）、基础组件（image、text、button）以及页面生命周期管理机制，精准还原了B站首页复杂的导航栏、轮播图、分区推荐、视频卡片流...

【用unity实现100个游戏之8】用Unity制作一个炸弹人游戏（附项目源码）

向宇

09-04

2599

我们将在这个视频中，学习如何在Unity中制作《炸弹人心》，《炸弹人》是—个游戏系列，最初于1983年7月在日本发行，《炸弹人》的游戏玩法包括策略性地放炸弹，在一定时间后以多个方向爆炸，以摧毁障碍物和杀死敌人。本文重点介绍了实现瓦片地图精灵动画的方法，你可以用许多不同的方式自定义游戏，想出独特的游戏模式并建立自己的关卡。先来看看实现的最终效果。

微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

01-03

本文介绍了微信小程序的开发，主要包括图片、录音、音频播放、音乐播放、视频、文件，具体如下：图片： wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。 OBJECT参数说明：注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。示例代码： wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'

H5/微信 Video标签移动端播放问题

qq_17627195的博客

03-15

4913

里面的自动播放只能用于IOS，不能用于安卓（目前来说）这个参数不能用，用了的话安卓就失效了。

微信浏览器H5部分ios机型不能自动播放视频，解决方案

ZeBo_jiang的博客

04-16

2503

使用uniapp的video组件制作视频播放，由于浏览器限制，视频不能自动播放

研究大佬--video在微信浏览器下的层级过高问题(安卓：小米出现的问题)

qq_40273285的博客

10-30

8185

还是上一篇的那个视频页面，真的是很烦需求：这次需要判断网络状况，当非wifi状态下（即4g）出现提示弹框《当前处于移动数据网络》设备：iphone7plus，ipad4，iphone5，安卓（小米），微信开发者工具涉及元素及属性：div，模态框，display，js 视频格式：mp4 问题：在除安卓设备（小米）以外，其他设备提示弹框正常渲染；安卓（小米）也会被渲染，但是被vide...

video在微信端层级问题及属性介绍

small_animation的博客

04-29

730

项目过程中遇到的问题，视频在微信端点击播放再次返回，它的层级会最高，会把后面出现的弹框等都挡住

解决手机端视频播放后层级混乱的问题

weixin_30378623的博客

12-06

775

之前做过一个项目，其中一项功能是查看社交信息流帖子。很多帖子中都包含视频，手机上播放视频后，会有层级混乱的问题。当时的解决方案是动态的将视频放入Iframe中。以后如果有其他的解决方式会追加进来。视频使用的是16:9的比例。示例： HTML： <div id="video" class="video-wrap"></div> CSS： .vi...

html5视频播放器和微信小程序如何实现视频的自动播放功能

阿酷tony

05-27

1757

在HTML5中实现视频自动播放需设置autoplay和muted属性（浏览器策略要求静音才能自动播放），并可添加loop循环播放、playsinline同层播放等优化属性。微信小程序通过video组件的autoplay属性实现自动播放，同时支持全屏按钮、弹幕功能、循环播放等丰富配置，但需注意浏览器交互限制可能影响自动播放效果。两者都提供了完善的事件监听机制来响应播放状态变化。

h5视频播放方案（优化版）

qq_27984747的博客

01-17

8106

，我使用了三种办法来解决ios、安卓在微信浏览器和其他浏览器播放视频的问题，虽然能够解决问题，但是这种办法太繁琐了，于是这次对上次的方案进行了优化，现在只需要使用一种办法就可以实现视频的播放。：把首页和视频放在同一个页面，一开始让视频隐藏，点击开始时显示并播放视频。：在之前的方案中，ios端的微信浏览器，是用canvas来绘制video，用ctx.drawImage(video,0,0,widht,height)去循环更新canvas画布，实现播放视频的，微信浏览器出现了黑屏的现象？