微信小程序中不可以直接在video上使用position:fixed;因为这样做其实会导致出现黑框固定，里面视频依然会滚动，解决办法就是在用view吧video包起来，对view使用fixed即可，另外我们微信一般都是从上到下，滚动区域我们可以写成scroll-view，而单位统一为vh即可，页面中的fixed块的height的vh加起来等于100即可，vh是什么，请自行百度
这里有一些源码 可以提供fixed布局下的参考
##########################################################################
// pages/play/play.js
Page({
/**
* 页面的初始数据
*/
data: {
"videoUrl": 'http://192.168.0.247:8080/videoResources/syss.mp4',
now_tab: "0",
"show_or_hidden":true,
tabTitle: [
{
"name": "详情"
}
, {
"name": "章节（3）"
}]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
click_tab: function (e) {
this.setData({
now_tab: e.currentTarget.id
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
##########################################################################
<view class="video">
<video autoplay="true" controls="controls" src="{{videoUrl}}" ></video>
</view>
<view class='tab_container'>
<block wx:for-items="{{tabTitle}}" wx:key="*this">
<view id='{{index}}' class='{{index==now_tab?"tab_title_on":"tab_title"}}' bindtap='click_tab'>{{item.name}}</view>
</block>
</view>
<scroll-view class="main" scroll-y="true">
<view hidden='{{!(now_tab==0)}}'>
详情内容
</view>
<view hidden='{{!(now_tab==1)}}'>
章节列表
</view>
</scroll-view>
<view class='shop'>
<text style='float:left;color:yellow;'>该课程仅对会员开放</text><button style='background:blue;float:right;height:8vh;'>购买</button>
</view>
##########################################################################
page {
overflow-y: none;
height: 100%;
}
video {
width: 100%;
height: 100%;
}
.video {
position: fixed;
width: 100%;
top: 0;
height: 30vh;
z-index: 999;
background-color: red;
}
.tab_container {
position: fixed;
z-index: 2;
display: flex;
height: 8vh;
box-sizing: border-box;
border-bottom: #eaeaea solid 1px;
width: 100%;
background-color: white;
top: 30vh;
}
.tab_title {
line-height: 8vh;
flex: 0 0 375rpx;
color: #8a8a8a;
margin-top: 0vh;
text-align: center;
}
.tab_title_on {
line-height: 8vh;
flex: 0 0 375rpx;
text-align: center;
color: #5a88ab;
border-bottom: #5a88ab 2px solid;
}
.main {
box-sizing: border-box;
height: 53vh;
position: fixed;
bottom: 9vh;
margin: 0;
}
.shop {
line-height: 8vh;
width: 100%;
position: fixed;
bottom: 0vh;
text-align: center;
padding:10rpx 10rpx;
box-sizing: border-box;
}