video
This commit is contained in:
228
pages/index/zb.nvue
Normal file
228
pages/index/zb.nvue
Normal file
@@ -0,0 +1,228 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user