H5 video播放视频，微信内小窗播放

最新推荐文章于 2025-01-06 17:36:15 发布

转载最新推荐文章于 2025-01-06 17:36:15 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/2ec6beddf4e5

文章标签：

#video

html5+css3 专栏收录该内容

25 篇文章

订阅专栏

针对腾讯微信，尤其是安卓版内置X5浏览器内核导致的视频强制全屏问题，本文提供了一种实现小窗播放的方法。通过将video元素转化为html5模式并添加特定属性，即可实现在微信中边看视频边互动的功能。

腾讯对微信尤其是安卓版本的内置浏览器内核做了一点点小处理，在X5内核下，播放会强制全屏，如果需要进行边视频边互动下则无法实现。

无论使用百度或者是科学上网google都没有解决办法，就连腾讯开发者论坛内相关帖子也都做了删除处理。

后面发现，如果要实现小窗播放，只需要把video转化为html5模式，转化方法如下。

<videostyle="object-fit:fill"preload="auto"id="liveVideo"width="100%"autoplay="autoplay"height="100%"controls=""webkit-playsinline="webkit-playsinline"playsinline="playsinline"x5-playsinline="x5-playsinline"x-webkit-airplay="allow"src="${src}"poster="${poster}"></video>

这里重点在于

webkit-playsinline="webkit-playsinline" playsinline="playsinline" x5-playsinline="x5-playsinline" x-webkit-airplay="allow"

加上后即可小窗播放

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏末_阳光依然耀眼

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

h5网站开发-微信浏览器无法自动播放视频的解决方式？

weixin_48596030的博客

12-04

3686

使用h5开发的网站，首页的banner是一个video视频，在PC端上和手机浏览器上都能正常播放，但是在手机微信浏览器里面视频是无法自动播放的。//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效。//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以。//监听用户点击屏幕（点击屏幕后即可播放视频）靠谱的方式是：用户必须要点击才能触发。

网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

weixin_44626952的博客

10-24

3682

最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配兼容，这些问题很是头疼；　　兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为大家详细讲解： PC端：　　PC端相应简单些，浏览器对<video>标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现； ...

参与评论您还未登录，请先登录后发表或查看评论

VideoPlayer解决H5在微信中播放视频弹窗问题的插件

08-11

VideoPlayer - 解决H5在微信中播放视频弹窗问题的插件

react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline？

zz130428的博客

12-06

1527

如果在react中这么样写：在react 15中将被渲染成：在react 16及之后的版本中将被渲染成：但这个会有限制，如果自定义的属性不是 , 或者，该属性依然会被忽略。所以目前可以这样添加 webkit-playsinline 属性：另外，还可以通过进行设置，比如：

H5的视频解决方案(1) —— mobile video内联播放

Joyce的前端日常

08-03

1万+

mobile内联播放 (1) webkit-playsinline和playsinline (2) android微信 (3) 最佳实践 (4) 其他尝试和存在问题 mobile内联播放内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。 &amp;amp;amp;amp;amp;amp;lt;video id=&amp;amp;amp;amp;amp;quot;video&amp;amp;amp;amp;

h5 video小窗内播放亲测有效

zengZeng的博客

08-01

5657

<video width="100%" height="100%" webkit-playsinline="true" x5-playsinline="x5-playsinline" playsinline="true" x-webkit-airplay="true" ...

html5播放器怎么小窗播放器,悬浮画中画播放器插件，边工作边用小窗口看视频的摸鱼神器...

weixin_34259909的博客

06-25

4548

悬浮画中画播放器插件，可以使用chrome提供的picture-in-picture api让网页上的视频以画中画小窗口悬浮在任意网页上播放，目前支持youtube，腾讯视频、爱奇艺以及各种使用html5播放器的网站。视频画中画模式，又叫做悬浮播放，即无需停留在视频播放页面，视频也能以小窗口置顶地方式出现在其他网页上。悬浮画中画播放器插件就是这么一个可以让你一边上班一边摸鱼追剧、追综艺、看直播的...

HTML5页面音视频在微信和app下自动播放的实现方法

09-28

随着移动互联网的快速发展，H5页面的使用场景越来越多，然而在移动设备上，音视频自动播放的实现较之桌面浏览器更为复杂。这主要受到移动浏览器对自动播放功能的限制，以及节约数据流量和提升用户体验的考量。在...

微信h5video不能自动播放和不显示问题解决

aaa123aaasqw的博客

07-12

7562

在微信中，由于安全和用户体验的考虑，自动播放视频（尤其是带有声音的视频）受到了严格的限制。特别是在iOS设备上，由于操作系统的限制，视频通常不能自动播放，除非它们被设置为静音（请注意，这仅适用于iOS设备上的Safari浏览器（包括微信内置的X5浏览器），并且需要用户之前与页面有过交互（如点击或触摸页面上的某个元素）。然而，在Android设备上，微信的X5浏览器可能会稍微宽松一些，但仍然不建议依赖自动播放功能，因为用户的浏览器设置和微信版本可能会影响这一行为。）且用户之前与页面有过交互（如点击或触摸）。

解决H5再微信内部打开视频不自动播放

热门推荐

u014063717的博客

03-17

3万+

1，下面是一个播放视频的最简单样例（controls属性告诉浏览器要有基本播放控件）<video src="hangge.mp4" controls></video>2，通过width和height设置视频窗口大小<video src="hangge.mp4" controls width="400" height="300"></video>3，预加载媒体文件设置preload不同的属性值

Html5实现的简易视频播放器

随意编程者

09-21

2039

HTML 代码是一个简单的包含视频播放的页面。

h5 video在微信中全屏播放退出后的坑

weixin_43139068的博客

06-03

2850

第一次做移动端的视频播放，遇到了很多bug。 1、video标签中的object-fit: 的属性设置不能为cover。否则会出现以下问题：播放前：点击播放 > 全屏 > 退出全屏后，整个视频页面浮动了起来，左侧能看出明显的问题：代码如下： ...

video 小窗播放（记）

1234567~~

04-24

3205

最近接触到移动端播放视频，着实是头疼了比较长的时间。特此来记录一波，怀念下当初（非常难忘）的日子首先先提醒小伙伴，h5其实是有自己的video播放的(这是最常规的用法)：关于video的参数可以戳这了解下：https://blog.youkuaiyun.com/huang100qi/article/details/53405876 （这个视频源也是找的别人的，但是忘了地址了，在此多谢） &...

自定义基于HTML5的video播放器—Customize your video player

weixin_34206899的博客

01-08

779

HTML5提供有新的video标签，可以不用编程直接播放video，只需要写几行简单的代码，如实现以下效果（带有control panel）只需要写如下代码： <body style="background-color:#8EEE5EE;"> <div id="big_wrapper"> <video src="Intro...

H5 video移动端小窗关闭

nzz_1214

06-23

2695

1.兼容： 2. 代码格式： <video src="movie.ogg" width="320" height="240" controls="controls"> 你的浏览器无法支持视频格式 </video> 兼容多个浏览器： <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source

HTML5 Video 在微信浏览器中播放问题

qq_35972609的博客

11-07

6901

一、监听video进入/退出全屏播放 IOS和Android有兼容问题 IOS中（IOS 微信浏览器是Chrome的内核） video.addEventListener('webkitbeginfullscreen', function() { // 进入全屏 video.play(); }) video.addEventListener('webkitendfullsc...

VideoPlayer：微信H5视频播放弹窗问题解决方案

VideoPlayer插件的使用非常简单，只需要在HTML中引入VideoPlayer插件的JavaScript文件，然后在需要播放视频的地方使用VideoPlayer插件的方法即可。VideoPlayer插件提供了丰富的配置选项，用户可以根据自己的需要进行...