469 lines
12 KiB
Plaintext
469 lines
12 KiB
Plaintext
<template>
|
||
<div>
|
||
<oxeVideo ref='video'
|
||
:isLive='boxIsLive'
|
||
:coreType='boxCoreType'
|
||
:callback='boxCallback'
|
||
:style='boxStyle'></oxeVideo>
|
||
<button @click="replay"> 重播 </button>
|
||
<button @click="prev"> 上一集 </button>
|
||
<button @click="next"> 下一集 </button>
|
||
<button @click="enterTinyWindow"> 小屏播放 </button>
|
||
<button @click="remove"> 移除播放器 </button>
|
||
<button @click="addDanmaku"> 发送弹幕 </button>
|
||
<button @click="pause"> 暂停 </button>
|
||
<button @click="start"> 播放 </button>
|
||
<button @click="showVipView"> 显示vip</button>
|
||
<button @click="hideVipView"> 隐藏vip</button>
|
||
<button @click="hidePlay"> 隐藏播放器</button>
|
||
<button @click="showPlay"> 显示播放器</button>
|
||
<button @click="isFull"> 是否全屏</button>
|
||
<button @click="getDuration"> 获取时长</button>
|
||
<button @click="updateAll"> 更新视频数据</button>
|
||
<button @click="openDanmaku"> 开启弹幕</button>
|
||
<button @click="closeDanmaku"> 关闭弹幕</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//所有图片支持http开头网络图片
|
||
let w = uni.getSystemInfoSync().windowWidth;
|
||
let h = 400;
|
||
//component 自定义控件 radius 圆角值 backgroundColor 背景色 border 边框 borderColor边框颜色
|
||
//alignment 文字对齐0:居中 1上左对齐 2上中对齐 3上右对齐 4上两端对齐 5下左对齐 6下中对齐 7下右对齐 8下两端对齐 9居中两端对齐
|
||
//textSize:14 文字大小 textColor:'#C0FF3E' 文字颜色 alpha 背景透明度
|
||
//hidden 是否隐藏
|
||
//code:16//控件标识 同时作为点击事件返回码 0，1,2,3,4,5占用 不能使用 组件 code值不能重复 rect 图片位置(相对父组件component位置)
|
||
//type为full显示在全屏 small 显示在小屏
|
||
let component = {
|
||
x: w - 20,
|
||
y: 60,
|
||
w: 50,
|
||
h: 50,
|
||
type: 'full',
|
||
radius: 0,
|
||
backgroundColor: '#FFFFFF',
|
||
alpha: 0.2,
|
||
border: 0,
|
||
borderColor: '#E066FF',
|
||
code: 66,
|
||
hidden: false,
|
||
autoHidden: true,
|
||
animation: 0, //隐藏 动画 显示隐藏时起作用 0正常 1左 2右 3上 4下
|
||
pics: [{
|
||
path: '/static/btn_number.png',
|
||
x: 0,
|
||
y: 0,
|
||
w: 50,
|
||
h: 50,
|
||
code: 661
|
||
}]
|
||
}; //自定义组件
|
||
//let styles = [component];
|
||
let styles = [];
|
||
let vdata = [{
|
||
uid: '', //扩展字段 用户id(可选，会随事件返回)
|
||
vid: '', //扩展字段 视频id(可选，会随事件返回)
|
||
title: '第一集',
|
||
index: '01',
|
||
thumb: '/static/cover.jpg',
|
||
url: 'https://1318977462.vod-qcloud.com/c41d38favodtranscq1318977462/fb2a2e113270835010023253556/v.f1443687.mp4'
|
||
},
|
||
{
|
||
uid: '', //扩展字段 用户id(可选，会随事件返回)
|
||
vid: '', //扩展字段 视频id(可选，会随事件返回)
|
||
title: '第二集',
|
||
index: '02',
|
||
thumb: '/static/cover.jpg',
|
||
url: 'https://1318977462.vod-qcloud.com/c41d38favodtranscq1318977462/fb2a2e113270835010023253556/v.f1443687.mp4',
|
||
}
|
||
];
|
||
let data = {
|
||
selectAutoPlay: true, //选集点击是否自动播放 默认自动播放
|
||
forceDeviceOrientation: false, //旋转方向 true 全屏视频不旋转
|
||
radius: 0, //圆角大小 默认 0 没有圆角
|
||
showBack: true, //返回按钮是否显示小屏幕
|
||
showSelect: true, //选集按钮是否显示
|
||
showSpeed: true, //倍速按钮是否显示
|
||
showShot: true, //截图按钮是否显示
|
||
showDlna: {
|
||
small: true,
|
||
full: true
|
||
}, //投屏按钮是否显示
|
||
showDunmaku: {
|
||
small: true,
|
||
full: true
|
||
}, //弹幕按钮是否显示
|
||
showMore: {
|
||
small: true,
|
||
full: true
|
||
}, //跟多按钮是否显示
|
||
showBottomProcess: true,
|
||
autoPlay: false, //默认false
|
||
openCache: true, //是否开启缓存
|
||
fullGestureSlide: true,
|
||
smallGestureSlide: true,
|
||
isDrag: true,//进度条条是否拖动
|
||
styles: styles,//自定义控件
|
||
hideControl: false, //是否隐藏所有控件
|
||
backgroundHolder: '', //视频背景图片
|
||
backgroundAlpha: 0.3, //0 背景透明度
|
||
loop: false, //是否单急循环
|
||
ad: {
|
||
isShow: false,
|
||
url: 'http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853',
|
||
skipUrl: 'http://wap.hao123.com'
|
||
}, //中间暂停广告，为空则不播放广告
|
||
vad: {
|
||
isShow: false,
|
||
isShowSkip: true,
|
||
type: 'image',
|
||
duration: 10,
|
||
url: 'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
|
||
skipUrl: 'http://wap.hao123.com'
|
||
}, //播放前视频广告
|
||
index: 0,
|
||
data: vdata
|
||
};
|
||
export default {
|
||
data() {
|
||
return {
|
||
boxStyle: {
|
||
'height': 400,
|
||
'width': '750upx',
|
||
},
|
||
boxIsLive: false,
|
||
boxCoreType: 0,
|
||
boxCallback: 'callback'
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.wWidth = uni.getSystemInfoSync().windowWidth;
|
||
this.boxStyle.width = this.wWidth;
|
||
},
|
||
onReady() {
|
||
//事件监听
|
||
//0 小屏状态下返回按钮点击
|
||
//1 播放进度实时返回position
|
||
//2 视频广告点击事件
|
||
//3 暂停广告点击事件
|
||
//4 vip点击返回
|
||
//5 弹幕开启状态
|
||
//6 播放
|
||
//7 暂停
|
||
//8 缓冲返回
|
||
//9 网络错误
|
||
//10 钢笔图标点击
|
||
//11 选集点击事件
|
||
//12 广告详情按钮点击
|
||
//13 大小屏切换事件
|
||
//14 广告划过事件
|
||
//15 广告倒计时点击事件
|
||
//16 广告播放完成事件
|
||
//17 播放完成事件
|
||
//18 下一集事件
|
||
//20 准备播放
|
||
var globalEvent = weex.requireModule('globalEvent');
|
||
var ox = this.$refs.video;
|
||
///注意 initVideoData初始化可在 组件中添加 或在 onReady里添加 只能选择一种 数据格式一样
|
||
ox.initVideoData(data);
|
||
globalEvent.addEventListener(this.boxCallback, function(e) {
|
||
let code = e.code;
|
||
if (code == 0) {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
animationType: 'pop-out',
|
||
animationDuration: 200
|
||
});
|
||
} else if (code == 1) {
|
||
console.log(e);
|
||
} else if (code == 20) {
|
||
|
||
} else if (code == 10) {
|
||
|
||
} else if (code == 661) {
|
||
|
||
} else if (code == 14) {
|
||
// ox.openDanmaku();
|
||
// ox.clearDanmaku();
|
||
// ox.addDanmakus([{
|
||
// text: '32323',
|
||
// isSelf: false,
|
||
// color: '#FFFFFF'
|
||
// }
|
||
// ]);
|
||
} else if (code == 3) {
|
||
// ox.exitFullScreen();
|
||
// setTimeout(function() {
|
||
// uni.navigateTo({
|
||
// url: 'zb'
|
||
// });
|
||
// }, 3000)
|
||
|
||
}
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
showVipView: function() {
|
||
var ox = this.$refs.video;
|
||
ox.showVipView();
|
||
//vip显示
|
||
},
|
||
hideVipView: function() {
|
||
var ox = this.$refs.video;
|
||
ox.hideVipView();
|
||
//vip隐藏
|
||
},
|
||
addComponent: function() {
|
||
var ox = this.$refs.video;
|
||
ox.addComponent(component);
|
||
//动态添加控件 code不能重复
|
||
},
|
||
updateComponent: function() {
|
||
var ox = this.$refs.video;
|
||
ox.updateComponent(component);
|
||
//动态更新控件 更新的控件 code一定要对应
|
||
},
|
||
updateDataAtIndex: function() {
|
||
var ox = this.$refs.video;
|
||
ox.updateDataAtIndex({
|
||
index: 1,
|
||
data: {
|
||
uid: '', //扩展字段 用户id(可选，会随事件返回)
|
||
vid: '', //扩展字段 视频id(可选，会随事件返回)
|
||
title: '第二集',
|
||
index: '02',
|
||
thumb: 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
|
||
url: 'https://v3.szjal.cn/20191120/IYfYSiin/index.m3u8',
|
||
}
|
||
});
|
||
//更新索引位置视频数据
|
||
ox.playIndex(1);
|
||
},
|
||
updateAll: function() {
|
||
var ox = this.$refs.video;
|
||
ox.updateAll({data:[{
|
||
uid: '', //扩展字段 用户id(可选，会随事件返回)
|
||
vid: '', //扩展字段 视频id(可选，会随事件返回)
|
||
title: '第一集',
|
||
index: '01',
|
||
thumb: 'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
|
||
url: 'http://www.easydarwin.org/public/video/3/video.m3u8'
|
||
},
|
||
{
|
||
uid: '', //扩展字段 用户id(可选，会随事件返回)
|
||
vid: '', //扩展字段 视频id(可选，会随事件返回)
|
||
title: '第二集',
|
||
index: '02',
|
||
thumb: 'https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg',
|
||
url: 'http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4',
|
||
}
|
||
]});
|
||
setTimeout(function() {
|
||
ox.playIndex(0);
|
||
}, 500)
|
||
//更新所有视频数据
|
||
|
||
},
|
||
seekTo: function() {
|
||
var ox = this.$refs.video;
|
||
ox.seekTo(1200);
|
||
//滑动到指定时间播放毫秒
|
||
},
|
||
setSpeed: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setSpeed(1.5);
|
||
//设置倍数
|
||
},
|
||
setVolume: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setVolume(1.5);
|
||
//设置声音
|
||
},
|
||
setMuted: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setMuted(true);
|
||
//是否静音
|
||
},
|
||
clearCache: function() {
|
||
var ox = this.$refs.video;
|
||
ox.clearCache();
|
||
//清理缓存
|
||
},
|
||
next: function() {
|
||
var ox = this.$refs.video;
|
||
ox.next();
|
||
//播放下一条记录
|
||
},
|
||
prev: function() {
|
||
var ox = this.$refs.video;
|
||
ox.prev();
|
||
//播放上一条记录
|
||
},
|
||
playIndex: function() {
|
||
var ox = this.$refs.video;
|
||
ox.playIndex(2);
|
||
//播放索引记录
|
||
},
|
||
start: function() {
|
||
var ox = this.$refs.video;
|
||
ox.start();
|
||
//开始播放
|
||
},
|
||
pause: function() {
|
||
var ox = this.$refs.video;
|
||
ox.pause();
|
||
//暂停播放
|
||
},
|
||
replay: function() {
|
||
var ox = this.$refs.video;
|
||
ox.replay();
|
||
//循环播放
|
||
},
|
||
remove: function() {
|
||
var ox = this.$refs.video;
|
||
ox.remove();
|
||
//去除播放器
|
||
},
|
||
hidePlay: function() {
|
||
var ox = this.$refs.video;
|
||
ox.hidePlay();
|
||
//隐藏播放器
|
||
},
|
||
showPlay: function() {
|
||
var ox = this.$refs.video;
|
||
ox.showPlay();
|
||
//显示播放器
|
||
},
|
||
enterFullScreen: function() {
|
||
var ox = this.$refs.video;
|
||
ox.enterFullScreen();
|
||
//进入全屏
|
||
},
|
||
exitFullScreen: function() {
|
||
var ox = this.$refs.video;
|
||
ox.exitFullScreen();
|
||
//退出全屏
|
||
},
|
||
isFull: function() {
|
||
var ox = this.$refs.video;
|
||
ox.isFull(result => {
|
||
let isFull = result.isFull;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否全屏:' + isFull,
|
||
success: function(res) {
|
||
|
||
}
|
||
});
|
||
});
|
||
//是否全屏
|
||
},
|
||
|
||
getSpeed: function() {
|
||
var ox = this.$refs.video;
|
||
ox.getSpeed(result => {
|
||
let speed = result.speed;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '倍速:' + speed,
|
||
success: function(res) {
|
||
|
||
}
|
||
});
|
||
});
|
||
//获取倍速
|
||
},
|
||
addDanmaku: function() {
|
||
var ox = this.$refs.video;
|
||
ox.addDanmaku({
|
||
text: '测试',
|
||
isSelf: true
|
||
});
|
||
//单条弹幕发送
|
||
},
|
||
addDanmakus: function() {
|
||
var ox = this.$refs.video;
|
||
ox.addDanmakus([{
|
||
text: '测试',
|
||
isSelf: true,
|
||
color: '#FFFFFF'
|
||
}]);
|
||
//多条弹幕发送
|
||
},
|
||
closeDanmaku: function() {
|
||
var ox = this.$refs.video;
|
||
ox.closeDanmaku();
|
||
//关闭弹幕
|
||
},
|
||
openDanmaku: function() {
|
||
var ox = this.$refs.video;
|
||
ox.openDanmaku();
|
||
//开启弹幕
|
||
},
|
||
getDuration: function() {
|
||
var ox = this.$refs.video;
|
||
ox.duration(result => {
|
||
let duration = result.duration;
|
||
uni.showModal({
|
||
title: '时长',
|
||
content: JSON.stringify(result),
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
//获取视频时长 毫秒
|
||
|
||
},
|
||
getScreenShot: function() {
|
||
var ox = this.$refs.video;
|
||
ox.screenShot(result => {
|
||
let base64 = result.base64;
|
||
});
|
||
//截图 返回base64
|
||
},
|
||
adSkip: function() {
|
||
var ox = this.$refs.video;
|
||
ox.adSkip();
|
||
//划过广告
|
||
},
|
||
setOptionValue: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setOptionValue({
|
||
value: '',
|
||
key: '',
|
||
category: 1
|
||
});
|
||
//ijk设置 option category 1 FormatOption 2 CodecOption 3 SwsOption 4 PlayerOption
|
||
},
|
||
setOptionIntValue: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setOptionIntValue({
|
||
value: 0,
|
||
key: '',
|
||
category: 1
|
||
});
|
||
//ijk设置 option category 1 FormatOption 2 CodecOption 3 SwsOption 4 PlayerOption
|
||
},
|
||
setScreenScaleType: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setScreenScaleType(1);
|
||
//设置视频画面 适应 1 2 3
|
||
},
|
||
enterTinyWindow: function() {
|
||
var ox = this.$refs.video;
|
||
ox.enterTinyWindow({x:80,y:400});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
|
||
</style>
|