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播放视频踩坑的更多相关文章

  1. 手机浏览器自动播放视频video(设置autoplay无效)的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  2. 群晖synology的Video Station无法通过浏览器在线播放视频

    群晖synology的Video Station无法通过浏览器在线播放视频 http://www.hangge.com/blog/cache/detail_419.html

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

    解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...

  4. video播放视频以及相关事件

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  5. 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...

  6. 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  7. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

  8. HTML5 - 使用<video>播放视频

    ,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...

  9. 防止微信浏览器video标签全屏的问题

    在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...

随机推荐

  1. 牛客小白月赛13-H(单调栈+树状数组)

    题目链接:https://ac.nowcoder.com/acm/contest/549/H 题意:给一个柱状图,包括每个矩阵的宽度和高度,求能组成的最大矩阵的面积. 思路:显然最大矩阵的高一定为n个 ...

  2. 洛谷 P4779 单源最短路径(标准版) 题解

    题面 这道题就是标准的堆优化dijkstra: 注意堆优化的dijkstra在出队时判断vis,而不是在更新时判断vis #include <bits/stdc++.h> using na ...

  3. C++学习——在C文件中调用C++文件中的函数

    1.CPP文件中的内容 #include "mytest.h" #include <iostream> using namespace std; int add(con ...

  4. Java编程思想读书笔记 第十章 内部类

    非静态内部类作用: 最基本的作用:名字隐藏和组织代码 用例:内部类不访问外部类的元素时可以直接new.(bad style!) 用例:通过外部类的非静态方法返回内部类的引用,这样隐含了内部类对象和其对 ...

  5. 084、Prometheus 到底NB在哪里?(2019-05-06 周一)

    参考https://www.cnblogs.com/CloudMan6/p/7709970.html   本节学习Prometheus的核心,多维数据模型   比如要监控容器 webapp1 的内存使 ...

  6. React-native 底部导航栏(二)

    1.组件安装:npm install react-native-router-flux --save 2.定义菜单图片和文字: import React, { Component } from 're ...

  7. 传输层协议之TCP/UDP

    1.UDP UDP协议是面向无连接的,即不需要在正式传递数据前先链接双方,UDP协议只是数据报文的搬运工,不保证有序且不丢失的传递到对端,且UDP协议无任何控制流量的算法,UDP相对于TCP更加轻便. ...

  8. 制作jar包到本地仓库

    转载地址:http://blog.csdn.net/yzllz001/article/details/54529606 项目要用到支付宝的扫码支付,后台使用的maven 问了客服 官方目前没有 mav ...

  9. SpringCloud系列:前言

    准备写springcloud系列了,先吐槽下自己,之前准备把学到的东西写下来,都因为工作或自己太懒(主要还是懒),写了个开篇就GG了,这次springcloud一定会坚持写完.加油! 这里先说下我搭建 ...

  10. Activity安装与使用

    详细安装步骤:http://blog.csdn.net/oyzl68/article/details/16817963