不废话，上代码：

<!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. 【Maven基础入门】01 Maven的安装与环境变量的配置

    写在前面: Mavne,作为一个优秀的项目构建工具,虽说我们平时在使用的时候或多或少的会使用到它,但了解仅限于它能构建项目,然后其他的就不知道了. 以及仓库.POM父类文件.等等. 工欲善其事,必先利 ...

  2. Fluentdata详解

    Fluentdata 轻型orm 仅仅一个cs文件 创建并且初始化一个IDbContext. 二选一 public IDbContext Context() { return new DbContex ...

  3. HTTP协议的认识

    1.内容回顾 1.HTTP协议消息的格式: 1.请求(request) 请求方法 路径 HTTP/1.1 \r\n k1:v1\r\n ...\r\n \r\n 请求体 <--这里可以有可以没有 ...

  4. SpringBoot的入门程序

    1. 创建一个springboot工程 可以参考springboot入门程序 2. 创建一个实体类 @Data //想相当于@Setter.@Getter和@ToString替代了setter.get ...

  5. 2019 快乐阳光java面试笔试题 （含面试题解析）

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.快乐阳光等公司offer,岗位是Java后端开发,最终选择去了快乐阳光. 面试了很多家公司,感觉大部分公司考察的点 ...

  6. 特征选择之FeatureSelector工具

    项目地址:https://github.com/WillKoehrsen/feature-selector 特征选择(feature selection)是查找和选择数据集中最有用特征的过程,是机器学 ...

  7. scrapy 图片管道学习笔记

    使用scrapy首先需要安装 python环境使用3.6 windows下激活进入python3.6环境 activate python36 mac下 mac@macdeMacBook-Pro:~$ ...

  8. 【RAC】rac环境下的数据库备份与还原

    [RAC]rac环境下的数据库备份与还原 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~ ...

  9. C# 认识 接口

    一.什么是接口 C#接口中包含方法.属性.索引器和事件的声明,但常用的接口中一般就是方法和属性,然而接口中并没有方法的具体实现代码(不能提供任何成员实现),只有方法的返回类型和方法名.一个类实现了某个 ...

  10. Web开发之跨域问题

    最近在工作上遇到了跨域方面的问题,借此温习巩固. 跨域是受到浏览器的同源策略引起的,为了防止某些文档或脚本加载别的域下的未知内容造成泄露隐私,破坏系统等安全行为. 那什么是同源的呢? 同源是指:应用协 ...