发现一个更简单的解决方法，加上一条属性即可。x5-video-player-type=”h5″。通过设置这个属性，让video开启同层H5播放器。另外在X5内核里，video是单独的一个view，会覆盖在任何元素之上，据说是为了统一用户体验，加上这个属性之后，也可以让其他元素浮在video上面了。

经过测试，在IOS设备，依然还需要添加如下属性

  1.   x-webkit-airplay=”true” playsinline webkit-playsinline=”true”
  1. <video id="video" src="mp4.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5"></video>

另外还有几个属性 x5-video-player-fullscreen=”true”，视频播放时将会进入到全屏模式。

x5­video­orientation，声明播放器支持的方向，可选值： landscape 横屏, portraint竖屏 ，此属性只在声明了x5­video­player­type=”h5″情况下生效。

  1.  <video src="m.mp4" playsinline="true" webkit-playsinline="true"
  2.  x-webkit-airplay="true" x5-video-player-type="h5" x5-video-orientation="h5"
  3.  x5-video-player-fullscreen="true" preload="auto" style="object-fit:fill;"></video>

preload="auto"   开启视频缓冲，页面加载完即加载视频

webkit-playsinline="true"  控制当前视频在当前设置的div里面播放，不脱离文档流

x-webkit-airplay="true"  支持Airplay的设备

x5-video-player-type="h5"  开启同层播放器，取消播放器的默认的播放按钮和播放器控制器控制面板，整个页面只保留微信默认自带的返回和关闭菜单

x5-video-player-type="h5"  x5-video-player-fullscreen="true"  同层播放器设置类型为h5和设置视频播放为全屏幕

style="object-fit:fill;" css3样式设置填充整个屏幕

通过属性的设置和样式的控制让视频全屏显示。

请看demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <title>Examples</title>
  7.     <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
  8.     <meta name="description" content="">
  9.     <meta name="keywords" content="">
  10.     <link href="" rel="stylesheet">
  11. </head>
  12. <style>
  13.     *{margin:0;padding: 0}
  14.     html,body,video{width: 100%;height: 100%; position: relative;overflow: hidden;}
  15.     video{ object-fit: cover;}
  16.     div,#endBtn{ position: absolute; width: 100px;height: 100px; left: 50%;top: 50%; margin-left: -50px;margin-top: -50px; background: red;z-index: 100;color: #fff;text-align: center;font-size: 14px; line-height: 100px;border:none;
  17.         transition: all 1s ease;-webkit-transition: all 1s ease;
  18.       }
  19.     div.move{
  20.         transform: translate3d(0,-688px,0);
  21.         -webkit-transform: translate3d(0,-688px,0);
  22.     }
  23.     #endBtn{
  24.     transition: all 1s ease;-webkit-transition: all 1s ease;
  25.     transform: translate3d(0,688px,0);
  26.         -webkit-transform: translate3d(0,688px,0);
  27.     }
  28.     #endBtn.move{
  29.         transform: translate3d(0,0px,0);
  30.         -webkit-transform: translate3d(0,0,0);
  31.     }
  32. </style>
  33. <body>
  34.     <div id="div">点击播放</div>
  35.     <video id="video" src="http://itakeo.com/down/video/mp4.mp4" poster="poster.jpg" muted x-webkit-airplay="true" playsinline  webkit-playsinline="true"  x5-video-player-type="h5"  ></video>
  36.     <button id="endBtn">再次播放</button>
  37. </body>
  38. <script>
  39.     div.ontouchend = div.onclick = function(){
  40.         this.classList.add('move')
  41.         video.play()
  42.     }
  43.     endBtn.ontouchend = endBtn.onclick = function(){
  44.         this.classList.remove('move')
  45.         video.play()
  46.     }
  47.     video.addEventListener('ended',function(){
  48.        endBtn.classList.add('move')
  49.     })
  50. </script>
  51. </html>

　　更多关于关于iOS video标签限制和支持格式
　　请参考Apple文档
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1

2017-12-06 23:54:32

关于如何在微信里面让video不全屏播放的更多相关文章

  1. 移动端video不全屏播放

    <div class="m-video"> <video x5-playsinline="" playsinline="" ...

  2. 解决微信浏览器内video全屏问题

    前端离职,让我写个视频播放页面,木办法只有我来搞了. 默认用h5的 video标签 测试时候发现微信浏览器内访问video自动全屏播放. 搜了下 webkit-playsinline="tr ...

  3. vue video全屏播放

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

  4. 在微信端使用video标签，播放结束会出现QQ浏览器推荐视频的解决办法（vue）

    会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...

  5. 微信内置浏览器 如何小窗不全屏播放视频？也可以尝试canvas.

    设置属性: <video height="100%" width="100%" autoplay="autoplay" control ...

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

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

  7. Video如何不自动全屏播放？

    知乎:微信内置浏览器 如何小窗不全屏播放视频? 目前在微信中只能全屏播放,只有加入腾讯白名单的视频才能小屏播放. 知乎上讨论的解决方案尚未测试,太麻烦了.

  8. video 在微信中，安卓全屏和ios上如何内联播放？H5同层播放器相关接入规范

    今天在做一个分享页面的时候需要播放视屏用了video,然后各种坑开始了: <video src="http://xxx.mp4 " id="myVideo" ...

  9. 解决微信video全屏的问题，不在本页面播放

    在微信浏览器中使用video标签,点击播放会跳出本页面,自动进行全屏播放,原因是自动跳转到手机微信内置的浏览器中去播放去了!!! 在video中加上连个属性就好了,反正最近的一个项目,我是这样做的就好 ...

随机推荐

  1. windows7 安装TensorFlow

    Win7 TensorFlow安装步骤: 1.安装python,参考http://www.zhimengzhe.com/windows/283058.html#0-tsina-1-12530-3972 ...

  2. Java基础总结--IO总结1

    1.IO流(数据流)主要应用概述数据来源:存储在设备里面* IO流用来处理设备间数据之间的传输* Java对数据的操作是通过流的方式* Java用于对流的操作的对象都在IO包* 流按照流向分为:输出流 ...

  3. LeetCode 259. 3Sum Smaller （三数之和较小值） $

    Given an array of n integers nums and a target, find the number of index triplets i, j, k with 0 < ...

  4. Hbuilder中添加Babel自动编译

    Hbuilder是一个不错的H5开发IDE. Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试. 如果可以有办法在Hbuilder中直接使用ES6,并通过B ...

  5. 测试服务搭建之centos7下安装java

    一 安装Java 1 创建普通用户 useradd wujian passwd wujian 提示输入密码:[输入wujian的密码] user:wujian group:root passwd:12 ...

  6. SQL查询一个表里面某个字段值相同的数据记录

    好长时间没有用SQL了...还停留在学生时代的水平... 转: 昨天遇到个面试题:查询一个表里面某个字段值相同的数据记录,好久没有写过这种,还真的花了点时间才写出来.如表g_carddetail,有 ...

  7. 服务端事件EventSource揭秘

    服务端推 服务端推,指的是由服务器主动的向客户端发送消息(响应).在应用层的HTTP协议实现中,"请求-响应"是一个round trip,它的起点来自客户端,因此在应用层之上无法实 ...

  8. Windows下mysql5.5主从同步

    前置条件: A主机(作为主服务器) 环境:Win7,mysql5.5 IP:172.17.42.82 B主机(作为从服务器) 环境:Win7,mysql5.5 IP:172.17.42.156 主服务 ...

  9. java 操作格子问题（线段树）

    很久之前做过线段树的问题(操作格子),时间长了之后再次接触到,发现当初理解的不是很透彻,然后代码冗长,再遇到的时候发现自己甚至不能独立地完成这个问题. 所以算法这个东西啊, 第一,是要经常练习(我个人 ...

  10. Python datetime之timedelta

    该函数表示两个时间的间隔 参数可选.默认值都为0:datetime.timedelta(days=0, seconds=0, microseconds=0, milliseconds=0, minut ...