更新记录

1.0.6(2024-02-23)

  1. 增加vlc设置参数接口VLCMgr.setOptions(params)

1.0.5(2023-09-26)

  1. android增加是否采用TextureView渲染接口VLCMgr.setUseTextureView(params)

1.0.4(2023-09-17)

1.修复uniapp新版本基座兼容性问题

查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 14.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 17

原生插件通用使用流程:

  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原生插件配置”->”云端插件“列表中删除该插件重新选择


前言

vlc原生视频播放器,支持Android、iOS,支持视频格式有rtmp、rtsp、m3u8(hls)、flv、mp4等常用视频格式,支持本地、远程视频,UI界面完全自定义, 支持截图、录屏、速率、快进、倒退、视频缩放、视频纵横比、音频channel、视频channel

功能

  • 支持视频格式有rtmp、rtsp、m3u8(hls)、flv、mp4等常用视频格式
  • UI界面完全自定义
  • 支持视频进度、截图、录屏、速率、快进、快退、视频缩放、视频纵横比、音频channel、视频channel、混音

配置


                "packagingOptions": [
                    "pickFirst 'lib/*/libc++_shared.so'",
                    "pickFirst 'lib/*/libvlc.so'",
                    "pickFirst 'lib/*/libvlcjni.so'"
                ]
  • Android最低版本需要配置为21

 "minSdkVersion" : 21

var VLCMgr = uni.requireNativePlugin("wrs-vlc-mgr");
  • android是否采用TextureView渲染,仅支持android

            switch (uni.getSystemInfoSync().platform) {
                case 'android':
                // 要在渲染<wrs-vlc />组件之前设置
                // android上是否使用TextureView来渲染页面
                // 1. 如果不需要截屏,不建议用TextureView来渲染,使用TextureView会有报错:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!
                // 但也能正常播放,只是在某些特殊业务上有问题
                // 2. 如果要截屏需要采用TextureView来渲染页面
                    var params = {}
                    params.useTextureView = false
                    VLCMgr.setUseTextureView(params)
                    break;
                default:
                    break;
            }
  • 设置vlc初始化参数,需要在使用控件使用之前设置

var params = {}
params.options = ["-vvv", "--no-drop-late-frames", "--no-skip-frames", "--rtsp-tcp", "--avcodec-hw=any", "--live-caching=0"]
VLCMgr.setOptions(params)

组件


<wrs-vlc ref='vlc' :style="'width:'+width+'px;height:'+height+'px;'"  @onLoadView="onLoadView" @onTimeChange="onTimeChange" @onPositionChange="onPositionChange" @onTotalTime="onTotalTime" @onPlayEnd="onPlayEnd" @onPlayError="onPlayError" @onOpening="onOpening" @onPlaying="">
        </wrs-vlc>

事件

  • @onLoadView 加载组件,组件相关API需要在此方法里或此方法之后调用
  • @onTimeChange 播放时间进度改变
  • @onPositionChange 播放百分比进度改变
  • @onTotalTime 获取到视频总时间
  • @onPlayEnd 视频播放完
  • @onPlayError 视频播放出错,一般是网络问题或播放地址不正确导致
  • @onOpening 正在打开视频
  • @onPlaying 正在播放视频

方法

  • 设置视频播放地址,支持本地文件地址和远程网络地址,本地地址如:/aaa/sss/aa.mp4

                this.$refs.vlc.setUrl({
                    url: this.url
                });
  • 开始播放视频

this.$refs.vlc.play();
  • 暂停播放

this.$refs.vlc.pause();
  • 停止播放

this.$refs.vlc.stop();
  • 释放资源,当摧毁页面的时候需要释放资源

this.$refs.vlc.releaseResource();
  • 是否在播放中

this.$refs.vlc.isPlaying((resp)=>{
    var isPlaying = resp.isPlaying;
});
  • 设置播放进度,这里指的是百分比进度,常用来拖动进度条时快进播放

this.$refs.vlc.setPosition({
    position: 0.5
});
  • 获取播放进度

this.$refs.vlc.getPosition((resp)=>{
    var position = resp.position;
});
  • 设置视频界面宽高比
  1. android videoScale支持:DEFAULT, FILL_TO_SCREEN, 4:3, 16:9, 16:10, 2.21:1, FILL, 2.35:1, 2.39:1, 5:4, ORIGINAL
  2. ios videoScale支持:DEFAULT, FILL_TO_SCREEN, 4:3, 16:9, 16:10, 2.21:1,iOS其它比例需要各自去测试

this.$refs.vlc.setVideoScale({
    videoScale: "16:9"
});
  • 获取视频界面宽高比

this.$refs.vlc.getVideoScale((resp)=>{
    var videoScale = resp.videoScale;
});
  • 设置视频纵横比

this.$refs.vlc.setAspectRatio({
    videoScale: "1000:600"
});
  • 获取视频纵横比

this.$refs.vlc.getAspectRatio((resp)=>{
    var aspectRatio = resp.aspectRatio;
});
  • 设置视频缩放

this.$refs.vlc.setScale({
    scale: 2
});
  • 获取视频缩放

this.$refs.vlc.getScale((resp)=>{
    var scale = resp.scale;
});
  • 设置播放速率

this.$refs.vlc.setRate({
    rate: 2
});
  • 获取播放速率

this.$refs.vlc.getRate((resp)=>{
    var rate = resp.rate;
});
  • 设置音频延时,仅支持Android

this.$refs.vlc.setAudioDelay({
    audioDelay: 2
});
  • 获取音频延时,仅支持Android

this.$refs.vlc.getAudioDelay((resp)=>{
    var audioDelay = resp.audioDelay;
});
  • 设置音频输出,仅支持Android

this.$refs.vlc.setAudioOutput({
    aout: "xx"
});
  • 设置播放时间

this.$refs.vlc.setTime({
    time: 2000 // 毫秒
});
  • 获取播放时间

this.$refs.vlc.getTime((resp)=>{
    var time = resp.time;
});
  • 设置标题,仅支持Android

this.$refs.vlc.setTitle({
    title: 2000 // 毫秒
});
  • 获取标题,仅支持Android

this.$refs.vlc.getTitle((resp)=>{
    var title = resp.title;
});
  • 设置标题展示,仅支持Android

this.$refs.vlc.setVideoTitleDisplay({
    position: 0.5,
    timeout: 0
});
  • 设置音频轨道channel

this.$refs.vlc.setAudioTrack({
    audioTrack: 11
});
  • 获取音频轨道channel

this.$refs.vlc.getAudioTrack((resp)=>{
    var audioTrack = resp.audioTrack;
});
  • 获取音频轨道channel数量

this.$refs.vlc.getAudioTracksCount((resp)=>{
    var audioTracksCount = resp.audioTracksCount;
});
  • 获取所有音频轨道channel

this.$refs.vlc.getAudioTracks((resp)=>{
    var audioTracks = resp.audioTracks;
});
  • 设置视频轨道channel

this.$refs.vlc.setVideoTrack({
    videoTrack: 11
});
  • 获取视频轨道channel

this.$refs.vlc.getVideoTrack((resp)=>{
    var videoTrack = resp.videoTrack;
});
  • 获取视频轨道channel数量

this.$refs.vlc.getVideoTracksCount((resp)=>{
    var videoTracksCount = resp.videoTracksCount;
});
  • 获取所有视频轨道channel

this.$refs.vlc.getVideoTracks((resp)=>{
    var videoTracks = resp.videoTracks;
});
  • 获取当前视频轨道channel

this.$refs.vlc.getCurrentVideoTrack((resp)=>{
    var currentVideoTrack = resp.currentVideoTrack;
});
  • 是否开始视频轨道channel

this.$refs.vlc.setVideoTrackEnabled({
    videoTrackEnabled: true
});
  • 设置spu track

this.$refs.vlc.setSpuTrack({
    spuTrack: 0
});
  • 获取spu track

this.$refs.vlc.getSpuTrack((resp)=>{
    var spuTrack = resp.spuTrack;
});
  • 获取所有spu track

this.$refs.vlc.getSpuTracks((resp)=>{
    var spuTracks = resp.spuTracks;
});
  • 设置chaper

this.$refs.vlc.setChapter({
    chapter: 0
});
  • 获取chaper

this.$refs.vlc.getChapter((resp)=>{
    var chapter = resp.chapter;
});
  • 开始录制视频

this.$refs.vlc.startRecord({
    directory: "/adfasf/asdf"
});
  • 停止录制视频

this.$refs.vlc.stopRecord();
  • 获取视频总时间

this.$refs.vlc.getTotalTime((resp)=>{
    var time = resp.time
});
  • 增加Slave

this.$refs.vlc.addSlave({
    type: 0, // 0: VLCMediaPlaybackSlaveTypeSubtitle 1:VLCMediaPlaybackSlaveTypeAudio
    url: "",
    select: true
});
  • 视频截图

ios:


this.$refs.vlc.saveVideoSnapshot({
    path: "/asdfaf/ss", 
    width: 100,
    height: 100
});

android:


                // 需要采用TextureView渲染时截屏才有效
                var timestamp = new Date().getTime();
                var params = {}
                params.filePath = "/sdcard/" + timestamp + ".jpg"
                this.$refs.vlc.snapshot(params, (resp)=>{
                    this.snapshotFilePath = params.filePath
                })

支持定制,联系方式QQ252797991

如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问