xuhuajiao
/
canvasScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

video

dev
xuhuajiao 3 years ago
parent
085706a7e3
commit
a1d5075ec3
5 changed files with 324 additions and 159 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      manifest.json
  2. 4
      pages.json
  3. 8
      pages/index/index.vue
  4. 300
      pages/show/show.vue
  5. 168
      pages/show/show2.vue

3
manifest.json
View File

@ -22,7 +22,8 @@
}, },
/* 模块配置 */ /* 模块配置 */
"modules" : { "modules" : {
"VideoPlayer" : {}
"VideoPlayer" : {},
"Webview-x5" : {}
}, },
/* 应用发布信息 */ /* 应用发布信息 */
"distribute" : { "distribute" : {

4
pages.json
View File

@ -17,6 +17,10 @@
{ {
"path" : "pages/show/show", "path" : "pages/show/show",
"style" : {} "style" : {}
},
{
"path" : "pages/show/show2",
"style" : {}
} }
], ],
"globalStyle": { "globalStyle": {

8
pages/index/index.vue
View File

@ -4,6 +4,9 @@
<view class="text-area" @tap="to()"> <view class="text-area" @tap="to()">
<text class="title">{{title}}</text> <text class="title">{{title}}</text>
</view> </view>
<view class="text-area" @tap="to2()">
<text class="title">swiper</text>
</view>
</view> </view>
</template> </template>
@ -22,6 +25,11 @@
uni.navigateTo({ uni.navigateTo({
url: '../show/show' url: '../show/show'
}); });
},
to2(){
uni.navigateTo({
url: '../show/show2'
});
} }
} }
} }

300
pages/show/show.vue
View File

@ -7,8 +7,29 @@
v-show="item.material_type == 0 && itemIndex == index" v-show="item.material_type == 0 && itemIndex == index"
:src="linkUrl" :src="linkUrl"
mode="aspectFill" mode="aspectFill"
></image>
<video v-if="item.material_type == 1 && itemIndex == index" :src="linkUrl" :autoplay="autoplay" :controls="false" :enable-progress-gesture="false" object-fit="contain" @ended="videoPlayEnd">
></image>
<!-- :autoplay="autoplay" -->
<video
:id="'video' + index"
v-if="item.material_type == 1 && itemIndex == index"
:src="linkUrl"
:controls="false"
:autoplay="autoplay"
:enable-progress-gesture="false"
:enable-play-gesture="false"
object-fit="contain"
show-center-play-btn="false"
@play="playEvent"
@ended="videoPlayEnd"
@waiting="waitingVideo"
@loadeddata="loading"
@timeupdate="timeUpdate"
initial-time="initial_time"
>
<!-- <cover-view
style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
<image style="width: 40px;height: 40px;"></image>
</cover-view> -->
</video> </video>
</view> </view>
</view> </view>
@ -64,6 +85,8 @@ export default {
itemLength: [], itemLength: [],
flagIndex: 0, flagIndex: 0,
infoTxt: '', infoTxt: '',
video_real_time: 0,
nitial_time: '',
// 刚触碰的时间 // 刚触碰的时间
startTime: 0, startTime: 0,
// 刚触碰的位置 // 刚触碰的位置
@ -76,7 +99,7 @@ export default {
isAutoSwitch: true, isAutoSwitch: true,
moveX: 0, //滑动的x轴距离 moveX: 0, //滑动的x轴距离
moveY: 0, //滑动的y轴距离 moveY: 0, //滑动的y轴距离
like_state: 0, //-1：左滑，0：没滑动，1：右滑
like_state: 0 //-1：左滑，0：没滑动，1：右滑
}; };
}, },
onLoad() { onLoad() {
@ -90,80 +113,83 @@ export default {
// 初始化 // 初始化
this.changIndex(); this.changIndex();
}, },
onReady: function(res) {
const videoId = 'video'+this.itemIndex
this.videoCtx = uni.createVideoContext(videoId)
},
created() { created() {
this.atuo();
this.auto();
}, },
mounted() { mounted() {
// this.countdown(); // this.countdown();
this.changeMaterial(); this.changeMaterial();
}, },
methods: { methods: {
// 素材切换
touchStart(event) { touchStart(event) {
this.startX = event.touches[0].pageX;
this.startY = event.touches[0].pageY;
console.log('开始触摸：', this.startX, this.startY);
},
touchMove(event) {
var currentX = event.touches[0].pageX;
var currentY = event.touches[0].pageY;
var moveX = currentX - this.startX;
var moveY = currentY - this.startY;
var text = '';
var state = 0; //-1：左滑，0：没滑动，1：右滑
// //左右方向滑动
if (Math.abs(moveX) > Math.abs(moveY)) {
if (moveX < -10) {
text = '左滑';
state = 1;
} else if (moveX > 10) {
text = '右滑';
state = -1;
}
} else { //上下方向滑动
if (moveY < 0) {
text = '上滑';
state = -2;
} else if (moveY > 0){
text = '下滑';
state = 2;
}
this.startX = event.touches[0].pageX;
this.startY = event.touches[0].pageY;
console.log('开始触摸：', this.startX, this.startY);
},
touchMove(event) {
let currentX = event.touches[0].pageX;
let currentY = event.touches[0].pageY;
let moveX = currentX - this.startX;
let moveY = currentY - this.startY;
let text = '';
let state = 0; //-1：左滑，0：没滑动，1：右滑
// //左右方向滑动
if (Math.abs(moveX) > Math.abs(moveY)) {
if (moveX < -10) {
text = '左滑';
state = 1;
} else if (moveX > 10) {
text = '右滑';
state = -1;
} }
this.like_state = state;
this.moveX = moveX;
this.moveY = moveY;
console.log('开始滑动：', this.moveX, this.moveY, this.like_state);
},
touchEnd(event) {
console.log(`移动距离:${Math.abs(this.moveX)}`)
// if (Math.abs(this.moveX) > 60 ) {
// console.log(this.like_state)
// if(this.like_state == -1){
// this.isAutoSwitch = false;
// this.itemIndex--;
// this.flagIndex--;
// this.changIndex()
// }else if(this.like_state == 1){
// this.itemIndex++;
// this.flagIndex++;
// this.isAutoSwitch = true;
// this.changIndex()
// }
// }
if(Math.abs(this.moveY) > 60){
innerAudioContext.stop();
if(this.like_state == -2){
this.itemIndex++;
this.flagIndex++;
this.isAutoSwitch = true;
}else if(this.like_state == 2){
this.itemIndex--;
this.flagIndex--;
this.isAutoSwitch = false;
}
this.changIndex()
} else {
//上下方向滑动
if (moveY < 0) {
text = '上滑';
state = -2;
} else if (moveY > 0) {
text = '下滑';
state = 2;
}
}
this.like_state = state;
this.moveX = moveX;
this.moveY = moveY;
console.log('开始滑动：', this.moveX, this.moveY, this.like_state);
},
touchEnd(event) {
console.log(`移动距离:${Math.abs(this.moveX)}`);
// if (Math.abs(this.moveX) > 60 ) {
// if (this.like_state == 1) {
// this.itemIndex++;
// this.flagIndex++;
// this.isAutoSwitch = true;
// } else if (this.like_state == -1) {
// this.itemIndex--;
// this.flagIndex--;
// this.isAutoSwitch = false;
// }
// this.changIndex();
// }
if (Math.abs(this.moveY) > 60) {
if (this.like_state == -2) {
this.itemIndex++;
this.flagIndex++;
this.isAutoSwitch = true;
} else if (this.like_state == 2) {
this.itemIndex--;
this.flagIndex--;
this.isAutoSwitch = false;
} }
},
this.changIndex();
}
},
// 自动切换
changeMaterial() { changeMaterial() {
const _this = this; const _this = this;
clearInterval(_this.timer); clearInterval(_this.timer);
@ -178,18 +204,18 @@ export default {
}, },
changIndex() { changIndex() {
const _this = this; const _this = this;
_this.linkUrl = ''
if (_this.itemIndex == this.show_materials.length) { if (_this.itemIndex == this.show_materials.length) {
// clearInterval(_this.timer); // clearInterval(_this.timer);
this.itemIndex = 0; this.itemIndex = 0;
this.flagIndex = 0; this.flagIndex = 0;
this.contentIndex = 0; this.contentIndex = 0;
innerAudioContext.stop();
} }
if(this.itemIndex == -1){
this.itemIndex = this.show_materials.length-1
this.contentIndex = this.itemLength.length-1
this.flagIndex = this.itemLength[this.contentIndex]
}
if (this.itemIndex == -1) {
this.itemIndex = this.show_materials.length - 1;
this.contentIndex = this.itemLength.length - 1;
this.flagIndex = this.itemLength[this.contentIndex];
}
if (this.flagIndex == 0) { if (this.flagIndex == 0) {
this.contentIndex--; this.contentIndex--;
this.flagIndex = this.itemLength[this.contentIndex]; this.flagIndex = this.itemLength[this.contentIndex];
@ -204,7 +230,7 @@ export default {
this.flagIndex = 0; this.flagIndex = 0;
this.contentIndex = 0; this.contentIndex = 0;
} else { } else {
if(this.isAutoSwitch){
if (this.isAutoSwitch) {
if (this.flagIndex == this.itemLength[this.contentIndex]) { if (this.flagIndex == this.itemLength[this.contentIndex]) {
this.flagIndex = 0; this.flagIndex = 0;
this.contentIndex++; this.contentIndex++;
@ -214,51 +240,129 @@ export default {
if (this.materialsCont[this.contentIndex].bgm_main) { if (this.materialsCont[this.contentIndex].bgm_main) {
this.audioSrc = this.materialsCont[this.contentIndex].bgm_main; this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
this.audioName = this.materialsCont[this.contentIndex].bgm_name; this.audioName = this.materialsCont[this.contentIndex].bgm_name;
console.log('audioSrc', this.audioSrc);
console.log('audioName', this.audioName);
} }
} }
innerAudioContext = uni.getBackgroundAudioManager();
this.playVoice(this.audioSrc); this.playVoice(this.audioSrc);
if (this.show_materials[this.itemIndex].material_type == 1) { if (this.show_materials[this.itemIndex].material_type == 1) {
innerAudioContext.stop();
innerAudioContext.destroy()
} }
}, },
// 视频
videoPlayEnd() { videoPlayEnd() {
console.log('end-video')
this.itemIndex++; this.itemIndex++;
this.flagIndex++; this.flagIndex++;
this.changIndex(); this.changIndex();
}, },
auto() {
setTimeout(()=>{
this.autoplay = true;
},500)
},
playEvent(e) {
console.log("play_video")
console.log(e);
let currentId = e.target.id; // 获取当前视频id
console.log('currentId', currentId);
this.videoCtx = uni.createVideoContext(currentId);
// innerAudioContext.destroy()
// innerAudioContext.stop();
// innerAudioContext.src = ''
},
loading(){
console.log('play_loading')
},
waitingVideo(){
console.log('waiting-video')
this.videoCtx.pause()
},
timeupdateEvent(event) {
// this.currentTime = event.detail.currentTime;
console.log('timeupdateEvent')
},
// 禁止拖动进度条快进
timeUpdate(e) {
console.log(e)
var isReady = 1; // 是否开启可以视频快进 1 禁止开启
//跳转到指定播放位置 initial-time 时间为秒
let that = this;
//播放的总时长
var duration = e.detail.duration;
//实时播放进度 秒数
var currentTime = parseInt(e.detail.currentTime);
//当前视频进度
// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
if (that.video_real_time == 0) {
var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
} else {
var jump_time = parseInt(that.video_real_time);
}
if (isReady == 1) {
if (currentTime > jump_time && currentTime - jump_time > 3) {
// let videoContext = uni.createVideoContext(e.target.id);
this.videoCtx.pause()
this.videoCtx.seek(0);
uni.showToast({
title: '未完整看完该视频，不能快进',
icon: 'none',
duration: 2000
});
return;
}
}
that.video_real_time = currentTime; //实时播放进度
},
// 音频
playVoice(src) { playVoice(src) {
if (innerAudioContext != undefined) { if (innerAudioContext != undefined) {
innerAudioContext.stop(); innerAudioContext.stop();
} }
innerAudioContext = uni.createInnerAudioContext();
innerAudioContext = uni.getBackgroundAudioManager();
// #ifdef APP-PLUS
innerAudioContext.stop(); innerAudioContext.stop();
innerAudioContext.src = src; innerAudioContext.src = src;
console.log('src',src)
innerAudioContext.autoplay = true; innerAudioContext.autoplay = true;
innerAudioContext.loop = true;
innerAudioContext.onPlay(() => { innerAudioContext.onPlay(() => {
this.infoTxt = ''; this.infoTxt = '';
this.infoTxt = '开始播放'; this.infoTxt = '开始播放';
console.log('开始播放'); console.log('开始播放');
innerAudioContext.src = this.audioSrc
innerAudioContext.seek(0)
console.log(plus.device.getVolume())
}); });
innerAudioContext.onError(res => { innerAudioContext.onError(res => {
console.log(res.errMsg); console.log(res.errMsg);
console.log(res.errCode); console.log(res.errCode);
innerAudioContext.stop();
innerAudioContext.src = ''
// innerAudioContext.stop();
});
innerAudioContext.onPause(function() {
console.log('onPause');
}); });
innerAudioContext.onPause(() => {
innerAudioContext.onStop(() => {
//暂停监听 //暂停监听
this.infoTxt = '暂停';
console.log('暂停');
this.infoTxt = '停止';
console.log('停止');
innerAudioContext.src = ''
// innerAudioContext.stop(); // innerAudioContext.stop();
}); });
innerAudioContext.onEnded(() => { innerAudioContext.onEnded(() => {
// 自然播放结束监听也需要更改isPause 开关状态
this.infoTxt = '音频自然播放结束事件'; this.infoTxt = '音频自然播放结束事件';
console.log('音频自然播放结束事件'); console.log('音频自然播放结束事件');
innerAudioContext.stop();
// innerAudioContext.src = ''
// innerAudioContext.destroy()
console.log(this.itemIndex)
console.log(this.audioSrc)
innerAudioContext.src = this.audioSrc
innerAudioContext.seek(0)
innerAudioContext.play()
}); });
},
atuo() {
this.autoplay = true;
// #endif
}, },
countdown() { countdown() {
this.count = 6; this.count = 6;
@ -282,8 +386,6 @@ export default {
background: #000; background: #000;
} }
.show-item { .show-item {
/* width: 100%;
height: 100vh; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -351,14 +453,14 @@ export default {
border: 1px solid #333; border: 1px solid #333;
border-radius: 50%; border-radius: 50%;
} }
.swiper{
.swiper {
height: 100vh; height: 100vh;
} }
.item{
.item {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.mask{
.mask {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -366,7 +468,7 @@ export default {
right: 0; right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0,0,0,.3);
background: rgba(0, 0, 0, 0.3);
z-index: 999; z-index: 999;
} }
.controls-title { .controls-title {
@ -375,12 +477,12 @@ export default {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
text-align: center;
color: #FFFFFF;
border: 10px solid #fff;
z-index: 9999;
}
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
text-align: center;
color: #ffffff;
border: 10px solid #fff;
z-index: 9999;
}
</style> </style>

168
pages/show/show2.vue
View File

@ -1,32 +1,26 @@
<template> <template>
<view class="main_container"> <view class="main_container">
<view class="show-content">
<view v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
<!-- <image
:class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
v-show="item.material_type == 0 && itemIndex == index"
:src="require('@/static/source/' + linkUrl)"
></image> -->
<image
:class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
v-show="item.material_type == 0 && itemIndex == index"
:src="'https://images.weserv.nl/?url=' + linkUrl"
mode="aspectFill"
></image>
<video
v-if="item.material_type == 1 && itemIndex == index"
:src="'../../static/source/' + linkUrl"
:autoplay="autoplay"
controls
object-fit="fill"
@ended="videoPlayEnd"
></video>
<!-- <iframe v-if="item.material_type == 1 && itemIndex == index" ref="iframe" class="video-iframe" style="z-index:1;" :src="linkUrl"
frameborder="0" scrolling="no" allowfullscreen="true"
webkitallowfullscreen="true" mozallowfullscreen="true" @ended="videoPlayEnd">
</iframe> -->
<view class="screen-swiper-box">
<swiper :hidden="autoplay" class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay"
indicator-active-color="#71C1F6" indicator-color="#ffffff" interval="3000" duration="500">
<swiper-item>
<image class="swiperImage" :src="pictureUrl" mode="scaleToFill"></image>
</swiper-item>
<swiper-item>
<image class="swiperImage" :src="videoPicture" @click="showVideo" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<view :hidden="!autoplay" class="video">
<video class="MyVideo" id="myVideo" :src="videoUrl" objectFit="cover" @play="BoFang()" @pause="ZanTing()"
controls="true">
<cover-image class="videoClose" @click="colseVideo()"
src="https://i-1-lanrentuku.qqxzb-img.com/2020/11/20/7ab68fc9-e126-47da-bcf2-7dd7a3b9f540.jpg?imageView2/2/w/1024/">
</cover-image>
<!-- 添加一个覆盖在视频上的关闭按钮cover-image -->
</video>
</view>
</view> </view>
</view>
<view class="show-audio"></view> <view class="show-audio"></view>
<view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{infoTxt}}--{{linkUrl}}--{{ audioName }}</view> <view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{infoTxt}}--{{linkUrl}}--{{ audioName }}</view>
@ -66,9 +60,18 @@ export default {
itemLength: [], itemLength: [],
flagIndex: 0, flagIndex: 0,
infoTxt:'', infoTxt:'',
voicePlayer: null
voicePlayer: null,
videoPicture: 'https://desk-fd.zol-img.com.cn/t_s720x360c5/g6/M00/0B/06/ChMkKmFBixKIYQSCAAJVqqciWmYAATuTwFJgJkAAlXC803.jpg',
pictureUrl: 'https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.jpg',
videoUrl: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
}; };
}, },
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
onLoad() { onLoad() {
const _this = this; const _this = this;
let result = one.data.data; let result = one.data.data;
@ -79,37 +82,6 @@ export default {
}); });
// 初始化 // 初始化
this.changIndex(); this.changIndex();
this.voicePlayer = plus.audio.createPlayer({ src: 'https://qiniu.aiyxlib.com/yuekan-BGM27.mp3' });
this.voicePlayer.setRoute(this.playMode);
// 监听自然播放完成
this.voicePlayer.addEventListener('ended', () => {
// 销毁正在监听设备距离的监听器
if (this.watchProximity) {
plus.proximity.clearWatch(this.watchProximity);
this.watchProximity = null;
}
console.log('播放完毕了');
});
// 监听音频可以开始播放事件
this.voicePlayer.addEventListener('play', () => {
// 首次播放时会执行两次回调
if (this.playState !== 2) {
// plus.audio.ROUTE_SPEAKER：扬声器 0
// plus.audio.ROUTE_EARPIECE：听筒 1
this.voicePlayer.setRoute(this.playMode);
this.playState++;
}
});
// 监听音频播放错误事件
this.voicePlayer.addEventListener('error', (err) => {
console.log('报错err', err);
// 销毁正在监听设备距离的监听器
if (this.watchProximity) {
plus.proximity.clearWatch(this.watchProximity);
this.watchProximity = null;
}
});
}, },
created() { created() {
this.atuo(); this.atuo();
@ -120,6 +92,37 @@ export default {
this.voicePlayer.play(); this.voicePlayer.play();
}, },
methods: { methods: {
// 轮播图事件
showVideo() {
this.autoplay = true;
this.videoContext.play();
},
colseVideo() {
this.videoContext.pause();
this.autoplay = false;
},
BoFang() {
this.videoContext.play();
},
ZanTing() {
this.videoContext.pause();
},
swiperChange(current, source){
// 切换如果不是视频位置 暂停视频
console.log(current.target.current)
if(current.target.current == 0){
//this.player.seek(0)
this.player.play()
//this.showFullVideo=true;
}else{
this.player.pause()
//this.player.stop()
//this.showFullVideo=false;
}
},
changeMaterial() { changeMaterial() {
const _this = this; const _this = this;
clearInterval(_this.timer); clearInterval(_this.timer);
@ -219,7 +222,7 @@ export default {
} }
}; };
</script> </script>
<!--
<style scoped> <style scoped>
.main_container { .main_container {
position: relative; position: relative;
@ -295,4 +298,51 @@ export default {
border: 1px solid #333; border: 1px solid #333;
border-radius: 50%; border-radius: 50%;
} }
</style> -->
<style lang="scss" scoped>
.screen-swiper-box {
position: absolute;
width: 100%;
height: 350rpx;
.video {
height: 100%;
width: 100%;
position: absolute;
.MyVideo {
width: 100%;
position: absolute;
height: 100%;
.videoClose {
height: 40rpx;
width: 40rpx;
position: absolute;
right: -1rpx;
z-index: 99999;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
.screen-swiper {
width: 100%;
position: absolute;
height: 100%;
.swiperImage {
width: 100%;
position: absolute;
height: 100%;
}
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save