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

在微信浏览器中使用video标签,点击播放会跳出本页面,自动进行全屏播放,原因是自动跳转到手机微信内置的浏览器中去播放去了!!!

在video中加上连个属性就好了,反正最近的一个项目,我是这样做的就好了,

  

<video id="videoID"webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"x5-video-player-type="h5"x5-video-player-      fullscreen="true"width="100%" height="100%"preload="auto"  poster="" src="">

</video>

其中最主要的是两个东西,一个是webkit-playsinline="true"这个 ,本来我的video在ios中 是跳全屏播放的,加了一个这样的属性就不跳了,

但是安卓微信里面,又开始自动跳全屏播放了,后来我又加了一个这样的属性x-webkit-airplay="true"  安卓也好了,很神奇,如果你遇到类似的问题可以去试试,或许会好的呢!!

时间: 2024-10-29 13:23:34

解决微信video全屏的问题,不在本页面播放的相关文章

Android 高大上的侧滑菜单DrawerLayout,解决了不能全屏滑动的问题

DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈... 接下来就介绍如何实现这一功能 1. 在项目对应的build.gradle中添加依赖 dependencies { ...//其他代码 compile 'com.android.support:appcompat-v7:24.0.0' compile 'com.android.support:des

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

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

完美解决微信video视频隐藏控件和内联播放问题

众所周知,微信浏览器下的html5视频播放兼容性一直是很头疼的问题,其中两个最主要的问题是隐藏播放控件和内联播放,在ios系统下这两个功能还比较好实现,重点是在android端,今天就给大家提供一个比较特殊的方法. 先看一下html代码格式: <div class="videoBox"> <i class="fa fa-play-circle-o"></i> <video id="video" x5-vi

html5 video全屏实现方式

首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用于很多html 元素,不仅仅是video <!doctype  html> <html> <head> <meta charset="utf-8" />     <title>全屏问题</title>     <meta http-equiv="content-type" co

video 全屏时 隐藏controls

1. 参考:“http://www.cnblogs.com/kite-Runner/p/4254709.html” 指定全屏时的css风格: video::-webkit-media-controls { display:none !important; }

Chromium为视频标签&lt;video&gt;全屏播放的过程分析

在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式下,我们是看不到网页其它内容的,因此<video>标签播放的视频可以在一个独立的全屏窗口中显示.这两种截然不同的播放模式,导致Chromium使用不同的方式渲染视频画面.本文接下来就详细分析<video>标签全屏播放的过程. 从前面Chromium为视频标签<video>渲

video 全屏,播放,隐藏控件。

requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } el

&lt;video&gt;全屏状态下视频没有铺满屏幕

在使用videojs初始定宽高或者给<video>写定宽高后,在全屏状态下会导致视频在左上角展开,保持着之前写定的宽高,而没有实现真正全屏. 如果通过JS在点击全屏按钮后改变video的宽高,需要查阅videojs文档,实现方式比较复杂(原因还是太菜). 其实通过CSS实现全屏是最方便的,只需要在video外部套一个<div class="videoWrap">, 然后把原本需要的宽高写在videoWrap上,对于<video>我们只要给一个{wid

微信视频类H5 之自适应全屏

<!DOCTYPE html> <html> <head> <title>微信视频全屏播放</title> <meta name="viewport" content="width=device-width,width=640, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content=