不废话，上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>微信视频播放全屏</title>

</head>

<body>

    <div id="video" class="video " style="width: 100%; height: 100%;">

        <video id="my_video" style="object-fit: fill; width: 100%; height: 100%;"

            preload="load"

            playsinline="true"

            webkit-playsinline="true"

            x-webkit-airplay="allow"

            airplay="allow"

            x5-video-player-type="h5"

            x5-video-player-fullscreen="true"

            x5-video-orientation="portrait"

            src="http://zhidingfun.test.qingcdn.com/wykl5.mp4"

            controls="controls"></video>

    </div>

</body>

</html>

以上是从一个微信分享里面看到的，觉得很牛逼，扒了一下源码，未深入研究，有兴趣可以研究一下腾讯的X5内核。

HTML之微信全屏播放视频的更多相关文章

  1. iOS 全局禁止横屏，但UIWebView 全屏播放视频，横屏，解决办法(任意页面横竖屏或禁止)

    iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 时间 2015-07-14 20:59:00  博客园-原创精华区 原文  http://www.cnblogs.com/fe ...

  2. 【wpf基础】wpf MediaElement全屏播放视频功能

    最近在研究如何将视频全屏播放,一开始思路A:弹窗将MediaElement对象add到一个新的全屏窗体,报错 指定的元素已经是另一个元素的逻辑子元素.请先将其断开连接. 后续转换思路B:将本窗体其他控 ...

  3. 解决video标签在微信中强制全屏、微信全屏播放（Android和IOS）

    在video标签中加上代码: x5-playsinline="true" webkit-playsinline="true" playsinline=" ...

  4. vue video全屏播放

    需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...

  5. iphone H5视频行内播放（禁止全屏播放）

    一般用户都知道,ios在网页点击视频播放时,视频会弹出全屏播放框. video标签的playsinline.webkit-playsinline标记根本就不会起作用. 还有传闻说对于没有声音的视频不会 ...

  6. 微信非全屏播放设置（仅Iphone）

    由于微信X5内核强制视频全屏,用X5自带内核播放,一般内嵌视频打开播放就会被全屏. ihpone里面可以通过设置 x-webkit-airplay="true" webkit-pl ...

  7. h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

    在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...

  8. [转]Android WebView播放视频（包括全屏播放），androidwebview

    Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...

  9. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

随机推荐

  1. C语言 - 可变参数再stm32中的应用

    参考 C 可变参数 | 菜鸟教程 void func(const char* str,...) { ... } func的最后一个参数写成 ... ,表示可变参数, C语言的printf就是类似这种声 ...

  2. Q-Q图和P-P图

     一. QQ图      分位数图示法(Quantile Quantile Plot,简称 Q-Q 图)       统计学里Q-Q图(Q代表分位数)是一个概率图,用图形的方式比较两个概率分布,把他们 ...

  3. Python 将中文、字母转成数字

    Outline 把中文汉字或者英文字母或者特殊字符转换成数字. (实质是字符转成对应ASCII码) 转换 将中文汉字转成数字: ord('单个中文汉字') 反转: chr(21704) 将英文字母转成 ...

  4. [SDOI2008]仪仗队（欧拉函数）

    题目 [SDOI2008]仪仗队 解析 这个题,我也不知道他们的soltion是怎么写的这么长的. 我们发现我们一次看一条直线上的第一个点,也就是说,若两个点斜率\(k=\frac{y}{x}\)相同 ...

  5. Docker 安装 MySQL 学习笔记

    https://www.runoob.com/docker/docker-install-mysql.html #docker search mysql #docker pull mysql:5.6 ...

  6. vsftp 安装配置(被动模式)

    vi /etc/vsftpd/vsftpd.conf vsftp配置末尾添加 pasv_enable=YES pasv_min_port=10000 pasv_max_port=10030 防火墙端口 ...

  7. shell编程必须要掌握的命令-xargs

    一,说xargs命令前,说一下什么是shell编程 什么是shell编程呢,说白了就是按一定的规则把各种命令组织起来,完成一定的事情.纯属个人理解,哈哈.不管是交互式的shell,还是非交互的shel ...

  8. 使用ABAP操作Excel的几种方法

    这篇文章本来不在我计划之内,因为最近一个朋友微信上问到我这个问题,但我平时在SAP研究院工作中从没遇到过需要用ABAP操作Excel的需求,因此也没有太多技术实现细节可以分享给大家,只能泛泛写一些. ...

  9. IVS_技术

    视频监控技术按照设备发展过程分为三个阶段:模拟视频监控.数字视频监控.智能视频监控,如下图: 模拟视频监控 第一代视频监控系统也叫做闭路电视监控系统,简称CCTV(Close Circuit Tele ...

  10. Python学习日记(三十四) Mysql数据库篇 二

    外键(Foreign Key) 如果今天有一张表上面有很多职务的信息 我们可以通过使用外键的方式去将两张表产生关联 这样的好处能够节省空间,比方说你今天的职务名称很长,在一张表中就要重复的去写这个职务 ...