更新记录

1.0.0（2019-10-17）

初始化代码 倍速播放功能

平台兼容性

[TOC]

目录结构

使用方法

直接使用

index.vue

<template>
    <view class="e-page">
        <video class="course_image" id="myVideo" :src="videoUri" controls v-if="videoUri">
            <cover-view class="video-control">
                <cover-view class="multi rate" @tap="showSwitchRate">x {{ currentRate }}</cover-view>
            </cover-view>
            <cover-view class="multi-list rate" :class="{ active: rateShow }">
                <cover-view
                    v-for="(item, index) in ['0.5', '0.8', '1.0', '1.25', '1.5']"
                    :key="index"
                    class="multi-item rate"
                    :data-rate="item"
                    @tap="switchRate"
                    :class="{ active: item == currentRate }"
                >
                    {{ item }}
                </cover-view>
            </cover-view>
        </video>
    </view>
</template>

<script>
export default {
    data() {
        return {
            videoUri: '//player.alicdn.com/video/aliyunmedia.mp4', // 视频地址
            rateShow: false, // 倍速浮层
            currentRate: 1.0 // 默认倍速
        };
    },
    onLoad() {},
    methods: {
        // 显示倍速浮层
        showSwitchRate(rate) {
            let that = this;
            console.log('rateShow');
            that.rateShow = true;
        },
        // 切换倍速
        switchRate(e) {
            let that = this;
            let rate = Number(e.currentTarget.dataset.rate);
            that.currentRate = rate;
            that.rateShow = false;
            this.videoContext.playbackRate(rate);
        }
    }
};
</script>

<style>
/* 以下为视频CSS */
.course_image {
    width: 100%;
}
.video-control {
    background-color: rgba(0, 0, 0, 0.1);
    height: 90rpx;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 997;
}
.video-wrap {
    position: relative;
}
.multi-list.full-screen.vertical {
    height: 100vh !important;
    padding: 8vh 0;
}
.multi-list.full-screen.horizontal {
    height: 100vw !important;
    padding: 8vw 0;
}
.multi {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 998;
    width: 100rpx;
    color: #fff;
    padding: 10rpx 0;
    text-align: center;
    transition: color ease 0.3s;
}
.multi.rate {
    right: 30rpx;
}
.multi-list {
    position: absolute;
    height: 100%;
    width: 0;
    background-color: rgba(0, 0, 0, 0.65);
    top: 0;
    right: 0;
    transition: width 0.3s ease;
    z-index: 999;
    box-sizing: border-box;
    padding: 50rpx 0;
}
.multi-list.rate {
    padding: 25rpx 0;
}
.multi-list.active {
    width: 300rpx;
}
.multi-item {
    text-align: center;
    color: #fff;
    line-height: 80rpx;
    transition: color ease 0.3s;
}
.multi-item.rate {
    line-height: 70rpx;
}
.multi-item:hover,
.multi:hover {
    color: #00d8ff;
}
.multi-item.active {
    color: #00d8ff;
} /* 视频CSS结束 */
</style>

组件使用

index.vue

<template>
    <view class="e-page">
        <sy-video :videoUri="videoUri" style="width: 100%;"></sy-video>
    </view>
</template>

<script>
import SyVideo from '@/components/shoyu-video/shoyu-video';
export default {
    components: { SyVideo },
    data() {
        return {
            videoUri: '//player.alicdn.com/video/aliyunmedia.mp4', // 视频地址
        };
    },
    onLoad() {},
    methods: {
    }
};
</script>