這個標題起的可能有點大，因為要完成一個視頻播放器的制作，不是一兩篇教程就可以完成的，今天代碼君教大家的只是個建議的視屏播放器，供大家學習參考吧，其實借此要講解的控件是slide，滑動選著器

slide.gif

屬性介紹

視頻播放器的制作

一、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%;
}

這里的樣式沒什么可以學習的，貼出了是方便讀者可以直接拷貝，完成項目的運行

總結

今天的教程是不是覺得灰常簡單，本來是打算和之前的文章合并成一個的，但是又想每篇文章都是一個獨立的知識點，所以就沒合并，大家就湊合著看，如果簡單就一帶而過，難得知識點，就多看幾遍鞏固一下~

相關文章推薦：微信小程序實戰篇-購物車