文章目录
前情提要
小程序里要放置视频，用video组件。video组件很多属性，如：
src，string类型，表示视频资源的地址。
搭建视频服务器
- 全局安装serve：
npm install -g serve - 在任何你想的地方新建文件夹：
resources。resources下新建文件夹：images，用于存放静态图片资源；resources下新建文件夹：videos，用于存放视频文件。 - 启动服务器：
serve resources。
小程序项目
代码涉及的文件有：
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages/index/index.wxml
<view class="cameraContainer">
<view class="header">
<input type="text" class="search" placeholder="搜一搜 这里啥都有"/>
<image src="/static/images/search.png"></image>
</view>
<view class="tabContainer">
<scroll-view class="tabs" enable-flex scroll-x>
<view class="tab {
{item.id===tabId?'active':''}}" wx:for="{
{tabList}}" wx:key="id"
id="{
{item.id}}" bindtap="changeTab">
{
{item.name}}
</view>
</scroll-view>
</view>
<scroll-view class="videoList" scroll-y>
<view class="videoItem" wx:for="{
{videoList}}" wx:key="vid">
<video src="{
{item.videoUrl}}"></video>
</view>
</scroll-view>
</view>
pages/index/index.wxss
.cameraContainer{
padding: 10rpx;
}
.header{
display: flex;
align-items: center;
border: 1rpx solid #aaa;
border-radius: 6rpx;
padding: 6rpx 10rpx;
}
.header image{
width: 36rpx;
height: 36rpx;
padding: 0 10rpx;
}
.header .search{
flex: 1;
height: 36rpx;
line-height: 36rpx;
font-size: 26rpx;
}
.tabContainer{
margin-top: 20rpx;
}
.tabs{
display: flex;
height: 50rpx;
}
.tab{
height: 40rpx;
line-height: 40rpx;
margin-right: 30rpx;
white-space: nowrap;
font-size: 28rpx;
}
.active{
border-bottom: 4rpx solid #0149af;
}
.videoItem{
margin-top: 10rpx;
}
.videoItem video{
width: 100%;
border-radius: 10rpx;
}
pages/index/index.js
Page({
data:{
tabList:[],
tabId:'',
videoList:[]
},
onLoad(){
this.getTabList();
this.getVideoList();
},
changeTab(e){
const tabId = e.target.id;
this.setData({
tabId});
},
getTabList(){
let result = [
{
"id": "58100","name": "现场"},
{
"id": "60100","name": "翻唱"},
{
"id": "1101","name": "舞蹈"},
{
"id": "259129","name": "超燃联盟"},
{
"id": "254120","name": "滚石唱片行"},
{
"id": "1000","name": "MV",},
{
"id": "2100","name": "生活"},
{
"id": "2103","name": "游戏"},
{
"id": "1103","name": "萌宠"},
{
"id": "9102","name": "演唱会",},
{
"id": "57105","name": "粤语现场"},
{
"id": "59101","name": "华语现场"},
{
"id": "57106","name": "欧美现场"},
{
"id": "57108","name": "流行现场"},
{
"id": "57109","name": "民谣现场"}
]
this.setData({
tabList:result,
tabId:result.length && result[0].id || ''
})
},
getVideoList(){
const result = [
{
vid: "D4FD37BC59E440F367E485680D172FFC", coverUrl: "http://localhost:3000/images/1.jpg", videoUrl: "http://localhost:3000/videos/1.mp4"},
{
vid: "28DCBBE25A686078549195E54B5F1612", coverUrl: "http://localhost:3000/images/2.jpg", videoUrl: "http://localhost:3000/videos/2.mp4"},
{
vid: "C5B8699EBF70B139B702841EA41E7C4B", coverUrl: "http://localhost:3000/images/3.jpg", videoUrl: "http://localhost:3000/videos/3.mp4"},
{
vid: "77C5143F298F169DDD0DD3EF116187E9", coverUrl: "http://localhost:3000/images/4.jpg", videoUrl: "http://localhost:3000/videos/4.mp4"},
{
vid: "1C612837556283740A191AD4FF774F2C", coverUrl: "http://localhost:3000/images/5.jpg", videoUrl: "http://localhost:3000/videos/5.mp4"},
{
vid: "8EB59877C11DF774B68C7EA6F2F46574", coverUrl: "http://localhost:3000/images/6.jpg", videoUrl: "http://localhost:3000/videos/6.mp4"},
{
vid: "F50333C85BC61F7DBC4EE65ED481747E", coverUrl: "http://localhost:3000/images/7.jpg", videoUrl: "http://localhost:3000/videos/7.mp4"},
{
vid: "0C6590B104C45A471AF29C1758DC36E0", coverUrl: "http://localhost:3000/images/8.jpg", videoUrl: "http://localhost:3000/videos/8.mp4"}
];
this.setData({
videoList:result})
}
})