最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:

  • 在微信浏览器内播放时,视频会自动全屏
  • 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置高度,视频的容器在安卓手机上会被视频的封面撑大到变形

解决办法:

给video标签加一些属性,调用h5原生video,我写了个例子,加了注释,如果有错误,烦指正,谢谢!

<video class="video-source"
width="100%"
   height="240px" /*如果有封面,请设置高度*/
controls /*这个属性规定浏览器为该视频提供播放控件*/
style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏,如果是在手机上预览,会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/
x-webkit-airplay="true" /*这个属性还不知道作用*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/
preload="auto" /*这个属性规定页面加载完成后载入视频*/
</video>

如果你的video标签也加了上面的属性,那么,你的视频可以在IOS手机上的小窗口播放,同时,视频封面同视频的宽度与高度也保持一致了。

经过各种尝试,在iOS下,可以给video添加webkit-playsinline属性,使视频在页面上原本位置播放,但这个属性在安卓上无效。

/****华丽丽的分割线,以下内容摘抄自网络,供参考****/

IOS微信浏览器是Chrome内核,下面大部分属性都支持,安卓微信浏览器是X5内核,一些属性是不支持的,比如可以设置局部播放的属性 playsinline,因此,始终是全屏。

下面的内容用以解释上面的内容:

2017-01-20  17:07:32

preload="auto" :属性规定在页面加载后载入视频。如果设置了 autoplay 属性,则忽略该属性。

一般参数可能的值:

·        auto - 当页面加载后载入整个视频

·        meta - 当页面加载后只载入元数据

·        none - 当页面加载后不载入视频

muted:当设置该属性后,它规定视频的音频输出应该被静音

controls="controls" :属性规定浏览器应该为视频提供播放控件。

autoplay="autoplay": 视频自动播放设置,但是有经验的人都应该知道,autoplay标签在手机上不兼容,APP中设置问题导致无法自动播放,无论安卓或IOS。需要模拟自动播放只能通过一些事件触发。

webkit-playsinline playsinline:视频播放时局域播放,不脱离文档流 。但是这个属性比较特别, 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效。换句话说,如果APP不设置,你页面中加了这标签也无效,这也就是为什么安卓手机WeChat 播放视频总是全屏,因为APP不支持playsinline,而ISO的WeChat却支持。

这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,ISO需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的 ,安卓则不需要,因为默认全屏。但这时候全屏是有播放控件的,无论你有没有设置control。 做直播的可能用得着播放控件,但是全屏H5是不需要的,那么去除全屏播放时候的控件,需要以下设置:同层播放。

x5-video-player-type:启用同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上,也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放,播放的时候看似全屏,但是已经除去了control和微信的导航栏,只留下"X"和"<"两键。目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS。笔者想过为什么同层播放只对安卓开放,因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现,不同版本的ISO和安卓效果略有不同。

x5-video-orientation:声明播放器支持的方向,可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,但是这个属性需要x5-video-player-type开启H5模式

x5­video­player­fullscreen:全屏设置。笔者还未能领悟这个标签的用意,在测试过程中发现,ture和false的设置会导致布局上的不一样,如图 Click标签先后的位置。

另外补充下,ISO 微信浏览器是Chrome的内核,相关的属性都支持,也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核,一些属性标签比如playsinline就不支持,所以始终全屏。

/****貌似到这里,了解了为什么安卓手机的全屏视频了****/

2017-01-20  17:13:55

还有个问题,在Android的微信里面,就算加上了上面的属性,还会出现上下有黑边,不能全屏的问题。

解决办法:给video加上object-fit: fill;的style属性。

/****关于微信内置浏览器不能小窗口播放视频的问题-知乎答****/

2017-01-20  17:40:38

在最新的ios微信6.5.3及其之后的版本中,webview默认支持小窗播放,

开发者需要特别注意小窗播放需要前端同时适配iOS10和iOS10以下的低版本

适配建议:需要完全按照以下代码设置video标签才可同时兼容不同的iOS版本

<video webkit-playsinline playsinline> </video>

作者:Lying
链接:https://www.zhihu.com/question/36423771/answer/93953992
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 
知友说 webkit-playsinline 可以解决这个问题.但是经过个人以及各位知友的验证该方法在ios 系统并且是在非微信自带的浏览器的内核中能够解决。Android 然并卵。

/****还没测试的 video.js  据说,很好用,安卓微信浏览器不会全屏播放****/

2017-01-20  17:44:22

知友:张艳红

1,公司网页要求播放很多小视频,于是采用了videojs框架,官网链接:Video.js: The Player Framework ,实测,很好用,而且安卓微信内不会全屏播放。
2,效果见我私官网:http://gethover.com
3, 另外此框架支持IE8浏览器 。

作者:张艳红
链接:https://www.zhihu.com/question/36423771/answer/108443996
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 
打算明天测试这个JS 是否如知友所说的那样好用,如果真是那样,我的问题就解决了。目前就是安卓手机的视频全屏的样子让人蛋疼!
 
video.js CDN: http://www.bootcdn.cn/video.js/
video.js 教程:http://www.cnblogs.com/afrog/p/4115377.html
 
使用video.js有感而发,使用它主要是为了兼容iOS与安卓在显示效果上可以有比较相似的一面,同时,把视频或音步的显示效果自定义一番。上面为视频,下面为音频:
这个做的还不好,现在是兼容了iOS了,但是安卓上还不好用,安卓上的视频播放按钮看不到了,再需要再调整,如果大神知道方法,烦请告我一下,非常感谢。
<!--video.js-->
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
<script type="text/javascript">
var source = $('<source></source>'); //视频url地址
var audioPlayImg = "../img/doctor/play-audio.png"; //播放按钮
var pauseImg = "../img/doctor/pause.png"; //暂停按钮 (function(window, document) {
searchVideo(); //获取要操作的元素
var video = document.getElementById("video"); var audio = document.getElementById('audio'); var videoControls = document.getElementById("videoControls");
var audioControls = document.getElementById("audioControls"); var videoContainer = document.getElementById("videoContainer");
var audioControls = document.getElementById("audioControls"); var controls = document.getElementById("video_controls"); var playBtn = document.getElementById("playBtn");
var audioBtn = document.getElementById("audioPlayBtn"); var fullScreenFlag = false;
var progressFlag; // 音频: 创建我们的操作对象,我们的所有操作都在这个对象上。
var audioPlayr = {
init: function() {
var that = this;
//删除音频的控制按钮属性
audio.removeAttribute("controls"); bindEvent(audio, "loadeddata", audioPlayr.initControls);
audioPlayr.operateControls();
},
initControls: function() {
audioPlayr.showHideControls();
},
showHideControls: function() {
bindEvent(audio, "mouseover", showAudioControls);
bindEvent(audioControls, "mouseover", showAudioControls);
bindEvent(audio, "mouseout", hideAudioControls);
bindEvent(audioControls, "mouseout", hideAudioControls);
},
operateControls: function() {
bindEvent(audioBtn, "click", audioPlay);
bindEvent(audio, "click", audioPlay);
}
} audioPlayr.init(); function showAudioControls() {
videoControls.style.opacity = 1;
} function hideAudioControls() {
videoControls.style.opacity = 1;
} function audioPlay() {
if(audio.paused || audio.ended) {
if(audio.ended) {
audio.currentTime = 0;
}
audio.play();
audioBtn.setAttribute('src', pauseImg);
} else {
audio.pause();
audioBtn.setAttribute('src', audioPlayImg);
clearInterval(progressFlag);
}
} // 视频: 创建我们的操作对象,我们的所有操作都在这个对象上。
var videoPlayer = {
init: function() {
var that = this;
//删除视频的播放按钮属性
video.removeAttribute("controls"); //如果当前的数据是可用的,为视频绑定事件
bindEvent(video, "loadeddata", videoPlayer.initControls);
videoPlayer.operateControls();
},
initControls: function() {
videoPlayer.showHideControls();
},
showHideControls: function() {
bindEvent(video, "mouseover", showControls);
bindEvent(videoControls, "mouseover", showControls);
bindEvent(video, "mouseout", hideControls);
bindEvent(videoControls, "mouseout", hideControls);
},
operateControls: function() {
bindEvent(playBtn, "click", isIOSOrAndroid);
bindEvent(video, "click", isIOSOrAndroid);
}
} videoPlayer.init(); // 原生的JavaScript事件绑定函数
function bindEvent(ele, eventName, func) {
if(window.addEventListener) {
ele.addEventListener(eventName, func);
} else {
ele.attachEvent('on' + eventName, func);
}
} // 显示video的控制面板
function showControls() {
// 为了让控制面板一直出现,我把videoControls.style.opacity的值改为1
videoControls.style.opacity = 1;
} // 隐藏video的控制面板
function hideControls() {
videoControls.style.opacity = 1;
} //判断当前系统是iOS系统还是安卓系统,因为iOS微信浏览器会加载完视频后自动添加一个播放按钮。而我们的播放按钮是自定义的
function isIOSOrAndroid() {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/iPhone\sOS/i) == "iphone os") {
iOSPlay();
} else if(ua.match(/Android/i) == "android") {
androidPlay();
}
} // 控制video的播放 当前操作是在iOS系统下操作
function iOSPlay() {
$('.videoPlayer').css('margin-bottom', '0');
if(video.paused || video.ended) {
if(video.ended) {
video.currentTime = 0;
}
video.play();
playBtn.setAttribute('src', pauseImg);
} else {
video.pause();
playBtn.setAttribute('src', audioPlayImg);
clearInterval(progressFlag);
}
} // 控制video的播放 当前操作是在安卓系统下操作
function androidPlay() {
if(video.paused || video.ended) {
if(video.ended) {
video.currentTime = 0;
}
video.play();
playBtn.setAttribute('src', audioPlayImg);
} else {
video.pause();
playBtn.setAttribute('src', audioPlayImg);
clearInterval(progressFlag);
}
} }(this, document)) </script>

HTML:

<div class="video-play-content">
<!--视频-->
<div class="videoPlayer video-js" id="videoContainer" style="height: 200px;margin-bottom: 15px;">
<video id="video" width="100%" height="200" preload controls style="object-fit: fill" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"> </video>
<div id="videoControls">
<div class="video-box">
<img id="playBtn" src="" />
</div>
</div>
</div>
<!--音频-->
<div id="audioControls">
<audio id="audio" width="100%" height="50" preload controls>
<source src="../video/wssf.mp3" type="audio/mp3"></source>
</audio>
<div id="audioControls">
<div class="audio-box">
<img id="audioPlayBtn" src="../img/doctor/play-audio.png" style="-webkit-appearance:none;" />
<div class="audio-detail">
<div class="audio-title">骨髓灰质炎疫苗选择</div>
<div class="audio-size"><span class="audio-time">24:26</span><span class="audio-size">11.44</span>MB</div>
</div>
</div>
</div>
</div>
</div>

CSS:

body{
color: #555;
font-family:Helvetica;
margin: 15px;
/*去掉默认外观*/
-webkit-appearance:none;
/*长按不触发系统菜单*/
-webkit-touch-callout: none;
/*禁止选中文字*/
-webkit-user-select:none;
}
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
}
html{
font-size:13px;
height: 100%;
-webkit-tap-highlight-color: transparent;
}
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}
.logo-box{
position: absolute;
top: -56px;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{font-size:12px}
.logo-box{
position: absolute;
top: -56px;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}} .main{
margin-bottom: 40px;
} .video-js {
display: block;
vertical-align: top;
box-sizing: border-box;
color: #fff;
background-color: #000;
position: relative;
padding:;
font-size: 12px;
line-height:;
font-weight: normal;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 200px;
} .videoPlayer{
width: 100%;
position: relative;
margin-bottom: 15px;
/*background: #555;*/
}
#video{
android:layout_margin="0dp";
android:padding="0dp";
}
#audioControls,.video-explain-3{
margin-bottom: 15px;
}
#playBtn{
width: 5.5em;
position: absolute;
top: 72px;
left: 50%;
transform: translateX(-50%);
z-index:;
cursor: pointer;
}
.audio-box{
width: 100%;
margin: auto;
height: 80px;
background: #e2e2e2;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
}
#audioPlayBtn {
width: 5em;
position: absolute;
top: 10.5%;
left: 6%;
z-index:;
cursor: pointer;
}
.vaccine{
width: 100%;
margin: 15px 0;
}
.video-info{
margin-bottom: 20px;
color: #999;
}
.audio-time{
margin-right: 10px;
}

修改一下判断浏览系统的方法:

function isIOSOrAndroid() {
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()

if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
$('.videoPlayer').css('margin-bottom', '15px');
iOSPlay();
} else if(browser.versions.android) {
androidPlay();
}
}
 
 
参考链接:

移动端HTML5<video>视频播放优化实践  :  http://www.xuanfengge.com/html5-video-play.html

html5 audio音频播放全解析  : http://www.open-open.com/lib/view/open1407401112973.html

 
 

video 标签在微信浏览器的问题解决方法的更多相关文章

  1. video标签 在微信浏览器打开,不弹出大的独立窗口 而是直接播放。

    1.在 video 标签中添加   属性    x5-playsinline  playsinline  webkit-playsinline="true" 2.ckplayer的 ...

  2. IE浏览器缓存问题解决方法(非常严重)

    IE浏览器缓存问题解决方法整理 一.IE浏览器缓存的内容分析: IE浏览器会缓存网页中的GET和XHR的内容,并且在IE浏览器中如果请求方式是get方式的话,IE浏览器会进行识别,如果该get请求的u ...

  3. PHP判断是否是微信浏览器访问的方法

    PHP判断是否是微信浏览器访问的方法 PHP判断是否是微信浏览器访问的方法 都是干货,微信开发可能需要用到,留着日后COPY. public function isWeichatBrowser() { ...

  4. 解决video标签在微信中强制全屏、微信全屏播放(Android和IOS)

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

  5. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  6. IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

  7. CSS浏览器兼容性问题解决方法总结

    CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6 ...

  8. jquery uploadify上传文件插件导致浏览器崩溃问题解决方法

    自谷歌浏览器更新到(版本39.0.2171.99 )后,访问上传文件界面浏览器就崩溃了,而其他的浏览器不会出现问题. 出现这种问题的原因就是谷歌浏览器缓存问题,但将访问该jsp页面路径添加上时间戳后无 ...

  9. IE浏览器兼容性问题解决方法

    如何用一行代码来解决CSS各种IE各种兼容性问题 一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 各种兼容性问题. 在站点前端写代码的过程中,非常多时间IE各个版本号的兼容问题非常难 ...

随机推荐

  1. 纯手写SpringMVC框架,用注解实现springmvc过程

    闲话不多说,直接上代码! 1.第一步,首先搭建如下架构,其中,annotation中放置自己编写的注解,主要包括service controller qualifier RequestMapping ...

  2. error) DENIED Redis is running in protected mode because protected mode is enabled报错

    官网地址:https://redis.io/download 官方安装文档如下: Installation Download, extract and compile Redis with: $ wg ...

  3. 在Mac OSX上配置Appium+Android自动化测试环境

    前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...

  4. MongoDB从入门到优化

    目录 一.MongoDB 简介 二.MongoDB 的储存引擎 三.mongodb 配置参数 四.MongoDB 单节点搭建 五.MongoDB 连接 六.MongoDB 常用命令 七.MongoDB ...

  5. SpringCloud入门之YAML格式文件规范学习

    1. 认识 YAML YAML(发音 /ˈjæməl/)是一个类似 XML.JSON 的数据序列化语言.其强调以数据为中心,旨在方便人类使用:并且适用于日常常见任务的现代编程语言.因而 YAML 本身 ...

  6. Jenkins入门之任务基本操作

    首先先简单讲一下Jenkins构建任务各种图标的含义 我的主界面有以下构建任务,这里前两列都是图标,第一列为构建的状态,前面已经讲过蓝色代表成功,红色代表失败.当然那是针对一次构建,一个构建任务可能有 ...

  7. 记录学习新框架yii

    最近打算提升自己的解决问题能力,于是打算从学习其他框架下手,让我们先去了解yii框架是如何运作的吧! https://www.yiichina.com/访问yii中文网站 让我们先把框架下载下来 点击 ...

  8. Go基础系列:channel入门

    Go channel系列: channel入门 为select设置超时时间 nil channel用法示例 双层channel用法示例 指定goroutine的执行顺序 channel基础 chann ...

  9. 【原】KMeans与深度学习自编码AutoEncoder结合提高聚类效果

    这几天在做用户画像,特征是用户的消费商品的消费金额,原始数据(部分)是这样的: id goods_name goods_amount 男士手袋 1882.0 淑女装 2491.0 女士手袋 345.0 ...

  10. [转]Angular开发(十八)-路由的基本认识

    angular router https://angular.io/guide/router 本文转自:https://blog.csdn.net/kuangshp128/article/detail ...