这个标题起的可能有点大，因为要完成一个视频播放器的制作，不是一两篇教程就可以完成的，今天代码君教大家的只是个建议的视屏播放器，供大家学习参考吧，其实借此要讲解的控件是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>
- min 设置视频最小进度值， max 设置视频最大进度值
- 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,
})
}
})
- videoUrl 用于模拟视频切换时，显示相对应的图片
- slideNum 滑动的值
三、wxss样式
.video
{
width: 100%;
background: rebeccapurple;
}
.slider
{
width: 80%;
}
这里的样式没什么可以学习的，贴出了是方便读者可以直接拷贝，完成项目的运行
总结
今天的教程是不是觉得灰常简单，本来是打算和之前的文章合并成一个的，但是又想每篇文章都是一个独立的知识点，所以就没合并，大家就凑合着看，如果简单就一带而过，难得知识点，就多看几遍巩固一下~
