微信小程序原生步骤条

Posted 2023-04-12

参考技术A 方法一：微信小程序的progress组件，组件的百分比为80% /当前步骤列表的长度-1

方法二：除第一元素不添加横线，为其他剩余元素添加定位横线，横线的宽度为600px/当前步骤列表的长度-1

https://gitee.com/susuhhhhhh/picker

微信小程序（原生）——video视频禁止拖动进度条可全屏观看等视频播放结束事件数据监听显示播放时长固定倍速视频去除黑边等

一、案例演示

保留播放暂停、全屏按钮，进度条隐藏掉、手势拖动禁用

代码

 <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" show-fullscreen-btn="true" show-center-play-btn="false"  show-play-btn="true"  show-progress="false"  enable-progress-gesture=" false " ></video>

官方文档地址:
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

监听视频是否播放完毕

<video bindended="palyEnd"></video>
<view class="startAnswer">
	<!--默认显示图片1-->
   <image src="1.png" wx:if="isAnswer == false"></image>
   <image src="2.png" wx:if="isAnswer == true"></image>
</view>

js文件

data:
	isAnswer:false,//默认

// 播放完毕
palyEnd()
   console.log("播放结束");
    // 显示按钮,这个地方是重点，局部地方会重新渲染
    this.setData( isAnswer: true );
,

二、案例演示（倍速播放）

单纯想让视频固定倍速播放

代码

网址：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.playbackRate.html

onReady: function () 
     // 倍速
     this.videoContext = wx.createVideoContext('myVideo');
     this.videoContext.playbackRate(2);//倍率，支持 0.5/0.8/1.0/1.25/1.5，2.6.3 起支持 2.0 倍速
 ,

三、案例演示（去除进度条但还想显示视频时长）

去除进度条 就是没有使用controls属性，相对应的时间也就不显示了，目前想让时间显示出来，那这个地方需要自己去获取，并处理，这里用bindtimeupdate="timeUpdate"方法

代码

wxml:

<view class="videoBox">
    <video id="myVideo" bindloadedmetadata="videometa" binderror="videoErrorCallback"  src="videoUrl" show-fullscreen-btn="true" show-center-play-btn="false"  show-play-btn="true"  show-progress="false"  enable-progress-gesture=" false " bindended="palyEnd" bindtimeupdate="timeUpdate"></video>
    <view class="videoTime">
        currentTimeShow/durationShow
    </view>
</view>

wxss:

/* 视频模块 */
.videoBox
   position: relative;

.videoBox video
    width: 100%;

.videoTime
    position: absolute;
    right: 12%;
    bottom: 36rpx;
    color: #fff;
    font-size: 20rpx;

js

 /**
     * 页面的初始数据
     */
data: 
     durationShow:'00:00',//时间总时长
     currentTimeShow:'00:00',//播放总进度时间
 ,
timeUpdate: function (e) 
 console.log(e);
  //总时长
  let duration = parseInt(e.detail.duration)
  //播放进度时间
  let currentTime =parseInt(e.detail.currentTime)
  //由于获取的都是秒数，需要进行处理，处理成00：00的格式
  let m_d = duration >= 60 ? Math.floor(duration / 60) : 0;
  let s_d =  duration % 60;
  let durationShow = (m_d < 10 ? '0' + m_d : m_d) + ':' + (s_d < 10 ? '0' + s_d : s_d);
  // 播放时间
  let m = currentTime >= 60 ? Math.floor(currentTime / 60) : 0;
  let s =  currentTime % 60;
  let currentTimeShow = (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
  this.setData(
      currentTimeShow:currentTimeShow,
      durationShow:durationShow
  )
,

四、案例演示（视频全面显示，去除两侧黑边）

如果视频高度设置了200px，由于视频要完整显示，他的两侧就会出现黑边，那如何让视频不出现黑边，宽度占满呢？

wxml:

<!-- 视频模块 -->
 <view class="videoBox">
     <video id="myVideo" style="height:heightpx; width:widthpx;"  src="videoUrl" controls bindloadedmetadata="videometa" binderror="videoErrorCallback"></video>
 </view>

js:

 videometa: function (e) 
   var that = this;
   //获取系统信息
   wx.getSystemInfo(
       success(res) 
           //视频的高
           var height = e.detail.height;
           //视频的宽
           var width = e.detail.width;
           //算出视频的比例
           var proportion = height / width;
           //res.windowWidth为手机屏幕的宽。
           var windowWidth = res.windowWidth;
           //算出当前宽度下高度的数值
           height = proportion * windowWidth;
           that.setData(
               height,
               width: windowWidth
           );
       
   )
,