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

还是先上图:

这是首页(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" />
    <!-- <image class="img" src="cloud://ryy-1-8g1p0t4d760ee623.7279-ryy-1-8g1p0t4d760ee623-1330242685/icon/videw.png" mode=""/> -->
    <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;
}
相关推荐
说私域1 分钟前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
用户1456775610374 分钟前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife14 分钟前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan36 分钟前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户14567756103738 分钟前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
2501_915106321 小时前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
西洼工作室1 小时前
前端混入与组合实战指南
前端
YQ_ZJH1 小时前
Spring Boot 如何校验前端传递的参数
前端·spring boot·后端
报错小能手1 小时前
linux学习笔记(18)进程间通讯——共享内存
linux·服务器·前端
魔云连洲1 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式