在ios和android上有显示的区别,如果你只是显示一个普通的网页,只需要在iOS上加上webkit-playsinline="true" 安卓上x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint",即可实现在微信上的同层播放;iOS和安卓显示和播放没有问题;
如果你跟我一样想要把视频放到swiper里,且不是在第一页播放视频,并想要视频有圆角。那么问题就来了。首先在swiper非第一屏播放安卓会出现的问题是竖屏只有声音没有图像,我尝试了好久只需要去掉安卓部分的同层播放代码即可,即去掉x5-video-player-type="h5";如果视频在swiper里,你肯定会有这样的需求,就是滑动到非视频页的时候,暂停视频,并出现一个模拟的暂停按钮在视频上方。这里可以这样写:
const mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
on: {
slideChangeTransitionEnd: function() {
if (this.activeIndex != 1) {
//暂停视频代码
}
}
}
})
这里定义一个是否显示暂停的按钮的变量showPoster,来显示暂停模拟按钮和隐藏video;
这里显示播放按钮必须和视频显示必须呈反相关,因为不这样作会有很多默认的bug,导致video_container的overflow:hidden不生效,无法显示圆角,这算是一种比较圆滑的做法了;我试过将video的position设为fixed 这样虽然能正常显示和隐藏模拟的点击按钮,但会让父级的overflow:hidden失效。无法显示视频圆角。代码大概如下:
<div class="video_container">
<div class="clickVideo" @click="playVideo()" v-show="showPoster">
<img src="../assets/点击播放按钮.png"/>
</div>
<video
v-show="!showPoster"
src="../assets/QQ20181214-221408-HD.mp4"
id="video"
preload="auto"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
airplay="allow"
x-webkit-airplay="allow"
playsinline="true"
webkit-playsinline="true"
style="object-fit:fill"
>
<!--
controls="controls" 待加
poster="../assets/share.png"
安卓同层播放属性
x5-video-player-type="h5" //启用同层播放。取值固定为'h5'。 启用之后仅安卓在swiper第二页播放竖屏不显示画面所以这里暂不用
x5-video-player-fullscreen="true" //设置为 true 是防止横屏
x5-video-orientation="portraint" //竖屏 landscape 横屏
ios同层播放属性
airplay="allow"
x-webkit-airplay="allow"
playsinline="true" //IOS微信浏览器支持小窗内播放
webkit-playsinline="true" // 这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放
-->
</video>
</div>
<style lang="less">
.video_container{
@w: 670px/2;
@h: 377px/2;
@borderRadius: 50px;
width:@w;
height:@h;
margin:100px auto;
border-radius:@borderRadius;
overflow: hidden;
position: relative;
.clickVideo{
position: absolute;
width:@w;
height:@h;
background:#ccc;
z-index:999;
& > img {
@play:60px;
width:@play;
height:@play;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%)
}
}
video{
width:@w;
height:@h;
}
}
</style>
注:如果你在swiper的非第一页使用视频,在安卓手机上会出现视频黑屏但可以播放声音的问题,这个时候就可以不使用安卓的同层播放,即不使用x5-video-player-type="h5"即可。
同层播放的资料参考链接:http://www.cnblogs.com/jinjin...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。