更新记录
1.0.3(2025-10-14)
- 优化
1.0.2(2025-09-21)
- 增加截图功能
1.0.1(2025-09-21)
- 增加播放、暂停等控制
查看更多
平台兼容性
uni-app(3.6.10)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
- |
- |
√ |
√ |
5.0 |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(3.6.10)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
5.0 |
√ |
√ |
- |
其他
ijkplayer万能视频播放器,支持m3u8、mp4、rtmp、rtsp等等格式,本地远程视频
集成步骤
- 拷贝demo里的AndroidManifest.xml文件到项目根目录
- 集成插件,集成插件步骤请参考
https://www.cnblogs.com/wenrisheng/p/18323027
文档
组件
<!-- #ifdef APP-HARMONY -->
<embed :style="'width:'+width+'px;height:'+height+'px;'" tag="ijkplayer" :options="options"
@onevent="onEvent"></embed>
<!-- #endif -->
<!-- #ifndef APP-HARMONY -->
<wrs-uts-ijkplayer ref='videoplayer' :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
@onEvent="onEvent"></wrs-uts-ijkplayer>
<!-- #endif -->
- 使用了该组件的页面需要用nvue或uvue
- 属性params是json格式的字符串
let url = "https://xxxxxx/xx.m3u8" // 或者/xxx/xxx/xxx.mp4
let params = {}
params.businessArray = [{
business: "setUrl", // 设置播放地址
params: { // 业务参数
url: url,
autoPlay: true
}
}, {
business: "setScaleMode", // 设置拉伸方式,setScaleMode需要放到setUrl后面
params: { // 业务参数
scaleMode: "aspectFit"
}
}]
var isAndroid = false
switch (uni.getSystemInfoSync().platform) {
// android
case 'android':
isAndroid = true
break;
// ios
default:
isAndroid = false
break;
}
let paramsStr = JSON.stringify(params)
return {
isAndroid: isAndroid,
width: windowWidth,
height: height,
urlArray: urlArray,
params: paramsStr,
imageSrc: null,
index: 0,
msg: null,
options: {
params: paramsStr
},
title: 'Hello'
}
params.businessArray数组里支持的业务对象有:
let url = "https://xxxxxx/xx.m3u8"
// 本地视频地址如:/xxx/xxx/xxx.mp4
{
business: "setUrl", // 设置播放地址
params: { // 业务参数
url: url,
autoPlay: true // 是否自动播放
}
}
{
business: "setVolume", //
params: {
volume: 0.5 // 百分比
}
}
{
business: "setPlaybackRate",
params: {
rate: 2 // 倍速
}
}
- 获取播放数据,数据结果在onEvent回调,获取播放进度/总时长/加载进度等等,自定义控制页面时可以通过这个接口定时获取播放进度刷新进度条
{
business: "getPlayerInfo" // 业务
}
{
business: "setCurrentTime",
params: {
time: 20 // 单位秒
}
}
// 本地图片保存路径
let path = "/xxx/xx/xx.jpg"
{
business: "getImage", // 业务
params: {
path: path
}
}
{
business: "pause"
}
{
business: "play"
}
onEvent(e) {
// this.showMsg("onVideoEvent :" + JSON.stringify(e))
let params = {}
let detail = {}
if (this.isAndroid) { // 不同版本的HB需要各自去适配获取数据
detail = e.detail
} else {
detail = e.detail
}
let opt = detail.opt
console.log("onEvent opt:" + opt)
switch (opt) {
case "getImage": {
let suc = detail.flag
if (suc) {
let path = detail.params.path
this.imageSrc = "file://" + path
} else {
this.showMsg("截图失败:" + JSON.stringify(detail))
}
}
break;
// 以下是andriod回调
case "onError": {
}
break;
case "onPrepared": {
}
break;
case "onInfo": {
let what = detail.what
console.log("onInfo what:" + what)
switch (what) {
case 1: {
this.showMsg("MEDIA_INFO_UNKNOWN")
}
break;
case 2: {
this.showMsg("MEDIA_INFO_STARTED_AS_NEXT")
}
break;
case 3: {
this.showMsg("MEDIA_INFO_VIDEO_RENDERING_START")
}
break;
case 700: {
this.showMsg("MEDIA_INFO_VIDEO_TRACK_LAGGING")
}
break;
case 701: {
this.showMsg("MEDIA_INFO_BUFFERING_END")
}
break;
case 703: {
this.showMsg("MEDIA_INFO_NETWORK_BANDWIDTH")
}
break;
case 800: {
this.showMsg("MEDIA_INFO_BAD_INTERLEAVING")
}
break;
case 801: {
this.showMsg("MEDIA_INFO_NOT_SEEKABLE")
}
break;
case 802: {
this.showMsg("MEDIA_INFO_METADATA_UPDATE")
}
break;
case 901: {
this.showMsg("MEDIA_INFO_UNSUPPORTED_SUBTITLE")
}
break;
case 902: {
this.showMsg("MEDIA_INFO_SUBTITLE_TIMED_OUT")
}
break;
case 10001: {
this.showMsg("MEDIA_INFO_VIDEO_ROTATION_CHANGED")
}
break;
case 10002: {
this.showMsg("MEDIA_INFO_AUDIO_RENDERING_START")
}
break;
case 10003: {
this.showMsg("MEDIA_INFO_AUDIO_DECODED_START")
}
break;
case 10004: {
this.showMsg("MEDIA_INFO_VIDEO_DECODED_START")
}
break;
case 10005: {
this.showMsg("MEDIA_INFO_OPEN_INPUT")
}
break;
case 10006: {
this.showMsg("MEDIA_INFO_FIND_STREAM_INFO")
}
break;
case 10007: {
this.showMsg("MEDIA_INFO_COMPONENT_OPEN")
}
break;
default:
break;
}
}
break;
case "onCompletion": {
}
break;
// 以下是ios回调
case "mediaIsPreparedToPlayDidChange":
break;
case "loadStateDidChange": {
let state = detail.state
switch (state) {
// unknown
case 0:
this.showMsg("加载未知")
break;
// playable
case 1:
this.showMsg("加载可播放")
break;
// playthroughOK
case 2:
this.showMsg("加载开始播放")
break;
// stalled
case 3:
this.showMsg("播放被暂停")
break;
default:
break;
}
}
break;
case "moviePlayBackDidFinish": {
let reason = detail.reason
switch (reason) {
// end
case 0:
this.showMsg("播放结束")
break;
// error
case 1:
this.showMsg("播放出错")
break;
// exited
case 2:
this.showMsg("播放退出")
break;
default:
break;
}
}
break;
case "moviePlayBackStateDidChange": {
let state = detail.state
switch (state) {
// stopped
case 0:
this.showMsg("播放停止")
break;
// playing
case 1:
this.showMsg("播放中")
break;
// paused
case 2:
this.showMsg("播放暂停")
break;
// interrupted
case 3:
this.showMsg("播放被打断")
break;
// seekingForward
case 4:
this.showMsg("播放快进")
break;
// seekingBackward
case 5:
this.showMsg("播放快退")
break;
default:
break;
}
}
break;
default:
break;
}
// this.showToast("onJSData:" + JSON.stringify(e))
},