更新记录

1.0.6（2023-12-03）

增加倍速播放功能

1.0.5（2023-11-24）

1. 增加选集功能
2. 更改分辨率切换逻辑与选集一致，更有利于自定义切换分辨率和选集

1.0.4（2023-11-21）

1. 增加多分辨率视频播放功能
2. 将视频播放控制条单独封装为组件

平台兼容性

xt-video一款简单好用的视频播放器组件

简介

当前仅支持H5版本，后续会不断更新迭代。如果有什么需求，可在评论区留言。发布该版本主要是为了公司项目使用。

基本用法

<template>
    <view class="index">
        <xt-video
            video-id="video"
            src="xxx"
            poster="xxx"
        />
    </view>
</template>

props

属性speeds数组的默认值

[
    { rate: 0.5, name: '0.5x' },
    { rate: 0.8, name: '0.8x' },
    { rate: 1.0, name: '1.0x' },
    { rate: 1.25, name: '1.25x' },
    { rate: 1.5, name: '1.5x' },
    { rate: 2.0, name: '2.0x' }
]

属性ratios为一个对象数组，其有效值如下：

属性episodes为一个对象数组，其有效值如下：

注意：

分辨率和集数的url都不是必填项，根据你们后端提供的视频地址来自己确定即可。有可能需要前端自己拼写不同分辨率，不同集数的视频地址。

事件

方法，通过$refs进行调用

示例代码：

<template>
    <view class="index">
        <xt-video
            ref="xtVideoRef"
            video-id="video"
            src="xxx"
            poster="xxx"
            :episodes="episodes"
            :ratios="ratios"
            @Ratio="handleChangeRatio"
            @Epi="handleChangeEpi"
        />
    </view>
</template>
<script>
export default {
    data() {
        return {
            ratios: [
                { 
                    id: '480p',
                    url: 'xxx.mp4',
                    name: '标清'
                },
                {
                    id: '720p',
                    url: 'xxx1.mp4',
                    name: '高清'
                },
                {
                    id: '1080p',
                    url: 'xxx2.mp4',
                    name: '超清'
                }
            ],
            episodes: [
                {
                    id: '1',
                    url: 'xxx.mp4',
                    name: '1',
                    isVip: false
                },
                {
                    id: '2',
                    url: 'xxx.mp4',
                    name: '2',
                    isVip: false
                },
                {
                    id: '3',
                    url: 'xxx.mp4',
                    name: '3',
                    isVip: true
                }
            ]
        },
        methods: {
            // 自定义切换分辨率方法
            handleChangeRatio(item) {
                this.$refs.xtVideoRef.xtVideoReload({
                    url: item.url
                })
            },
            // 自定义切换集数方法
            handleChangeEpi(item) {
                this.$refs.xtVideoRef.xtVideoReload({
                    url: item.url,
                    startTime: 0
                })
            }
        }
    }
}
</script>