zoukankan      html  css  js  c++  java
  • uni-app 音频audio样式自定义

    写项目遇到了,需要改audio的样式,然后就自己写了一个audio的组件

    样式图:

    第一步:对样式进行布局:

    <view class="audo-video">
      <video id="myVideo" :src="url" class="hidden" @timeupdate="timeupdate" ref="video" @loadedmetadata="loadedmetadata" ></video>
         <view class="play">
             <view class="play-left">
                 <image src="../../static/detail/autions.png" v-show="playshow" @tap="play"></image>  //暂停的图片
                 <image src="../../static/detail/autions3.png" v-show="stipshow" @tap="stop"></image> //播放的图片
                 <text>{{timer}}/</text>
                 <text style="margin-left:84upx;">{{overTimer}}</text>
             </view>
                <view class="play-right">
                    <slider
                        @change="sliderChange"
                        @changing="sliderChanging"
                        class="slider" 
                        block-size="16" 
                        :min="0"
                        :max="duration"
                        :value="currentTime"
                        activeColor="#595959"
                        @touchstart="lock= true"
                        @touchend="lock = false"
                        />
                </view>
            </view>
            
        </view>

     第二步:在data里面添加默认是数据

    return {
                    playshow:true, //播放的图片
                    stipshow:false, //暂停的图片
                    lock: false, //
                    status: 1, // 1暂停 2播放
                    currentTime: 0,  //当前进度
                    duration: 100, // 总进度
                    videoContext: '',
                }

    第三步:用computed方法,对进度条的时间进行监听变化

        computed:{
                timer() {
                
                    return calcTimer(this.currentTime)
                },
                overTimer() {
                
                    return calcTimer(this.duration)
                }
            },

    第四步:给video创建一个动态的id:

    created() {
       this.videoContext = uni.createVideoContext('myVideo')
          },

    第五步:写播放,暂停和更新进度条等事件

      // 播放
      play() {
        this.stipshow=true;
        this.playshow=false;
        this.status = 2;
        this.videoContext.play();
             }, 
      // 暂停
       stop() {
        this.stipshow=false;
        this.playshow=true;
        this.videoContext.pause()
        this.status = 1
             },
      // 更新进度条
        timeupdate(event) {
           if(this.lock) return; //
              var currentTime,duration;
           if(event.detail.detail) {
              currentTime = event.detail.detail.currentTime
              duration = event.detail.detail.duration
              }
    else { currentTime = event.detail.currentTime duration = event.detail.duration } this.currentTime = currentTime this.duration = duration }, // 拖动进度条 sliderChange(data) { this.videoContext.seek(data.detail.value) }, //拖动中 sliderChanging(data) { this.currentTime = data.detail.value }, // 视频加载完成 loadedmetadata(data) { this.duration = data.detail.duration }

    最后 在写一个计算拖动事件的方法就可以了,这个是和data同级的

        function calcTimer(timer) {
            if(timer === 0 || typeof timer !== 'number') {
                return '00:00'
            }
            let mm = Math.floor(timer / 60)
            let ss = Math.floor(timer % 60)
            if(mm < 10) {
                mm = '0' + mm
            }
            if(ss < 10) {
                ss = '0' + ss
            }
            return mm + ':' + ss
        }

    css样式附加一部分:

    <style scoped lang="scss">    
    /deep/.uni-slider-handle-wrapper{
        background: black !important;
    }
    /deep/.uni-slider-thumb{
        background: black !important;
    }
        .play{
                   background: #f1f3f4;
                    94%;
                   height: 124upx;
                   position: relative;
                   margin: 20px auto 6px auto;
                   border-radius: 38px;
        }
        .play-left text{
            margin-top: 1px;
            color: black;
            font-size: 13px;
            line-height: 58px;
            position: absolute;
            
        }
        .slider{
                    336upx;
                position: relative;
                margin-top: 42upx;
                color: black;
                float: left;
        }
        .musions{
             26px;
            height: 26px;
               margin: 17px 4px 0 5px;
                float: left;
        }
        .play image{
                 26px;
                height: 26px;
                   margin: 17px 4px 0 5px;
                    float: left;
        }
        .play-left{
             216upx;
            height: 116upx;
            
            float: left;
            border-radius: 38px;
        }
        .play-right{
             66%;
            float: left;
            height: 58px;
            position: relative;
        }
        .audo-video {
                100%;
                   position: relative;
                   top: -18px;
        }
        .slider-box {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26upx;
            color: #999;
        }
        
        button {
            display: inline-block;
             100upx;
            background-color: #fff;
            font-size: 24upx;
            color: #000;
            padding: 0;
        }
        .hidden {
            position: fixed;
            z-index: -1;
             1upx;height: 1upx;
        }
    </style>
    View Code

    最后,附加一个倍数的事件方法:

            <button @tap="setRate(0.5)">0.5倍</button>
            <button @tap="setRate(0.75)">0.75倍</button>
            <button @tap="setRate(1)">1倍</button>
            <button @tap="setRate(1.5)">1.5倍</button>
            <button @tap="setRate(2)">2倍</button>

            // 倍速
            setRate(num) {
               this.videoContext.playbackRate(num)
                         },

  • 相关阅读:
    杜教筛
    GCD Counting Codeforces
    洛谷 P4317 花神的数论题 || bzoj3209
    About set HDU
    Queue Sequence HDU
    bzoj2154||洛谷P1829 Crash的数字表格&&JZPTAB && bzoj3309 DZY Loves Math
    洛谷 P1445 [Violet]樱花
    洛谷 P2158 [SDOI2008]仪仗队 && 洛谷 P1447 [NOI2010]能量采集
    nginx中使用waf防火墙
    wordpress安装
  • 原文地址:https://www.cnblogs.com/lovebear123/p/14202312.html
Copyright © 2011-2022 走看看