228 lines
6.0 KiB
Plaintext
228 lines
6.0 KiB
Plaintext
<template>
|
||
<div>
|
||
<oxeVideo ref='video'
|
||
:isLive='boxIsLive'
|
||
:coreType='boxCoreType'
|
||
:callback='boxCallback'
|
||
:data='boxData'
|
||
:style='boxStyle'></oxeVideo>
|
||
<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>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//所有图片支持http开头网络图片
|
||
let w = uni.getSystemInfoSync().windowWidth;
|
||
let h = 250;
|
||
//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 - 120,
|
||
y: 60,
|
||
w: 60,
|
||
h: 80,
|
||
type: 'small',
|
||
radius: 0,
|
||
backgroundColor: '#000000',
|
||
alpha: 0.5,
|
||
border: 0,
|
||
borderColor: '#E066FF',
|
||
code: 66,
|
||
hidden: false,
|
||
autoHidden: false,
|
||
pics: [{
|
||
path: '/static/shop.jpg',
|
||
x: 0,
|
||
y: 0,
|
||
w: 60,
|
||
h: 80,
|
||
code: 661
|
||
}],
|
||
texts: []
|
||
}; //自定义组件
|
||
let styles = [component];
|
||
let data = {
|
||
forceDeviceOrientation: false, //旋转方向 true 全屏视频不旋转
|
||
radius: 5, //圆角大小 默认 0 没有圆角
|
||
showBack: true, //返回按钮是否显示小屏幕
|
||
showShot: true, //截图按钮是否显示
|
||
showDlna: {
|
||
small: true,
|
||
full: true
|
||
}, //投屏按钮是否显示
|
||
showDunmaku: {
|
||
small: true,
|
||
full: true
|
||
}, //弹幕按钮是否显示
|
||
showMore: {
|
||
small: true,
|
||
full: true
|
||
}, //跟多按钮是否显示
|
||
autoPlay: true, //默认false
|
||
styles: styles,
|
||
hideControl: false, //是否隐藏所有控件
|
||
backgroundHolder: '', //视频背景图片
|
||
backgroundAlpha: 0.3, //0 背景透明度
|
||
loop: false, //是否单急循环
|
||
ad: {
|
||
isShow: true,
|
||
url: 'http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853',
|
||
skipUrl: 'http://wap.hao123.com'
|
||
}, //中间暂停广告，为空则不播放广告
|
||
index: 0,
|
||
data: [{
|
||
uid: '', //扩展字段 用户id(可选，会随事件返回)
|
||
vid: '', //扩展字段 视频id(可选，会随事件返回)
|
||
title: 'cctv1',
|
||
index: '01',
|
||
thumb: 'https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg',
|
||
url: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
|
||
}]
|
||
|
||
};
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
boxStyle: {
|
||
'height': 250,
|
||
'width': '750upx',
|
||
},
|
||
boxIsLive: true,
|
||
boxCoreType: 1,
|
||
boxCallback: 'callback',
|
||
boxData: data
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.wWidth = uni.getSystemInfoSync().windowWidth;
|
||
this.boxStyle.width = this.wWidth;
|
||
},
|
||
onReady() {
|
||
//事件监听
|
||
//0 小屏状态下返回按钮点击
|
||
//1 播放进度实时返回position
|
||
//3 暂停广告点击
|
||
//4 vip点击返回
|
||
//5 弹幕开启状态
|
||
//6 播放
|
||
//7 暂停
|
||
//8 缓冲返回
|
||
//9 网络错误
|
||
//10 钢笔图标点击
|
||
//11 选集点击事件
|
||
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){
|
||
|
||
}
|
||
})
|
||
|
||
},
|
||
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一定要对应
|
||
},
|
||
|
||
setVolume: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setVolume(1.5);
|
||
//设置声音
|
||
},
|
||
setMuted: function() {
|
||
var ox = this.$refs.video;
|
||
ox.setMuted(true);
|
||
//设置静音
|
||
},
|
||
|
||
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();
|
||
//退出全屏
|
||
},
|
||
addDanmaku: function() {
|
||
var ox = this.$refs.video;
|
||
ox.addDanmaku({
|
||
text: '测试',
|
||
isSelf: true
|
||
});
|
||
//弹幕
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
|
||
</style> |