微信小程序-視頻播放器的制作

這個標題起的可能有點大,因為要完成一個視頻播放器的制作,不是一兩篇教程就可以完成的,今天代碼君教大家的只是個建議的視屏播放器,供大家學習參考吧,其實借此要講解的控件是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%;
}

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

總結

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

相關文章推薦:微信小程序實戰篇-購物車
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 一:通過數組形式遍歷字符串的每一個字符 注:name[index]訪問指定字符串指定索引位置的字符 str.Le...
    程序小妖精閱讀 234評論 0 0
  • 2017-7-21 我的母校白關中學即將舉辦六十周年校慶,短短時間內校友1群就滿員了,十分熱鬧。碰到了初中的地理老...
    榕嬤嬤閱讀 240評論 0 0
  • 劉曉慶曾說:“中國女人放棄自己太早了。”國內大都數30歲女人,應該過著結婚、相夫教子的生活,外加一份可有可無的工作...
    慕夏CC閱讀 478評論 2 8
  • 臨睡前在網上很隨意的點了開了《驚惶龐麥郎》,原本以為是篇過時的文章,第二天才發現是篇時文。或許文章真的是在還原龐...
    BLAKE閱讀 372評論 0 2