Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
A
admin-fdc
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
admin-fdc
Commits
882a7f1d
提交
882a7f1d
authored
2月 23, 2022
作者:
王鹏飞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改video.js为通用组件
上级
d11f68c3
隐藏空白字符变更
内嵌
并排
正在显示
5 个修改的文件
包含
97 行增加
和
64 行删除
+97
-64
index.html
index.html
+0
-3
AppVideoPlayer.vue
src/components/base/AppVideoPlayer.vue
+66
-9
DialogVideoPlayer.vue
src/modules/school/course/components/DialogVideoPlayer.vue
+19
-0
VideoPlayer.vue
src/modules/school/course/components/VideoPlayer.vue
+0
-39
Details.vue
src/modules/school/course/views/Details.vue
+12
-13
没有找到文件。
index.html
浏览文件 @
882a7f1d
...
...
@@ -5,9 +5,6 @@
<link
rel=
"icon"
href=
"https://zws-imgs-pub.ezijing.com/pc/base/favicon.ico"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<title></title>
<link
href=
"https://unpkg.com/video.js/dist/video-js.min.css"
rel=
"stylesheet"
/>
<script
src=
"https://unpkg.com/video.js/dist/video.min.js"
></script>
<!-- <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> -->
</head>
<body>
<div
id=
"app"
></div>
...
...
src/components/base/AppVideoPlayer.vue
浏览文件 @
882a7f1d
<
template
>
<div>
<video
ref=
"videoPlayer"
class=
"video-js"
></video>
</div>
<video
ref=
"videoPlayer"
class=
"video-js"
></video>
</
template
>
<
script
>
import
videojs
from
'video.js'
import
'video.js/dist/video-js.css'
const
DEFAULT_OPTIONS
=
{
controls
:
true
,
autoplay
:
true
,
fluid
:
true
}
export
default
{
name
:
'VideoPlayer'
,
name
:
'
App
VideoPlayer'
,
props
:
{
options
:
{
type
:
Object
,
...
...
@@ -22,14 +27,66 @@ export default {
player
:
null
}
},
computed
:
{
videoOptions
()
{
return
Object
.
assign
({},
DEFAULT_OPTIONS
,
this
.
options
)
}
},
watch
:
{
options
:
{
deep
:
true
,
handler
()
{
if
(
this
.
player
)
{
this
.
player
.
dispose
()
this
.
player
=
null
}
this
.
initPlayer
()
}
}
},
mounted
()
{
this
.
player
=
videojs
(
this
.
$refs
.
videoPlayer
,
this
.
options
,
function
onPlayerReady
()
{
console
.
log
(
'onPlayerReady'
,
this
)
})
!
this
.
player
&&
this
.
initPlayer
()
},
beforeDestroy
()
{
if
(
this
.
player
)
{
this
.
player
.
dispose
()
this
.
player
&&
this
.
player
.
dispose
()
},
methods
:
{
initPlayer
()
{
const
_this
=
this
this
.
player
=
videojs
(
this
.
$refs
.
videoPlayer
,
this
.
videoOptions
,
function
onPlayerReady
()
{
_this
.
$emit
(
'ready'
,
this
)
const
DEFAULT_EVENTS
=
[
'abort'
,
'canplay'
,
'canplaythrough'
,
'durationchange'
,
'emptied'
,
'ended'
,
'error'
,
'loadeddata'
,
'loadedmetadata'
,
'pause'
,
'play'
,
'playing'
,
'progress'
,
'ratechange'
,
'resize'
,
'seeked'
,
'seeking'
,
'stalled'
,
'suspend'
,
'timeupdate'
,
'volumechange'
,
'waiting'
]
// 注册事件
DEFAULT_EVENTS
.
forEach
(
eventName
=>
{
this
.
on
(
eventName
,
(...
args
)
=>
{
console
.
log
(
eventName
)
_this
.
$emit
(
eventName
,
...
args
)
})
})
})
}
}
}
...
...
src/modules/school/course/components/DialogVideoPlayer.vue
0 → 100644
浏览文件 @
882a7f1d
<
template
>
<el-dialog
v-bind=
"$attrs"
v-on=
"$listeners"
width=
"800px"
top=
"20vh"
>
<app-video-player
:options=
"options"
v-on=
"$listeners"
></app-video-player>
</el-dialog>
</
template
>
<
script
>
import
AppVideoPlayer
from
'@/components/base/AppVideoPlayer.vue'
export
default
{
props
:
{
options
:
{
type
:
Object
,
default
()
{
return
{}
}
}
},
components
:
{
AppVideoPlayer
}
}
</
script
>
src/modules/school/course/components/VideoPlayer.vue
deleted
100644 → 0
浏览文件 @
d11f68c3
<
template
>
<el-dialog
:title=
"info.title"
v-bind=
"$attrs"
v-on=
"$listeners"
width=
"800px"
top=
"20vh"
>
<video
id=
"videoPlayer"
width=
"760"
class=
"video-js"
controls=
"controls"
></video>
</el-dialog>
</
template
>
<
script
>
export
default
{
props
:
{
info
:
{
type
:
Object
,
default
()
{
return
{}
}
}
},
data
()
{
return
{
player
:
null
}
},
mounted
()
{
const
url
=
this
.
info
.
url
setTimeout
(()
=>
{
this
.
player
=
window
.
videojs
(
'videoPlayer'
)
this
.
player
.
src
({
src
:
url
,
type
:
'application/x-mpegURL'
// withCredentials: true
})
this
.
player
.
play
()
},
300
)
},
beforeDestroy
()
{
this
.
player
.
dispose
()
}
}
</
script
>
<
style
scoped
>
</
style
>
src/modules/school/course/views/Details.vue
浏览文件 @
882a7f1d
...
...
@@ -30,14 +30,13 @@
</el-collapse-item>
</el-collapse>
</app-card>
<
video-player
v-if=
"isShowDialog"
:info=
"videoInfo"
:visible
.
sync
=
"isShowDialog"
/>
<
dialog-video-player
:visible
.
sync=
"isShowDialog"
v-bind=
"dialogVideoOptoins"
v-if
=
"isShowDialog"
/>
</div>
</template>
<
script
>
import
VideoPlayer
from
'../components/VideoPlayer.vue'
import
{
getCourseDetails
,
getVideoUrl
}
from
'../api'
export
default
{
components
:
{
VideoPlayer
},
components
:
{
DialogVideoPlayer
:
()
=>
import
(
'../components/DialogVideoPlayer.vue'
)
},
data
()
{
return
{
info
:
{},
...
...
@@ -67,8 +66,11 @@ export default {
}
],
active
:
0
,
videoInfo
:
null
,
isShowDialog
:
false
isShowDialog
:
false
,
dialogVideoOptoins
:
{
title
:
''
,
// dialog title
options
:
{}
// video options
}
}
},
filters
:
{
...
...
@@ -98,21 +100,18 @@ export default {
this
.
fetchCourseList
()
},
methods
:
{
onPlay
(
val
)
{
this
.
isShowDialog
=
true
this
.
videoInfo
=
val
},
fetchVideoUrl
(
val
)
{
if
(
!
this
.
btnView
||
val
.
type
!==
2
)
{
return
}
getVideoUrl
({
vid
:
val
.
resource_id
}).
then
(
res
=>
{
if
(
res
.
video
)
{
const
url
=
res
.
video
.
HD
||
res
.
video
.
fD
||
res
.
video
.
SD
||
res
.
video
.
LD
this
.
videoInfo
=
{
url
:
url
,
const
{
SD
,
LD
,
FD
}
=
res
.
video
this
.
dialogVideoOptoins
=
{
title
:
val
.
name
,
vid
:
val
.
resource_id
options
:
{
sources
:
[{
src
:
SD
},
{
src
:
LD
},
{
src
:
FD
}]
}
}
this
.
isShowDialog
=
true
}
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论