VLC视频播放器界面自定义flvrtmprtspm3u8mp4等所有视频格式

更新记录

1.0.6（2024-02-23）

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

1.0.5（2023-09-26）

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

原生插件通用使用流程：

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

付费原生插件目前不支持离线打包。
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、混音

配置

在manifest.json的节点app-plus-》distribute-》android节点下增加下面参数,可参考demo或官网https://uniapp.dcloud.net.cn/tutorial/app-manifest.html#android%E5%B9%B3%E5%8F%B0%E4%BA%91%E7%AB%AF%E6%89%93%E5%8C%85%E9%85%8D%E7%BD%AE:


                "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" @="">
        </wrs-vlc>

事件

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

方法

设置视频播放地址，支持本地文件地址和远程网络地址，本地地址如：/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;
});

设置视频界面宽高比

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
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
                })

VLC视频播放器界面自定义flvrtmprtspm3u8mp4等所有视频格式 vlc视频播放器 rtmp/rtsp/m3u8/flv/mp4

更新记录

1.0.6（2024-02-23）

1.0.5（2023-09-26）

1.0.4（2023-09-17）

平台兼容性

原生插件通用使用流程：

前言

功能

配置

组件

事件

方法

支持定制，联系方式QQ252797991

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

隐私、权限声明

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

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

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

android串口通讯

视频播放器

虹软(免费版)人脸识别

高德地图map

虹软人脸识别

VLC视频播放器界面自定义flvrtmprtspm3u8mp4等所有视频格式 vlc视频播放器 rtmp/rtsp/m3u8/flv/mp4

更新记录

1.0.6（2024-02-23）

1.0.5（2023-09-26）

1.0.4（2023-09-17）

平台兼容性

原生插件通用使用流程：

前言

功能

配置

组件

事件

方法

支持定制，联系方式QQ252797991

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

隐私、权限声明

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

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

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

android串口通讯

视频播放器

虹软(免费版)人脸识别

高德地图map

虹软人脸识别

Modal title