Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
najiu-skynet-admin
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
najiu-frontend
najiu-skynet-admin
Commits
590e7e9a
Commit
590e7e9a
authored
Sep 29, 2021
by
朱松文
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
播放器适配屏幕
parent
9cdea5d6
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
29 additions
and
27 deletions
+29
-27
myVideo.scss
src/assets/scss/myVideo.scss
+4
-2
index.vue
src/components/MyVideo/index.vue
+4
-3
index.ts
src/components/MyVideo/track/index.ts
+20
-21
index.vue
src/views/dashboard/index.vue
+1
-1
No files found.
src/assets/scss/myVideo.scss
View file @
590e7e9a
.my-container
{
position
:
relative
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
calc
(
100%
-
30px
);
//
border: 1px solid red;
border
:
1px
solid
red
;
}
.najiu-dog-track
{
...
...
src/components/MyVideo/index.vue
View file @
590e7e9a
...
...
@@ -39,6 +39,7 @@ export default class MyVideo extends Vue {
autoplay
:
true
,
width
:
this
.
width
,
language
:
"
zh-CN
"
,
fluid
:
true
,
controlBar
:
{
children
:
[
{
name
:
"
playToggle
"
},
...
...
@@ -61,9 +62,9 @@ export default class MyVideo extends Vue {
},
},
function
onPlayerReady
()
{
const
myContainer
=
this
.
addChild
(
"
MyContainer
"
);
myContainer
.
addChild
(
"
DogTrack
"
);
_this
.
dogTrack
=
myContainer
.
getChild
(
"
DogTrack
"
);
//
const myContainer = this.addChild("MyContainer");
this
.
addChild
(
"
DogTrack
"
);
_this
.
dogTrack
=
this
.
getChild
(
"
DogTrack
"
);
this
.
play
();
}
);
...
...
src/components/MyVideo/track/index.ts
View file @
590e7e9a
...
...
@@ -6,10 +6,6 @@ class DogTrack extends Component {
trackData
=
[]
//传入初始数组
dogDiv
=
new
Map
()
processing
=
false
//是否在处理中
defaultWidth
=
0
defaultHeight
=
0
fullWidth
=
0
fullHeight
=
0
firstShowTrack
=
false
isReplaceDisplayNone
=
false
arrayIndex
=
0
...
...
@@ -18,9 +14,6 @@ class DogTrack extends Component {
constructor
(
player
,
options
)
{
super
(
player
,
options
);
const
this_
=
this
//player 默认宽高
this
.
defaultWidth
=
player
.
el_
.
offsetWidth
this
.
defaultHeight
=
player
.
el_
.
offsetHeight
player
.
on
(
"
loadedmetadata
"
,
()
=>
{
console
.
log
(
"
视频时长单位秒
"
,
player
.
duration
())
...
...
@@ -30,12 +23,18 @@ class DogTrack extends Component {
player
.
on
(
"
ended
"
,
()
=>
{
this
.
arrayIndex
=
0
;
})
player
.
on
(
"
playerresize
"
,
(
e
)
=>
{
// this.defaultHeight = player.currentHeight()
// this.defaultWidth = player.currentWidth()
// console.log("aaa", player.currentHeight(), player.currentWidth())
})
}
fullScreenChange
(
e
,
player
)
{
if
(
player
.
isFullscreen
())
{
this
.
fullWidth
=
e
.
currentTarget
.
offsetWidth
this
.
fullHeight
=
e
.
currentTarget
.
offsetHeight
// this.fullWidth = e.currentTarget.offsetWidth
// this.fullHeight = e.currentTarget.offsetHeight
console
.
log
(
"
full
"
,
e
.
currentTarget
.
offsetWidth
,
e
.
currentTarget
.
offsetHeight
)
}
}
...
...
@@ -76,19 +75,19 @@ class DogTrack extends Component {
const
myel
=
this
.
dogDiv
.
get
(
key
)
if
(
!
this
.
player_
.
isFullscreen
())
{
//跟踪框大小
myel
.
style
.
width
=
`
${(
value
.
x2
-
value
.
x1
)
*
this
.
defaultWidth
}
px`
myel
.
style
.
height
=
`
${(
value
.
y2
-
value
.
y1
)
*
(
this
.
defaultHeight
+
30
)}
px`
myel
.
style
.
width
=
`
${(
value
.
x2
-
value
.
x1
)
*
this
.
player_
.
currentWidth
()
}
px`
myel
.
style
.
height
=
`
${(
value
.
y2
-
value
.
y1
)
*
(
this
.
player_
.
currentHeight
()
+
30
)}
px`
//跟踪框位置
myel
.
style
.
top
=
`
${
value
.
y1
*
this
.
defaultHeight
}
px`
myel
.
style
.
left
=
`
${
value
.
x1
*
this
.
defaultWidth
}
px`
// console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.defaultWidth},screen-height:${this.defaultHeight
},dogs:${JSON.stringify(value)}`)
myel
.
style
.
top
=
`
${
value
.
y1
*
this
.
player_
.
currentHeight
()
}
px`
myel
.
style
.
left
=
`
${
value
.
x1
*
this
.
player_
.
currentWidth
()
}
px`
console
.
log
(
`top:
${
myel
.
style
.
top
}
,left:
${
myel
.
style
.
left
}
,screen-width:
${
this
.
player_
.
currentWidth
()}
,screen-height:
${
this
.
player_
.
currentHeight
()
}
,dogs:
${
JSON
.
stringify
(
value
)}
`
)
}
else
{
myel
.
style
.
width
=
`
${(
value
.
x2
-
value
.
x1
)
*
this
.
fullWidth
}
px`
myel
.
style
.
height
=
`
${(
value
.
y2
-
value
.
y1
)
*
(
this
.
fullHeight
+
30
)}
px`
myel
.
style
.
width
=
`
${(
value
.
x2
-
value
.
x1
)
*
this
.
player_
.
currentWidth
()
}
px`
myel
.
style
.
height
=
`
${(
value
.
y2
-
value
.
y1
)
*
(
this
.
player_
.
currentHeight
()
+
30
)}
px`
//跟踪框位置
myel
.
style
.
top
=
`
${
value
.
y1
*
this
.
fullHeight
}
px`
myel
.
style
.
left
=
`
${
value
.
x1
*
this
.
fullWidth
}
px`
// console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.defaultWidth},screen-height:${this.defaultHeight},dogs:${dogs
}`)
myel
.
style
.
top
=
`
${
value
.
y1
*
this
.
player_
.
currentHeight
()
}
px`
myel
.
style
.
left
=
`
${
value
.
x1
*
this
.
player_
.
currentWidth
()
}
px`
console
.
log
(
`top:
${
myel
.
style
.
top
}
,left:
${
myel
.
style
.
left
}
,screen-width:
${
this
.
player_
.
currentWidth
()}
,screen-height:
${
this
.
player_
.
currentHeight
()}
,dogs:
${
JSON
.
stringify
(
value
)
}
`
)
}
myel
.
className
=
myel
.
className
.
replace
(
/display-none/ig
,
""
)
...
...
@@ -125,8 +124,8 @@ class DogTrack extends Component {
createDogDiv
(
dogIds
:
any
,
currentDogId
:
string
)
{
if
(
!
dogIds
||
dogIds
.
size
===
0
)
return
;
//@ts-ignore
const
myContainer
=
this
.
player_
.
getChild
(
"
MyContainer
"
).
el_
;
// console.log("key currentDogId", dogIds, currentDogId
)
const
myContainer
=
this
.
player_
.
el_
;
console
.
log
(
"
key currentDogId
"
,
dogIds
,
currentDogId
,
myContainer
)
for
(
const
key
of
dogIds
.
keys
())
{
const
el
=
document
.
createElement
(
"
div
"
)
el
.
id
=
`dog_
${
key
}
`
...
...
src/views/dashboard/index.vue
View file @
590e7e9a
...
...
@@ -22,7 +22,7 @@
</div>
</div>
</div>
<div
class=
"player"
ref=
"player-container"
>
<div
id=
"player-container"
class=
"player"
ref=
"player-container"
>
<MyVideo
ref=
"my-video"
v-if=
"width > 0 && videoUrl"
:src=
"videoUrl"
:width=
"width"
/>
</div>
<div
class=
"video-list"
>
...
...
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