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

还是先上图:

这是首页(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;
}
相关推荐
pianmian13 小时前
3D Tiles高级样式设置与条件渲染(3)
linux·服务器·前端
资深前端之路3 小时前
vue+threeJs 绘制3D圆形
前端·javascript·vue.js
Nymph_Zhu3 小时前
vue3+element-plus el-date-picker日期、年份筛选设置本周、本月、近3年等快捷筛选
前端·vue.js·elementui
极客密码4 小时前
DeepSeek-R1-0528,官方的端午节特别献礼
前端·ai编程·deepseek
打小就很皮...4 小时前
npm、pnpm、yarn使用以及区别
前端·npm·yarn
FungLeo4 小时前
vue2 + webpack 老项目升级 node v22 + vite + vue2 实战全记录
前端·webpack·vue2·vie·webpack 升级 vite
西洼工作室4 小时前
使用原生前端技术封装一个组件
前端·js
xiaofann_4 小时前
【数据结构】单链表练习
linux·前端·数据结构
烛阴5 小时前
为什么选择Day.js?比Moment.js更轻更快的日期处理神器
前端·javascript
moyu845 小时前
从 XMLHttpRequest 到 Fetch:AJAX 请求的演进与最佳实践
前端·javascript