关键词：

YL视频播放器uniapp插件市场地址：https://ext.dcloud.net.cn/plugin?id=9569

简介

YL视频播放器是一款适用于安卓端的高性能原生插件（ios暂不支持），支持3核心切换（exo，ijk，安卓原生），支持点播录播，小窗播放，支持各种视频播放常用功能，适用于各种常见播放场景如在线教育，小视频，朋友圈等等！

效果图

V1.1新增：

1.视频播放器返回箭头事件：@back

<yl-video-view style="width: 100%;height: 210px;" 
	ref="player" 
	data="" 
	url=""
	poster=""
	@onPlayerStateChanged="onPlayerStateChanged" 
	@onPlayStateChanged="onPlayStateChanged" 
	@onControllerStateChange="onControllerStateChange" 
	@replay="replay"
	@back="back" />

2.当视频正在加载中时，根据需要显示返回按钮：

this.$refs.player.showBackWhenLoading();

目的在于长时间未加载成功时，可点击返回按钮退出页面；

3.设置视频显示模式及比例：

this.$refs.player.setScaleType(0)

类型	释义
0	默认
1	16：9
2	4：3
3	拉伸充满父容器
4	原始比例
5	居中裁剪

4.设置小窗播放宽高：

this.$refs.player.setTinyScreenSize(800, 600);

5.长按倍速播放：

this.$refs.player.enableLongClickSpeed();//开启长按倍速播放（默认3倍速）
this.$refs.player.setLongClickSpeed(2);//设置长按倍速倍数为2（只能选择2倍或3倍）

说明：1.长按倍速播放支持录播和小视频，录播时如果已经设置了倍速，则长按倍速播放功能无效。
2.长按倍速倍数只能设置为2或3倍速。

6.设置横竖屏：0横屏 1竖屏

this.$refs.player.setScreenOrientation(0);//0横屏 1竖屏

使用方法：

1.基本使用

组件：yl-video-view

使用方法：

<yl-video-view style="width: 100%;height: 210px;" 
	ref="player" 
	data="" 
	url=""
	poster=""
	@onPlayerStateChanged="onPlayerStateChanged" 
	@onPlayStateChanged="onPlayStateChanged" 
	@onControllerStateChange="onControllerStateChange" 
	@replay="replay" />

属性：

属性名	释义
url	视频链接地址
poster	视频封面图（与thumb区别请看下方讲解）
data	视频信息：Json字符串格式(需要使用JSON.stringify)

data数据格式：

	url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
	title: "测试",//视频标题
	hideTitle: false,//是否隐藏标题（非全屏时会隐藏，全屏时显示）
	auto: true,//是否自动播放
	isLive: false,//是否时直播
	core: 'exo',//播放器核心：exo，ijk，media
	errorMsg: "播放错误，请重试",//播放错误时提示文字
	disableFullScreen: false//是否禁用全屏按钮,
	thumb:""//封面图（与poster的区别请看下面讲解）

需要注意的是，使用属性赋值时，需要是固定值，也就是写死的，非动态的，且默认是自动播放的，如果要动态赋值，且需要定制化一下参数时，请使用以下方法：

setCore：设置播放器核心，默认exo，（需在播放前调用）

this.$refs.player.setCore("exo");

setPosterUrl：设置封面图，poster和thumb都是封面图，区别在于poster是与播放器分离的，覆盖在播放器之上的，使用场景是在未初始化播放器之前，显示一张图片，可单独设置显示隐藏，而thumb属于视频播放器的一部分，设置了就会跟随视频播放状态显示隐藏（参考案例1-在线课程）。

this.$refs.player.setPosterUrl("xxx");

hidePoster：隐藏封面图

this.$refs.player.hidePoster();

play(url,isLive)：播放，只跟换url，及直播点播类型，其它参数无需修改时使用

this.$refs.player.play("xxx",false);

playWithParams：播放，需传入定制参数

var params=
				url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
				title: "测试",
				hideTitle: false,
				auto: true,
				isLive: false,
				core: 'exo',
				errorMsg: "播放错误，请重试",
				disableFullScreen: false
			;
this.$refs.player.playWithParams( JSON.stringify(params));

replay：重新播放

this.$refs.player.replay();

startTinyScreen：小窗播放

this.$refs.player.startTinyScreen();

stopTinyScreen：停止小窗播放，恢复正常播放

this.$refs.player.stopTinyScreen();

pause：暂停播放

this.$refs.player.pause();

resume：继续播放

this.$refs.player.resume();

seekTo：设置视频播放起始位置（滑动控制条进度）

this.$refs.player.seekTo(position);//position为s（秒）

setTitle：设置视频标题

this.$refs.player.setTitle("xxx");

hideTitleView：隐藏视频标题

this.$refs.player.hideTitleView();

showTitleView：显示视频标题

this.$refs.player.showTitleView();

startFullScreen：全屏显示

this.$refs.player.startFullScreen();

stopFullScreen：停止全屏显示，恢复正常显示

this.$refs.player.stopFullScreen();

startCountDown(timestamp)：直播场景时的倒计时，参考案例1-在线课程

this.$refs.player.startCountDown(1669809963000);//参数为时间戳（ms）

事件

事件名	释义
@onPlayerStateChanged	播放器状态：正常10，全屏11，小窗12
@onPlayStateChanged	播放状态：正常0，准备1，准备完成2，播放中3，暂停4，播放完成5，缓冲6，缓冲完成7，开始播放终止8，错误-1
@onControllerStateChange	控制条状态：隐藏0，显示1
@replay	播放完成时，点击重新播放按钮时的回调
@back	返回按钮回调
@onCountDownEnd	倒计时结束回调

2.小视频

组件：yl-short-video-view

使用方法：

<yl-short-video-view style="flex: 1;" 
		ref="player" 
		@onPlayerStateChanged="onPlayerStateChanged" 
		@onScrollStateChanged="onScrollStateChanged" 
		@back="back" />

方法：

setCore：设置播放器核心，默认exo，（需在播放前调用）

this.$refs.player.setCore("exo");

play(data)：播放，传入的参数为array的json字符串，即小视频列表信息

var dataList = [
					"coverImg": "https://img2.woyaogexing.com/2022/07/22/e53e84a02fa9de57.jpg",
					"id": 0,
					"videoUrl": "https://v-cdn.zjol.com.cn/280443.mp4"
				    ,
				    ...
			    ]
this.$refs.player.play(JSON.stringify(dataList));

pause：暂停播放

this.$refs.player.pause();

resume：继续播放

this.$refs.player.resume();

事件

事件名	释义
@onPlayStateChanged	播放状态：正常0，准备1，准备完成2，播放中3，暂停4，播放完成5，缓冲6，缓冲完成7，开始播放终止8，错误-1
@onScrollStateChanged	滑动状态：正常0，手指触摸滑动时1，手指离开即将停止滑动时2
@back	点击返回按钮

注意事项：小视频是全屏状态，返回按钮是固定的，组件只需要封面图和视频url，而覆盖在视频上方，如抖音中的昵称，内容，头像，点赞评分享等ui及功能，可参考案例2，自己在前端写，以实现不同的ui需求。

朋友圈

组件：yl-circle-video-view

使用方法：

<yl-circle-video-view 
	ref="player" 
	style="height: 160px;margin-top: 10px;" 
	:url="item.url" 
	:poster="item.thumb" />

使用说明：

声明list的scroll事件：<list @scroll="onScroll">，上下滑动超过一定距离后，释放正在播放的视频

onScroll(e) 
	if (e.isDragging && (e.contentOffset.y > 300 || e.contentOffset.y < -300)) 
		this.$refs.player[0].release();
	

注意事项：组件是嵌入list等组件内部的，每次只能播放一个视频，切换视频上一个视频会停止，滑动组件时，视频需要停止播放（需自己处理，参考上面方法）

如需案例源码全部内容，请到这里下载：（这里代码是1.0版本的，可以去插件市场导入最新demo体验）https://download.csdn.net/download/baiyuliang2013/86620419

编译或打包注意事项：如遇到问题“The minCompileSdk (31) specified in a dependency’s AAR metadata…”，请设置主APP下的build.gradle中的compileSdkVersion>=31，或 在defaultConfig下加入代码：

configurations.all 
    resolutionStrategy  force 'androidx.core:core-ktx:1.6.0' 

uniapp原生插件-yl视频播放器(代码片段)

YL视频播放器uniapp插件市场地址：https://ext.dcloud.net.cn/plugin?id=9569简介YL视频播放器是一款适用于安卓端的高性能原生插件（ios暂不支持），支持3核心切换（exo，ijk，安卓原生），支持点播录... 查看详情

uniapp原生插件-yl视频播放器(代码片段)

YL视频播放器uniapp插件市场地址：https://ext.dcloud.net.cn/plugin?id=9569简介YL视频播放器是一款适用于安卓端的高性能原生插件（ios暂不支持），支持3核心切换（exo，ijk，安卓原生），支持点播录... 查看详情

uni-app技术分享|10分钟实现一个简易uniapp视频通话(代码片段)

视频讲解视频地址创建uniapp项目创建uniapp项目前往anyRTC控制台-项目管理创建新项目，获取appid引入插件前往uniapp插件市场搜索anyRTC，选中anyRTC音视频SDK插件云打包购买插件(免费引入)引入创建的对应uniapp项目uniapp项目的man... 查看详情

uniapp-腾讯云点播小程序插件(代码片段)

...ff08;甚至有的公司压根就申请不了），而【短视频播放器小程序插件】含有《信息网络传播视听节目许可证》的资质证书备案，可以利用该插件来解决资质问题，相关截图如下ÿ 查看详情

uniapp视频压缩插件ba-videocompressor(代码片段)

...频压缩Ba-VideoCompressor简介Ba-VideoCompressor是一款体积较小的uniapp视频压缩插件，附带简单的视频剪辑功能。支持高、中、低三种质量快速压缩；支持自定义比特率、帧率压缩；支持监听压缩进度；支持改变播放速度&... 查看详情

uniapp接入android原生插件(代码片段)

下载AndroidStudio开发包开发包安装jdk生成keytool-genkey命令生成证书在jdk/bin文件夹中生成keytool-genkey-aliastestalias-keyalgRSA-keysize2048-validity36500-keystoretest.keystore查看证书信息keytool-list-v-keystoretest.keystore你会得到一串SHA 查看详情

uniapp调用sdk原生接口(代码片段)

有uniapp开发网友问我，因为公司业务需要调用原生SDK才能实现的功能，因为没有去了解Android原生的这方面知识，接下来带大家一起了解一下uniapp调用；一，准备工作uniapp调用插件开发文档：https://nativesupport.dcloud.net.cn/NativePlugin/R... 查看详情

uniapp使用本地原生插件及本地真机调试(代码片段)

1、项目根目录下创建目录nativeplugins2、插件放入nativeplugins目录下，如下截图3、manifest.json文件打开，选择App原生插件配置菜单，选择本地原生插件4、插件中有用到权限的，需要在manifest.json文件，App权限配置菜... 查看详情

uniapp扫码原生插件（googlemlkitzxing；支持同时扫多个码）(代码片段)

uniapp扫码原生插件（GoogleMLKit、zxing；支持同时扫多个码）简介插件下载总有一款适合你，本项目包含两个插件，可选择使用最新、最快、支持多码，基于MLKit的插件Ba-Scanner-G最经典，基于zxing的插件Ba-Sc... 查看详情

uniapp-腾讯云点播小程序插件(代码片段)

...ff08;甚至有的公司压根就申请不了），而【短视频播放器小程序插件】含有《信息网络传播视听节目许可证》的资质证书备案，可以利用该插件来解决资质问题，相关截图如下：图片来源：https://cloud.tencent.... 查看详情

uniapp画中画悬浮窗（视频）ba-videopip(代码片段)

...视频悬浮窗插件。支持点播、直播；支持官方、三方播放器无缝切换；支持动态刷新（如切换视频或进度）。支持点播、直播支持官方、三方播放器无缝切换支持动态刷新（如切换视频或进度）支持检测是... 查看详情

uniapp接入android原生插件(代码片段)

...-keystoretest.keystore你会得到一串SHA1和test.keystore配置文件在Uniapp官网申请账号,并申请APPID你需要在uniapp官网中生成appandroidstudio配置项keyalias为你查出来的别名,storeFile,为你的命名文件keyPasswordstorePassword为你生成的keystore时用到的密... 查看详情

uniapp扫码原生插件-新（可任意自定义界面版本）(代码片段)

扫码原生插件（毫秒级、支持多码、支持自定义界面）简介（下载地址）Ba-Scanner是一款毫秒级扫码插件，同时支持多码、相册、闪光灯、焦距缩放、提示音、震动等等。新增支持自定义任意界面、任意点击事... 查看详情

uniapp扫码原生插件-新（可任意自定义界面版本）(代码片段)

扫码原生插件（毫秒级、支持多码、支持自定义界面）简介（下载地址）Ba-Scanner是一款毫秒级扫码插件，同时支持多码、相册、闪光灯、焦距缩放、提示音、震动等等。新增支持自定义任意界面、任意点击事... 查看详情

uniapp实现app端图片+视频轮播(代码片段)

需求：swiper轮播里面，可能有图片也可能有视频。当swiper切换到视频时，视频以动画的样式展示（无按钮、进度条等默认播放控件），自动轮播取消，手动滑动切换取消。当视频播放完毕后，可以... 查看详情

uniapp画中画悬浮窗（视频）ba-videopip(代码片段)

...视频悬浮窗插件。支持点播、直播；支持官方、三方播放器无缝切换；支持动态刷新（如切换视频或进度）。支持点播、直播支持官方、三方播放器无缝切换支持动态刷新（如切换视频或进度）支持检测是... 查看详情

uniapp使用本地原生插件及本地真机调试(代码片段)

1、项目根目录下创建目录nativeplugins2、插件放入nativeplugins目录下，如下截图3、manifest.json文件打开，选择App原生插件配置菜单，选择本地原生插件4、插件中有用到权限的，需要在manifest.json文件，App权限配置菜... 查看详情

uniapp微信小程序video视频监听播放时间(代码片段)

uniapp微信小程序video视频监听播放时间使用uniapp开发微信小程序，需要实现这样的需求当我用户离开页面的时候，我就要记录下用户视频播放的那个地方然后第二次进来，接着离开时候的地方播放uniapp中video提供的方... 查看详情