Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dg29_museum
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
dg29_museum
Commits
1a935b61
Commit
1a935b61
authored
Dec 22, 2023
by
Tt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
视频播放基础
parent
81f5dddc
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
380 additions
and
0 deletions
+380
-0
dg18_tianci.ts
assets/dg18_tianci/scene/dg18_tianci.ts
+380
-0
No files found.
assets/dg18_tianci/scene/dg18_tianci.ts
View file @
1a935b61
...
...
@@ -266,6 +266,386 @@ export default class SceneComponent extends MyCocosSceneComponent {
}
}
//-----------------------------------------Video------------------------------
@
property
(
cc
.
Node
)
barTag
:
cc
.
Node
;
@
property
(
cc
.
Node
)
ProgressBar
:
cc
.
Node
;
@
property
(
cc
.
VideoPlayer
)
videoPlayer
:
cc
.
VideoPlayer
;
@
property
(
cc
.
Label
)
currentTimeLabel
:
cc
.
Label
;
private
_isReadyToPlay
:
boolean
;
// 选择视频播放
async
clickVideoItem
(
evt
,
_node
)
{
const
item
=
evt
?
evt
.
currentTarget
:
_node
;
if
(
!
item
.
video_url
)
{
// this.showTips("视频不存在");
return
;
}
if
(
item
.
video_url
==
this
.
videoPlayer
.
remoteURL
)
{
// this.showTips("该视频正在播放");
return
;
}
// this.videoPlayIndex = item.playIndex;
this
.
_isReadyToPlay
=
false
;
cc
.
find
(
`Canvas/loading`
).
active
=
true
;
cc
.
find
(
`Canvas/bg`
).
active
=
true
;
cc
.
find
(
`Canvas/bgwhite`
).
active
=
true
;
cc
.
find
(
`Canvas/bg_video_shadow`
).
active
=
true
;
this
.
videoPlayer
.
node
.
x
=
-
5000
;
this
.
videoPlayer
.
node
.
y
=
-
5000
;
cc
.
find
(
`Canvas/videolist/view/content`
).
children
.
forEach
(
row
=>
{
cc
.
find
(
`item_active`
,
row
).
active
=
false
;
});
cc
.
find
(
`item_active`
,
item
).
active
=
true
;
this
.
videoPlayer
.
remoteURL
=
item
.
video_url
;
// 数据采集
for
(
let
i
=
0
;
i
<
this
.
data
.
dataArr
.
length
;
i
++
)
{
const
element
=
this
.
data
.
dataArr
[
i
];
if
(
element
.
video_url
==
item
.
video_url
)
{
const
count
=
this
.
data
.
dataArr
[
i
].
count
;
if
(
count
)
{
this
.
data
.
dataArr
[
i
].
count
++
;
}
else
{
this
.
data
.
dataArr
[
i
].
count
=
1
;
}
}
}
const
totalCount
=
this
.
data
.
totalCount
;
if
(
totalCount
)
{
this
.
data
.
totalCount
++
;
}
else
{
this
.
data
.
totalCount
=
1
;
}
}
// private _isPlayComplated
initVideoPlayer
()
{
this
.
videoPlayer
.
node
.
on
(
'
ready-to-play
'
,
()
=>
{
// console.log('ready-to-play');
// this.playButton.active = true;
// cc.find(`Canvas/bg_video_shadow`).active = false;
// cc.find(`Canvas/loading`).active = false;
// this.durationLabel.string = this.formatTime(this.videoPlayer.getDuration());
// this._isReadyToPlay = true;
// this._isPlayComplated = false;
// this.videoPlayer.currentTime = 0;
// // this.videoPlayer.resume();
// this.play();
});
this
.
videoPlayer
.
node
.
on
(
'
meta-loaded
'
,
()
=>
{
console
.
log
(
'
meta-loaded
'
);
});
this
.
videoPlayer
.
node
.
on
(
'
clicked
'
,
()
=>
{
// console.log('clicked');
// if (this.isVideoFull) {
// this.videoPlayer.stayOnBottom = true;
// cc.find(`Canvas/Controls`).active = true;
// if (this.time1) {
// clearTimeout(this.time1);
// }
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 6000);
// }
});
this
.
videoPlayer
.
node
.
on
(
'
touchstart
'
,
()
=>
{
// console.log('touchstarted');
// if (this.isVideoFull) {
// this.videoPlayer.stayOnBottom = true;
// cc.find(`Canvas/Controls`).active = true;
// if (this.time1) {
// clearTimeout(this.time1);
// }
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 6000);
// }
});
this
.
videoPlayer
.
node
.
on
(
'
playing
'
,
()
=>
{
// console.log('playing');
// this.durationLabel.string = this.formatTime(this.videoPlayer.getDuration());
// this.playButton.node.active = false;
// this.restartButton.node.active = false;
// this.pauseButton.node.active = true;
});
this
.
videoPlayer
.
node
.
on
(
'
paused
'
,
()
=>
{
console
.
log
(
'
paused
'
);
// this.playButton.node.active = true;
// this.pauseButton.node.active = false;
});
this
.
videoPlayer
.
node
.
on
(
'
stopped
'
,
()
=>
{
console
.
log
(
'
stopped
'
);
// this.playButton.node.active = true;
// this.pauseButton.node.active = false;
});
this
.
videoPlayer
.
node
.
on
(
'
completed
'
,
async
()
=>
{
// console.log('completed');
// // this.videoPlayer.currentTime = 0;
// this._isPlayComplated = true;
// this.playButton.node.active = false;
// this.pauseButton.node.active = false;
// this.restartButton.node.active = false;
// // 循环播放下一个
// const nextItem = this.videoItemList[this.videoPlayIndex + 1];
// if (nextItem) {
// nextItem.emit('my_item_click');
// } else {
// this.videoItemList[0].emit('my_item_click');
// }
});
cc
.
view
.
setResizeCallback
((
params
)
=>
{
console
.
log
(
'
Resize
'
,
params
);
this
.
initdDrag
()
});
this
.
initdDrag
();
}
initdDrag
()
{
const
maxX
=
this
.
ProgressBar
.
width
;
const
minX
=
0
;
this
.
barTag
.
off
(
cc
.
Node
.
EventType
.
TOUCH_START
);
this
.
barTag
.
on
(
cc
.
Node
.
EventType
.
TOUCH_START
,
(
e
)
=>
{
if
(
!
this
.
_isReadyToPlay
)
{
return
;
}
console
.
log
(
"
TOUCH_START
"
);
});
this
.
barTag
.
off
(
cc
.
Node
.
EventType
.
TOUCH_MOVE
);
this
.
barTag
.
on
(
cc
.
Node
.
EventType
.
TOUCH_MOVE
,
(
e
)
=>
{
if
(
!
this
.
_isReadyToPlay
)
{
return
;
}
const
worldPos
=
e
.
getLocation
();
const
localPos
=
this
.
barTag
.
parent
.
convertToNodeSpaceAR
(
worldPos
);
let
newX
=
localPos
.
x
;
newX
=
Math
.
min
(
maxX
,
Math
.
max
(
newX
,
minX
));
this
.
barTag
.
x
=
newX
;
const
percent
=
newX
/
maxX
;
const
dur
=
this
.
videoPlayer
.
getDuration
();
this
.
currentTimeLabel
.
string
=
this
.
formatTime
(
percent
*
dur
);
this
.
videoPlayer
.
currentTime
=
percent
*
dur
;
});
this
.
barTag
.
off
(
cc
.
Node
.
EventType
.
TOUCH_END
);
this
.
barTag
.
on
(
cc
.
Node
.
EventType
.
TOUCH_END
,
(
e
)
=>
{
if
(
!
this
.
_isReadyToPlay
)
{
return
;
}
console
.
log
(
"
TOUCH_ENDED
"
);
this
.
updateBarByPos
(
this
.
barTag
.
x
);
});
this
.
barTag
.
off
(
cc
.
Node
.
EventType
.
MOUSE_UP
);
this
.
barTag
.
on
(
cc
.
Node
.
EventType
.
MOUSE_UP
,
(
e
)
=>
{
if
(
!
this
.
_isReadyToPlay
)
{
return
;
}
console
.
log
(
"
MOUSE_UP
"
);
this
.
updateBarByPos
(
this
.
barTag
.
x
);
});
}
updateBarByPos
(
newX
)
{
const
maxX
=
this
.
ProgressBar
.
width
;
const
minX
=
0
;
let
percent
=
newX
/
maxX
;
if
(
percent
>
1
)
{
percent
=
1
}
const
dur
=
this
.
videoPlayer
.
getDuration
();
this
.
videoPlayer
.
currentTime
=
percent
*
dur
}
private
_isPlayComplated
:
boolean
updateBarByTime
(
ct
)
{
if
(
this
.
_isPlayComplated
)
{
return
;
}
this
.
currentTimeLabel
.
string
=
this
.
formatTime
(
ct
);
const
dur
=
this
.
videoPlayer
.
getDuration
();
let
percent
=
ct
/
dur
;
if
(
percent
>
1
)
{
percent
=
1
}
this
.
ProgressBar
.
getComponent
(
cc
.
ProgressBar
).
progress
=
percent
;
const
maxX
=
this
.
ProgressBar
.
width
;
const
minX
=
0
;
let
newX
=
percent
*
maxX
;
newX
=
Math
.
min
(
maxX
,
Math
.
max
(
newX
,
minX
));
this
.
barTag
.
x
=
newX
;
}
formatTime
(
time
)
{
if
(
time
===
undefined
)
{
return
''
;
}
let
hh
=
""
+
Math
.
floor
(
time
/
60
/
60
);
if
(
Number
(
hh
)
>
0
)
{
hh
=
`
${
hh
.
toString
().
padStart
(
2
,
'
0
'
)}
:`
;
}
else
{
hh
=
''
;
}
const
mm
=
Math
.
floor
(
time
/
60
).
toString
().
padStart
(
2
,
'
0
'
);
const
ss
=
Math
.
round
(
time
%
60
).
toString
().
padStart
(
2
,
'
0
'
);
return
`
${
hh
}${
mm
}
:
${
ss
}
`
;
}
play
()
{
if
(
!
this
.
_isReadyToPlay
)
{
return
;
}
const
{
width
,
height
}
=
cc
.
find
(
`Canvas/bg`
);
cc
.
find
(
`Canvas/text_tips`
).
active
=
false
;
cc
.
find
(
`Canvas/bg`
).
active
=
false
;
cc
.
find
(
`Canvas/bgwhite`
).
active
=
false
;
cc
.
find
(
`Canvas/bg_video_shadow`
).
active
=
false
;
const
videoContainer
=
cc
.
find
(
'
Canvas/video_node
'
);
cc
.
find
(
'
bg
'
,
videoContainer
).
width
=
width
;
cc
.
find
(
'
bg
'
,
videoContainer
).
height
=
height
;
this
.
videoPlayer
.
node
.
x
=
videoContainer
.
x
;
this
.
videoPlayer
.
node
.
y
=
videoContainer
.
y
;
this
.
videoPlayer
.
play
();
}
pause
()
{
this
.
videoPlayer
.
pause
();
}
forward
()
{
}
backward
()
{
}
replay
()
{
this
.
_isPlayComplated
=
false
;
this
.
videoPlayer
.
currentTime
=
0
;
this
.
videoPlayer
.
play
();
}
private
time1
:
any
;
private
isVideoFull
:
boolean
;
//false,
private
tempPos
:
any
;
fullScreen
()
{
// if (this.isVideoFull) {
// return;
// }
// if (!this._isReadyToPlay) {
// return;
// }
// this.tempPos = {};
// console.log("====进入全屏===");
// this.isVideoFull = true;
// this.videoPlayer.stayOnBottom = true;
// cc.find(`Canvas/Controls/fullscreen`).active = !this.isVideoFull;
// cc.find(`Canvas/Controls/exitfull`).active = this.isVideoFull;
// const videoContainer = cc.find('Canvas/video_node');
// this.tempPos.videoPos = { x: videoContainer.x, y: videoContainer.y, width: videoContainer.width, height: videoContainer.height };
// videoContainer.width = this.node.width;
// videoContainer.height = this.node.height;
// videoContainer.x = 0;
// videoContainer.y = 0;
// cc.find(`Canvas/videolist`).active = false;
// const controls = cc.find(`Canvas/Controls`);
// this.tempPos.controlPos = { x: controls.x, y: controls.y };
// cc.find(`bg_video_bottom`, controls).active = false;
// controls.x = 0;
// controls.y = 0 - this.node.height / 2 + 130;
// this.videoPlayer.node.height = this.node.height;
// this.videoPlayer.node.width = this.node.width;
// this.videoPlayer.node.x = 0;
// this.videoPlayer.node.y = 0;
// setTimeout(() => {
// // IOS下视频的全屏适配比例有问题,所以做一个计算
// this.videoPlayer.node.width = Math.min(this.node.width, this.node.height * 16 / 9);
// }, 100);
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 3000);
}
exitFullScreen
()
{
if
(
!
this
.
isVideoFull
)
{
return
;
}
console
.
log
(
"
====退出全屏===
"
,
this
.
tempPos
);
this
.
isVideoFull
=
false
;
cc
.
find
(
`Canvas/Controls/fullscreen`
).
active
=
!
this
.
isVideoFull
;
cc
.
find
(
`Canvas/Controls/exitfull`
).
active
=
this
.
isVideoFull
;
const
videoContainer
=
cc
.
find
(
'
Canvas/video_node
'
);
videoContainer
.
width
=
this
.
tempPos
.
videoPos
.
width
;
videoContainer
.
height
=
this
.
tempPos
.
videoPos
.
height
;
videoContainer
.
x
=
this
.
tempPos
.
videoPos
.
x
;
videoContainer
.
y
=
this
.
tempPos
.
videoPos
.
y
;
this
.
videoPlayer
.
node
.
width
=
this
.
tempPos
.
videoPos
.
width
;
this
.
videoPlayer
.
node
.
height
=
this
.
tempPos
.
videoPos
.
height
;
this
.
videoPlayer
.
node
.
x
=
videoContainer
.
x
;
this
.
videoPlayer
.
node
.
y
=
videoContainer
.
y
;
cc
.
find
(
`Canvas/videolist`
).
active
=
true
;
const
controls
=
cc
.
find
(
`Canvas/Controls`
);
cc
.
find
(
`bg_video_bottom`
,
controls
).
active
=
true
;
controls
.
x
=
this
.
tempPos
.
controlPos
.
x
;
controls
.
y
=
this
.
tempPos
.
controlPos
.
y
;
if
(
this
.
time1
)
{
clearTimeout
(
this
.
time1
);
}
}
updateVideo
()
{
if
(
!
this
.
_isReadyToPlay
)
{
return
;
}
if
(
this
.
videoPlayer
)
{
const
ct
=
this
.
videoPlayer
.
currentTime
;
if
(
ct
)
{
this
.
updateBarByTime
(
ct
);
}
// if (this.videoPlayer.isPlaying()) {
// if (this.playButton.node.active) {
// this.playButton.node.active = false;
// this.restartButton.node.active = false;
// }
// if (!this.pauseButton.node.active) {
// this.pauseButton.node.active = true;
// }
// } else {
// if (!this.playButton.node.active) {
// this.playButton.node.active = true;
// }
// if (this.pauseButton.node.active) {
// this.pauseButton.node.active = false;
// }
// if (this.restartButton.node.active) {
// this.playButton.node.active = false;
// }
// }
}
}
//----------------------------------------VideoEND-------------------------
showData
(
data
)
{
let
list
=
data
.
result
.
sentences
[
0
].
details
;
// 列表处理
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment