微信浏览器video播放视频踩坑

摘要:
X5视频播放器全屏=“false”视频不会覆盖屏幕。大多数型号与同一层的H5玩家尺寸相同,刘海为黑色。小米8等一些机型存在问题。光视频的视频格式是立体的,但使用光视频的影像实验仍然会自动进入全屏。(这里有大家伙的答案吗!!启用H5同层浏览器自动进入全屏。

video属性介绍

iOS的属性

playsinline

  • On iPhone, video playsinline elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
  • video elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
  • When exiting fullscreen with a pinch gesture, video elements without playsinline will continue to play inline.

来源-webkit官网-New video policiesfor iOS

iOS设置了这个属性就不会自动全屏了,但是Android微信和QQ有腾讯的限制,仍旧会自动全屏。

腾讯X5属性

x5-video-player-type

启用H5同层播放器

H5同层播放器:DOM可以浮在video上面

非H5同层播放器:video元素在最上层
( 微信里会有腾讯的广告 )

x5-video-player-fullscreen

全屏方式

视频播放时将会进入到全屏模式
如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)

来源-腾讯浏览服务-H5同层播放器接入规范

相关CSS

object-fit: 控制视频填充方式

object-position: 控制视频显示位置

问题

全面屏适配

x5-video-player-fullscreen="true"

视频会铺满屏幕,但是H5同层播放器的顶部栏位置在刘海下面。因此刘海位置的视频不会被顶部栏遮盖。

x5-video-player-fullscreen="false"

视频不会铺满屏幕,大多数机型和H5同层播放器大小一致,刘海处黑色。部分机型,如小米8,则有问题。

实际效果

是否启用同层播放器都会自动进入全屏,区别是全屏使用的播放器不同。

案例:

轻视频:示例

没有启用H5同层播放器,但播放不会自动进入全屏。网上有说法,视频格式是立体声的,不会自动进入全屏。轻视频的视频格式确实是立体声的,但使用轻视频的视频试验,仍旧会自动进入全屏。
(此处有没有大佬解答!!)

快手:示例

快手复制链接到微信,提示用浏览器打开。直接从快手APP分享到微信,才能在微信打开。

启用H5同层浏览器,自动进入全屏。

免责声明:文章转载自《微信浏览器video播放视频踩坑》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Apache JMeter录制HTTPS的方法及测试中常见问题解决JS读取粘贴板内容下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

如何用FFmpeg API采集摄像头视频和麦克风音频,并实现录制文件的功能转

之前一直用Directshow技术采集摄像头数据,但是觉得涉及的细节比较多,要开发者比较了解Directshow的框架知识,学习起来有一点点难度。最近发现很多人问怎么用FFmpeg采集摄像头图像,事实上FFmpeg很早就支持通过DShow获取采集设备(摄像头、麦克风)的数据了,只是网上提供的例子比较少。如果能用FFmpeg实现采集、编码和录制(或推流)...

Linux 视频设备驱动V4L2最常用的控制命令使用说明

Linux视频设备驱动常用控制命令使用说明设置视频设备属性通过ioctl来进行设置,ioctl有三个参数,分别是fd, cmd,和parameter,表示设备描述符,控制命令和控制命令参数。1. 控制命令VIDIOC_QUERYCAP功能: 查询设备驱动的功能 ;参数说明:参数类型为V4L2的能力描述类型struct v4l2_capability;str...

视频接口之AV、S端子、VGA、DVI、HDMI、DP

AV接口   复合视频接口(Audio、Video接口),曾是最普遍的一种视频接口,传输模拟音视频信号,几乎所有电视机、影碟机都有这个接口。它是音频、视频分离的视频接口,一般由三个独立RCA插头(又叫梅花接口、RCA接口)组成,其中V接口连接混合视频信号,为黄色插口;L接口连接左声道声音信号,为白色插口;R接口连接右声道声音信号,为红色插口。复合视频接口有...

截取视频第一帧图片

利用canvas的drawImage() API,第一个参数传video可以将视频当前帧画到画布上,(这里示例是第一帧), 以下代码需要注意:因为跨域限制,必须放到web服务器上运行(比如localhost),如果直接是在硬盘上的文件系统打开是不行(file://...)的。 另外,这里示例上用的是本地存了一个视频文件,实际项目时如果脚本和视频不在同一个域...

kurento用gstreamer推流 RTP to RTMP

基于Gstreamer的rtp转rtmp代码 flv不支持 音频 48000. 支持44k。flv不支持音频opus格式。   1,用ffmpeg推流到rtp。 srs的示例flv文件: ffmpeg -re -stream_loop -1 -i ./doc/source.200kbps.768x320.flv -an -vcodec h264 -...

video踩坑

查看以及修改video控件样式,原文地址:https://blog.csdn.net/z2181745/article/details/82531686 chrome浏览器,F12调出控制台左上角三点更多有个settings,点击进去之后有个“show user agent shadow DOM”勾选刷新页面,video控件就可以查看到元素啦; 一:在移...