zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

video

Browse Source
This commit is contained in:
始于初见
2024-07-17 14:06:06 +08:00
parent 5c589a22fa
commit 11e9354b54
278 changed files with 331052 additions and 3935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
pages/index/db_old.nvue Normal file
View File

@@ -0,0 +1,468 @@
<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>