解决微信浏览器video全屏的问题及黑边问题

原创 2018年02月12日 17:25:01

这是苹果和安卓在微信上的效果图:
这里写图片描述
这里写图片描述

<video src="./mp4/v1.mp4" x5-video-player-type="h5"  id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-player-fullscreen="true">
                    your browser does not support the video tag
                </video>

还有个问题,在android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。所以需要设置:object-fit: fill

#player{
                position: absolute;
                z-index: 1;
                margin: 0;
                padding: 0;
                object-fit: fill;
            }
版权声明:本文为博主原创文章,未经博主允许可以随便转载。 https://blog.csdn.net/a419419/article/details/79317908

解决微信浏览器video全屏的问题

在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之前加其他元素。  video id="videoID" webkit-playsinline="true"...
  • kepoon
  • kepoon
  • 2016-12-13 12:06:27
  • 21571

VideoView播放视频是出现黑边的问题

问题描述:在使用VideoView播放视频文件时,如果视频的分辨率较小就会出现视频跑偏(不在屏幕中央等情况) 可以通过重写VideoView来解决该问题 public class ...
  • Keep_Driving_XinYang
  • Keep_Driving_XinYang
  • 2016-01-29 15:39:07
  • 3427

微信小程序把玩(二十九)video组件

视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的重要属性:wxml 点击显示视频组件 ...
  • u014360817
  • u014360817
  • 2016-09-26 23:42:18
  • 12651

微信小程序把玩(三十五)Video API

电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath文档写的有点问题。主要属性:wx...
  • u014360817
  • u014360817
  • 2016-09-29 17:11:51
  • 7986

微信中的video属性设置

id="videoID"  src="video.mp4"  poster="loadbg.jpg" 视频封面  preload="auto"  x-webkit-airplay="allow...
  • qq_16494241
  • qq_16494241
  • 2017-03-14 17:56:20
  • 12274

微信浏览器视频video标签自动变成全屏的解决

微信内置的浏览器是QQ浏览器,个人感觉挺渣的(可能我使用不多对QQ浏览器无感)。 在微信浏览器里面使用video标签,一点击放视频会自动变成全屏,这个很蛋疼。 可以用一些H5的video属性:  ...
  • gwp08
  • gwp08
  • 2017-05-05 14:23:06
  • 3165

【微信小程序】video视频组件问题

前言将babel捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究babel代码...
  • i10630226
  • i10630226
  • 2017-12-02 16:02:39
  • 8694

微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题

做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步,自动全屏,不能全屏,不能自动播放,Android,IOS,巴拉巴拉……多到令人发指!今天整理了一下相关的解决办法,以上并不是全部解...
  • hf123lsk
  • hf123lsk
  • 2017-12-28 11:28:15
  • 2837

关于如何在微信里面让video不全屏播放《2》。

之前有关于如何让video在微信或者QQ浏览器里面不默认弹出全屏播放,可点击这里查看。 今天发现一个更简单的解决方法,加上一条属性即可。x5-video-player-type=”h5″...
  • aerchi
  • aerchi
  • 2017-04-10 17:30:02
  • 1989

关于html5新标签video在老ie上的兼容性

如果浏览器不支持 video ,将会把 video 中的提示内容显示出来,主要思想就是用flash版本的视频,替换掉video标签的内容        400" height="230">    ...
  • wjy199506
  • wjy199506
  • 2016-12-08 17:06:20
  • 1928
收藏助手
不良信息举报
您举报文章:解决微信浏览器video全屏的问题及黑边问题
举报原因:
原因补充:

(最多只允许输入30个字)