微信小程序-视频播放器的制作

这个标题起的可能有点大，因为要完成一个视频播放器的制作，不是一两篇教程就可以完成的，今天代码君教大家的只是个建议的视屏播放器，供大家学习参考吧，其实借此要讲解的控件是slide，滑动选着器

slide.gif

属性介绍

属性名	作用	参数值
min	滑动器最小值	0
max	滑动器最小值	0
step	步长，取值必须大于 0，并且可被(max - min)整除	1
disabled	是否禁用	true/false 默认false
color	背景条的颜色（请使用 backgroundColor）	默认值#e9e9e9
selected-color	已选择的颜色（请使用 activeColor）	默认值#1aad19
activeColor	已选择的颜色	默认值#1aad19
backgroundColor	背景条的颜色	默认值#e9e9e9
show-value	是否显示当前 value	true/false 默认false
bindchange	事件监听e.detail.value获取当前值

视频播放器的制作

一、wxml界面实现

<view class='title-line'>
  slider</view>
<view class='video'>
  <image class='video' src='{{videoUrl}}'></image>
  <view class='row'>

    <text>{{slideNum}}:00</text>
    <slider class='slider' bindchange="sliderchange" step="1" min='0' max='50' />
    <text>50:00</text>

  </view>
</view>

1. min 设置视频最小进度值， max 设置视频最大进度值
2. bindchange 事件监听设置

二、xxx.js

Page({
  data: {
    videoUrl: "http://7xnmrr.com1.z0.glb.clouddn.com/video1.jpeg",
    slideNum: 0,
  },
sliderchange: function (e) {
    var num = e.detail.value;
    var url;
    if (num > 10) {
      url = "http://7xnmrr.com1.z0.glb.clouddn.com/video2.jpeg"
    }
    else {
      url = "http://7xnmrr.com1.z0.glb.clouddn.com/video1.jpeg"
    }
    this.setData({
      videoUrl: url,
      slideNum: num,
    })
  }
})

1. videoUrl 用于模拟视频切换时，显示相对应的图片
2. slideNum 滑动的值

三、wxss样式

.video
{
  width: 100%;
  background: rebeccapurple;
}
.slider
{
  width: 80%;
}

这里的样式没什么可以学习的，贴出了是方便读者可以直接拷贝，完成项目的运行

总结

今天的教程是不是觉得灰常简单，本来是打算和之前的文章合并成一个的，但是又想每篇文章都是一个独立的知识点，所以就没合并，大家就凑合着看，如果简单就一带而过，难得知识点，就多看几遍巩固一下~

相关文章推荐：微信小程序实战篇-购物车

建了一个小程序技术交流群，想入群的读者请加微信

小程序入群.png