微信小程序开发——视频播放实现（本地视频或者云端视频均可）

还是先上图：

这是首页（pages/home/index）的关联logo和按钮，用户点击按钮进入团队视频界面

这是团队视频（pages/vedio/index）界面

我当时实现的比较简单，因为初学者嘛，想着先把基本功能实现了，如果想改样式，后期可以慢慢调整。视频都是能播放的（>_<）嘻嘻~
先提前说一下，我的这个是涉及两个界面的，从首页点击按钮进入的这个界面，所以两部分代码都会展示出来，当然，只写这个界面的代码也可以实现播放。
这是首页（pages/home/index）的关联logo和按钮，用户点击按钮进入团队视频界面

Pages/home/index.wxml的相关代码：
html 复制代码
<view>
    <van-icon class="img" name="video-o"  size="180rpx" />
    
    <button class="but" bind:tap="goTovedio">点击进入_团队视频</button>
  </view>

pages/home/index.js的相关代码：(写在)
javascript 复制代码
      goTovedio:function(){
        wx.navigateTo({
          url: '/pages/vedio/index',
        })
      },
   

Pages/home/index.wxss的相关代码：(样式可以自己更改)

css 复制代码

.img {
    padding: 20rpx;
    width: 260rpx;
    height: 220rpx;
}

.but {
    font-weight: 400;
    /* 正常字体权重 */
    font-size: 28rpx;
    /* 减小字体大小 */
    margin-top: 5rpx;
    /* 调整上边距 */
    padding: 5rpx 5rpx;
    margin-bottom: 10rpx;
    /* 调整内边距 */
    background-color: rgb(73, 184, 70);
    /* 设置按钮背景颜色 */
    border-radius: 20rpx;
    /* 圆角效果 */
    max-width: 50%;
    /* 确保按钮不超出背景框 */
    box-sizing: border-box;
    /* 包含内边距和边框在宽高计算中 */
}

这是团队视频（pages/vedio/index）界面（如果只写这个界面代码的话，运行也是播放视频的，只是没有跳转）

页面目录结构如下:

1、
javascript 复制代码
{
    "navigationBarTitleText": "团队视频",  #页面标题名称
    "usingComponents": {}
}

2、

css 复制代码

<!-- pages/video/index.wxml -->
<view class="style">
  <view class="box">
  <text class="text">文本备注1</text>
  <video class="vedio" style="height: 380rpx;width:750rpx;" src="视频地址（可以是本地也可以是云端）">
  </video>
</view>


<view class="box">
  <text class="text">文本备注2</text>
  <video class="vedio" style="height: 380rpx;width:750rpx;" src="视频地址（可以是本地也可以是云端）">
  </video>
</view>

</view>

3、

css 复制代码

/* pages/music/index.wxss */
.style{
    width: 100%;
    height: 100%;
    margin-bottom: 80rpx;
}

.box{
    width: 100%;
    height: 280rpx;
    margin-top: 40rpx;
    margin-bottom: 240rpx;
    position: relative;
}

.text{
    font-size: 28rpx;
    margin-top: 40rpx;
}