更新记录

1.0.7（2023-06-08） 下载此版本

处理微信小程序全屏后的错误，全屏倍速暂时只在H5环境有效

1.0.6（2023-04-27） 下载此版本

添加全屏后的倍速功能

1.0.5（2023-03-23） 下载此版本

修复安卓H5全屏横屏无法退出的问题

平台兼容性

x-video

介绍

封装原生video，重写了控制条，包含播放暂停、静音、进度条、倍速菜单、垂直全屏、缓冲Loading、断点播放。

使用说明

• 控制播放可以点击左下按钮和视频区域
• 进度条使用的内置组件slider，在videoLoaded事件根据播放时间滑动，可手动拖动
• progress，表示初始时间占比，例：0.1，就是10%，控制断点播放
• step，表示当前时间占比，例：5，每5%跳一次，取值必须大于0且为整数
• 控制条会在5秒后过渡隐藏，点击视频区域重新显示
• 运行到微信小程序videoSrc要为http/https开头，预览时超出体积限制需删除test.mp4

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

<template>
    <view>
        <x-video ref="videoPlayer" :src="videoSrc" :progress="progress" @play="videoPlay"
                         @pause="videoPause" @ended="videoEnded" @timeupdate="videoTimeUp" @loadeddata="videoLoaded"
                         @seeking="videoSeeking" @seeked="videoSeeked" @error="videoError"/>
    </view>
</template>

export default {
    data() { 
        return {
            videoSrc:"",
            progress:0
        }
    },
    methods:{
        // 视频信息加载完成
        videoLoaded(durationTime) {},
        // 当前播放时间
        videoTimeUp(currentTime) {},
        // 点击原始播放
        videoPlay() {},
        // 正在拖动
        videoSeeking() {},
        // 拖动结束
        videoSeeked() {},
        // 触发暂停
        videoPause() {},
        // 播放结束
        videoEnded() {},
        // 播放错误
        videoError() {}
    }
}

API