微信浏览器video播放视频踩坑
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
全屏方式
视频播放时将会进入到全屏模式
如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)
相关CSS
object-fit: 控制视频填充方式
object-position: 控制视频显示位置
问题
全面屏适配
x5-video-player-fullscreen="true"
视频会铺满屏幕,但是H5同层播放器的顶部栏位置在刘海下面。因此刘海位置的视频不会被顶部栏遮盖。
x5-video-player-fullscreen="false"
视频不会铺满屏幕,大多数机型和H5同层播放器大小一致,刘海处黑色。部分机型,如小米8,则有问题。
实际效果
是否启用同层播放器都会自动进入全屏,区别是全屏使用的播放器不同。
案例:
轻视频:示例
没有启用H5同层播放器,但播放不会自动进入全屏。网上有说法,视频格式是立体声的,不会自动进入全屏。轻视频的视频格式确实是立体声的,但使用轻视频的视频试验,仍旧会自动进入全屏。
(此处有没有大佬解答!!)
快手:示例
快手复制链接到微信,提示用浏览器打开。直接从快手APP分享到微信,才能在微信打开。
启用H5同层浏览器,自动进入全屏。
微信浏览器video播放视频踩坑的更多相关文章
- 手机浏览器自动播放视频video(设置autoplay无效)的解决方案
1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...
- 群晖synology的Video Station无法通过浏览器在线播放视频
群晖synology的Video Station无法通过浏览器在线播放视频 http://www.hangge.com/blog/cache/detail_419.html
- 解决微信浏览器video全屏的问题
解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...
- video播放视频以及相关事件
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
- 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub
最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...
- 大事记 - 安卓微信浏览器 video 标签层级过高
// 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...
- HTML5 - 使用<video>播放视频
,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...
- 防止微信浏览器video标签全屏的问题
在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...
随机推荐
- 牛客小白月赛13-H(单调栈+树状数组)
题目链接:https://ac.nowcoder.com/acm/contest/549/H 题意:给一个柱状图,包括每个矩阵的宽度和高度,求能组成的最大矩阵的面积. 思路:显然最大矩阵的高一定为n个 ...
- 洛谷 P4779 单源最短路径(标准版) 题解
题面 这道题就是标准的堆优化dijkstra: 注意堆优化的dijkstra在出队时判断vis,而不是在更新时判断vis #include <bits/stdc++.h> using na ...
- C++学习——在C文件中调用C++文件中的函数
1.CPP文件中的内容 #include "mytest.h" #include <iostream> using namespace std; int add(con ...
- Java编程思想读书笔记 第十章 内部类
非静态内部类作用: 最基本的作用:名字隐藏和组织代码 用例:内部类不访问外部类的元素时可以直接new.(bad style!) 用例:通过外部类的非静态方法返回内部类的引用,这样隐含了内部类对象和其对 ...
- 084、Prometheus 到底NB在哪里?(2019-05-06 周一)
参考https://www.cnblogs.com/CloudMan6/p/7709970.html 本节学习Prometheus的核心,多维数据模型 比如要监控容器 webapp1 的内存使 ...
- React-native 底部导航栏(二)
1.组件安装:npm install react-native-router-flux --save 2.定义菜单图片和文字: import React, { Component } from 're ...
- 传输层协议之TCP/UDP
1.UDP UDP协议是面向无连接的,即不需要在正式传递数据前先链接双方,UDP协议只是数据报文的搬运工,不保证有序且不丢失的传递到对端,且UDP协议无任何控制流量的算法,UDP相对于TCP更加轻便. ...
- 制作jar包到本地仓库
转载地址:http://blog.csdn.net/yzllz001/article/details/54529606 项目要用到支付宝的扫码支付,后台使用的maven 问了客服 官方目前没有 mav ...
- SpringCloud系列:前言
准备写springcloud系列了,先吐槽下自己,之前准备把学到的东西写下来,都因为工作或自己太懒(主要还是懒),写了个开篇就GG了,这次springcloud一定会坚持写完.加油! 这里先说下我搭建 ...
- Activity安装与使用
详细安装步骤:http://blog.csdn.net/oyzl68/article/details/16817963