不废话，上代码：

<!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. Kafka学习笔记（三）——架构深入

    之前搭建好了Kafka的学习环境,了解了具体的配置文件内容,并且测试了生产者.消费者的控制台使用方式,也学习了基本的API.那么下一步,应该学习一下具体的内部流程~ 1.Kafka的工作流程 大致的工 ...

  2. .NET 使用 ILMerge 合并多个程序集，避免引入额外的依赖

    原文:.NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.打包成一个程序集可以避免分发程序的时候带上一堆依赖而出问题. ILMerge 可以用来 ...

  3. springcolud 的学习（一），架构的发展史

    一.传统架构 传统的SSH架构,分为三层架构 web控制层.业务逻辑层.数据库访问层. 传统架构也就是单点应用,就是大家在刚开始初学JavaEE技术的时候SSH架构或者SSM架构,业务没有进行拆分,都 ...

  4. python测量函数运行时间长度

    python测试函数运行时间长度的方法如下 import time def measure_time(): def wraps(func): def mesure(*args,**kwargs): s ...

  5. 【转载】TX - row lock contention 的一些场景

    TX - row lock contention 的一些场景 原创 2016-07-11 易欣 云和恩墨 易欣(Eson) 云和恩墨技术专家 本文整理来自7月7日周四晚云和恩墨大讲堂嘉宾易欣分享的主题 ...

  6. 关于如何往Jupyter notebook添加可选的kernel

    关于如何往Jupyter notebook添加可选的kernel 1. Anaconda知识预热 管理虚拟环境 关于如何安装Anaconda,这里就不再一一赘述,安装完Anaconda,接下来我们就可 ...

  7. Linux DHCP 中继

    具体到一个公司的网络环境中,不可能只有一个VLAN,更不可能对每个VLAN都架设一个DHCP服务器,这时就要做一个DHCP的中继,使得DHCP的广播可以通过VLAN. 实验拓扑 三层交换机下面连接一台 ...

  8. centos7和centos6安装httpd

    编译安装httpd http://apr.apache.org/download.cgi 下载 apr-util-1.6.1.tar.bz2 apr-1.6.5.tar.bz2 http://http ...

  9. 调试中行支付demo

    用eclipse调试中行支付demo,本来报错. 让我同学帮我远程看了下,他删了服务器,又添加服务器,然后竟然可以运行了,牛逼! 原来报错: at java.net.URLClassLoader$1. ...

  10. 基于CentOS7配置ArcGIS enterprise

    Centos7GUI安装过程 1.右键点击列表中的虚拟主机,打开控制台. 点击绿色开机键,开始安装. 这里有一个很关键的点,就是上一步设置中的打开电源自动连接.一开始设置的时候别忘了. 2.开机后会出 ...