视频播放效果:
视频列表的切换方法
视频自动播放方法
视频随机颜色弹幕效果
一。界面设计
1.创建项目videoDemo
将app.json文件内pages属性中的”pages/logs/logs“删除
删除utils文件夹及其内容
删除index.wxml和index.wxss中的全部代码
删除index.js全部代码并输入page找到
按回车键自动补全函数
同理删除app.js全部代码,并且输入关键词app找到第一个选项按回车键补全代码
1.导航栏设计
app.json
{
"pages":[
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#987938",
"navigationBarTitleText":"校史介绍"
}
}
2.视频组件设计
用<video>组件来实现一个视频播放器
<!--index.wxml-->
<!-- 视频播放器 -->
<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo" controls></video>
<!-- 弹幕控制区域 -->
<view class="danmuArea">
<!-- 弹幕输入框 -->
<input type="text" placeholder="请输入弹幕内容"></input>
<!-- 发送按钮 -->
<button>发送弹幕</button>
</view>
<!-- 视频列表 -->
<view class="videoList">
<view class="videoBar">
<image src="/images/play.png"></image>
<text>这是一个标题</text>
</view>
</view>
/**index.wxss**/
/* 视频组件样式 */
video{
width:100%;
}
/* 弹幕控制样式 */
/* 弹幕区域整体样式 */
.danmuArea{
display: flex;
flex-direction: row;
}
/* 文本输入框样式 */
input{
border:1rpx solid #987938;
height: 100rpx;
flex-grow: 1;
}
/* 发送按钮样式 */
button{
color:white;
background-color: #987938;
}
/* 视频列表样式 */
.videoList{
width:100%;
min-height: 400rpx;
}
/* 单行列表区域样式 */
.videoBar{
width: 95%;
display: flex;
flex-direction: row;
margin: 10rpx;
border-bottom: 1rpx solid #987938;
}
/* 播放图标样式 */
image{
width: 70rpx;
height: 70rpx;
margin: 20rpx;
}
/* 文本标题样式 */
text{
font-size: 45rpx;
color: #987