更新记录

1.4.3（2022-08-19）

1. 修复reset当前视频数据时，不会持久化问题
2. 修复隐藏头像后，还会有一个白点
3. 增加双击事件，方便扩展功能

1.4.1（2021-02-02）

@play事件新增duration字段，回传当前播放视频时长，方便开发进度展示及控制功能

1.4.0（2021-01-30）

增加seek方法，可主动控制视频播放进度

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

sd-video

1. 快速实现视频上下滑功能，抛弃清晰度低，加载慢的官方video组件；抛弃无法渲染屏幕外，无法实现上下滑封面预加载的list组件；
2. 本插件内置预加载视频功能，预加载下两个视频，只预加载视频开头512KB，预加载空间最大占用512MB
3. 本插件内置组件复用，高性能不卡顿，集成简单，扩展方便。
4. 打包时无需勾选原生videoPlayer组件即可使用，本插件已集成
5. 只支持uniapp的nvue，只支持安卓，不支持ios，不支持ios，不支持ios，重要的事情说三遍。
6. 另想自定义布局或想二次开发的可购买源码，价格为插件价格的三倍，需要购买源码的评论留下方式联系

成品体验

点我下载体验

快速入门

• 仿抖音上下滑

<template>
    <sd-video-list ref="sdVideoListRef" @event="handleEvent" @init="handleInit" @load="handleLoad" :style="{width:'750rpx',height:windowHeight+'px'}" />
</template>
export default {
    data() {
        return {
            windowHeight: uni.getSystemInfoSync().windowHeight
        }
    },
    methods: {
        handleInit(){
            this.handleLoad()
        },
        handleLoad(){
            // 可以调用接口获取视频列表
            const data = []
            this.$nextTick(function() {
                this.$refs.sdVideoListRef.load(data)
            })
        },
        handleEvent(e){
            // 事件类型
            console.log(e.detail.type)
            // 触发事件位置
            console.log(e.detail.position)
            // 触发事件视频信息，信息结构为load时传入信息
            console.log(e.detail.video)
        }
    }
}

• 仿QQ看点视频播放结束自动下滑，只需要loop为false即可

<template>
    <sd-video-list ref="sdVideoListRef" :loop="false" @event="handleEvent" @init="handleInit" @load="handleLoad" :style="{width:'750rpx',height:windowHeight+'px'}" />
</template>
export default {
    data() {
        return {
            windowHeight: uni.getSystemInfoSync().windowHeight
        }
    },
    methods: {
        handleInit(){
            this.handleLoad()
        },
        handleLoad(){
            // 可以调用接口获取视频列表
            const data = []
            this.$nextTick(function() {
                this.$refs.sdVideoListRef.load(data)
            })
        },
        handleEvent(e){
            // 事件类型
            console.log(e.detail.type)
            // 触发事件位置
            console.log(e.detail.position)
            // 触发事件视频信息，信息结构为load时传入信息
            console.log(e.detail.video)
        }
    }
}

Variables

Option Attributes

Events

因事件参数必须放在detail中，否则参数会被清除，所以所有参数都在e.detail中

回调方法event中结构如下

{
    detail: {
        type: "like",   //触发事件类型
        position: 5,    //触发当前事件的下标
        video: ""       //触发当前事件的对象
    }
}

其中type如下

Methods

调用方法通过ref，如this.$refs.sdRef.load([])

load方法中传入数据结构如下

[{
    String url;             // 视频url，支持http和https，支持302链接
    String coverUrl;        // 封面图url

    String avatar;          // 头像url
    Boolean focusFlag;      // 是否关注,true隐藏关注控件

    Boolean likeFlag;       // 是否喜欢,true展示红心
    Number likeNum;         // 喜欢数量
    Number commentNum;      // 评论数量
    Number shareNum;        // 分享数量
    String musicUrl;        // 右下角音乐封面url

    String nickname;        // 昵称
    String description;     // 描述
    String musicName;       // 音乐名

    Number width;           // 视频宽度，可不传，传入将会判断宽度大于高度时，object-fit为contain，否则cover
    Number height;          // 视频高度，可不传，传入将会判断宽度大于高度时，object-fit为contain，否则cover
}]