Skip to content

A
admin-fdc
提交 882a7f1d authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

修改video.js为通用组件

上级 d11f68c3
隐藏空白字符变更
内嵌 并排
正在显示 包含 97 行增加 和 64 行删除
index.html
浏览文件 @ 882a7f1d
...@@ -5,9 +5,6 @@ ...@@ -5,9 +5,6 @@
<link rel="icon" href="https://zws-imgs-pub.ezijing.com/pc/base/favicon.ico" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/components/base/AppVideoPlayer.vue
浏览文件 @ 882a7f1d
<template> <template>
<div> <video ref="videoPlayer" class="video-js"></video>
<video ref="videoPlayer" class="video-js"></video>
</div>
</template> </template>
<script> <script>
import videojs from 'video.js' import videojs from 'video.js'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
const DEFAULT_OPTIONS = {
controls: true,
autoplay: true,
fluid: true
}
export default { export default {
name: 'VideoPlayer', name: 'AppVideoPlayer',
props: { props: {
options: { options: {
type: Object, type: Object,
...@@ -22,14 +27,66 @@ export default { ...@@ -22,14 +27,66 @@ export default {
player: null 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() { mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() { !this.player && this.initPlayer()
console.log('onPlayerReady', this)
})
}, },
beforeDestroy() { beforeDestroy() {
if (this.player) { this.player && this.player.dispose()
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 @@ ...@@ -30,14 +30,13 @@
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</app-card> </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> </div>
</template> </template>
<script> <script>
import VideoPlayer from '../components/VideoPlayer.vue'
import { getCourseDetails, getVideoUrl } from '../api' import { getCourseDetails, getVideoUrl } from '../api'
export default { export default {
components: { VideoPlayer }, components: { DialogVideoPlayer: () => import('../components/DialogVideoPlayer.vue') },
data() { data() {
return { return {
info: {}, info: {},
...@@ -67,8 +66,11 @@ export default { ...@@ -67,8 +66,11 @@ export default {
} }
], ],
active: 0, active: 0,
videoInfo: null, isShowDialog: false,
isShowDialog: false dialogVideoOptoins: {
title: '', // dialog title
options: {} // video options
}
} }
}, },
filters: { filters: {
...@@ -98,21 +100,18 @@ export default { ...@@ -98,21 +100,18 @@ export default {
this.fetchCourseList() this.fetchCourseList()
}, },
methods: { methods: {
onPlay(val) {
this.isShowDialog = true
this.videoInfo = val
},
fetchVideoUrl(val) { fetchVideoUrl(val) {
if (!this.btnView || val.type !== 2) { if (!this.btnView || val.type !== 2) {
return return
} }
getVideoUrl({ vid: val.resource_id }).then(res => { getVideoUrl({ vid: val.resource_id }).then(res => {
if (res.video) { if (res.video) {
const url = res.video.HD || res.video.fD || res.video.SD || res.video.LD const { SD, LD, FD } = res.video
this.videoInfo = { this.dialogVideoOptoins = {
url: url,
title: val.name, title: val.name,
vid: val.resource_id options: {
sources: [{ src: SD }, { src: LD }, { src: FD }]
}
} }
this.isShowDialog = true this.isShowDialog = true
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论