不废话，上代码：

<!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++/WinRT 中的线程切换体验带到 C# 中来（WPF 版本）

    原文:将 C++/WinRT 中的线程切换体验带到 C# 中来(WPF 版本) 如果你要在 WPF 程序中使用线程池完成一个特殊的任务,那么使用 .NET 的 API Task.Run 并传入一个 L ...

  2. Q-Q图和P-P图

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

  3. mysql-数据备份与存储过程

    目录 修改隔离级别 存储过程 什么是存储过程 用来干什么 三种数据处理方式 备份与恢复 修改隔离级别 修改全局的 set global transaction isolation level read ...

  4. P1347 排序 (拓扑排序,tarjan)

    题目 P1347 排序 解析 打开一看拓扑排序,要判环. 三种情况 有环(存在矛盾) 没环但在拓扑排序时存在有两个及以上的点入度为0(关系无法确定) 除了上两种情况(关系可确定) 本来懒了一下,直接在 ...

  5. Git for Windows. 国内镜像

    感谢https://github.com/waylau/git-for-win Git for Windows. 国内直接从官网(http://git-scm.com/download/win)下载比 ...

  6. Python基础知识(四)

    Python基础知识(四) 一丶列表 定义格式: 是一个容器,由 [ ]表示,元素与元素之间用逗号隔开. 如:name=["张三","李四"] 作用: 存储任意 ...

  7. vuecli3的项目搭建

    1.卸载旧版本 npm uninstall vue-cli -g 或者 yarn global remove vue-cli 2.安装cli3脚手架 npm install -g @vue/cli 或 ...

  8. 正则 \num 如：\1， \2 匹配的结果

    \num 匹配 num,其中 num 是一个正整数.对所获取的匹配的引用.例如,'(.)\1' 匹配两个连续的相同字符. 例子: 正则:/(a)(b)\1/.此表达式的意思大概是对第一个()匹配结果的 ...

  9. 英语secuerity证券

    中文名:证券 外文名:security.secuerity 类别:经济权益凭证统称 组成:资本证券.货币证券和商品证券 作用:用来证明持者权益的法律凭证 发展历程 世界 1603年,在共和国大议长奥登 ...

  10. C/C++ 关于数组和指针的总结

    1.数组的声明形如a[d],其中a是数组的名字,d是数组的维度,编译的时候数组的维度应该是已知的,所以维度d必须是一个常量.如果要定义一个不知道元素个数的以为数组,那么请使用vector容器: uns ...