视频播放小程序-小程序媒体API-基础入门

视频播放效果： 

视频列表的切换方法

视频自动播放方法

视频随机颜色弹幕效果

一。界面设计

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