不废话，上代码：

<!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. 阿里云主机centos7系统创建SWAP区，并启动挂载（适合无SWAP区虚拟化平台）

    以root用户登录建立交换区文件: fallocate -l 2G /swapfile /swapfile //赋予仅root用户的权限,确保安全 mkswap /swapfile swapon /s ...

  2. angular复习笔记3-组件

    组件Component 组件是构成angular应用的核心,angular的有序运行依赖于组件的协同工作,组件之于angular应用就像是汽车和汽车零部件的意思. 概述 近几年的前端发展迅速,各种工程 ...

  3. 单IP、网络、别名管道限速的设置

    单IP.网络.别名管道限速的设置 在设备上,控制网络限速最常用的是流量×××中的“限制器”,你可以把它理解为一个管道,20Mit/s的下载管道,那么下载的最大流量就不会超过20Mit/s.流量限制器结 ...

  4. Eclipse - 安装Indent Guide，使JAVA代码具备编辑缩进线，和Delphi一样酷！！

    Delphi里面默认就有代码编辑缩进线,这在编写逻辑复杂的大块代码时候非常有好处,可以清楚地看到每块代码的范围,下面就是Delphi里面代码编辑缩进线的截图: 非常棒的效果,我喜欢,在处理复杂逻辑代码 ...

  5. MSSQL镜像场景

    1.版本:一般MSSQL2016以下版本使用. 2.适用小数据库容量的异地备份:如果是数据库容量较大,产生的日志比较多:经测试,9G的数据库大小,镜像数月个日志大小达到400G,硬盘开销太大.

  6. 交换机 VLAN 的划分

    交换机怎么划分VLAN?本次的实验很简单,就是通过VLAN的划分,使不同VLAN之间无法通信,但是相同VLAN不受影响. 实验拓扑 在一台交换机下连接三台VPC,划分VLAN,地址规划如下: 名称 接 ...

  7. opencv——图像掩码操作

    使用opencv通过掩码去扣取图像中感兴趣的区域 步骤: 1.读取一张图片 2.转换颜色格式为hsv 3.设置要扣取区域颜色的上下门限 4.从原始图像中获取感兴趣区域的掩码 5.使用掩码和原始图像做云 ...

  8. subprocess模块的使用注意

    subprocess.Popen()函数 语法格式: subprocess.Popen(arg,stdin=None,stdout=None,stderr=None,shell=False) 1.主要 ...

  9. 关于ssh_config和sshd_config

    转载:https://www.cnblogs.com/panda2046/p/5933498.html   在远程管理linux系统基本上都要使用到ssh,原因很简单:telnet.FTP等传输方式是 ...

  10. java代码转python代码

    (1)安装工具(windows 环境下面) 先下载antlr: http://www.antlr3.org/download/antlr-3.1.3.tar.gz 链接:http://pan.baid ...