|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div id="dplayer" ref="dplayer" style="height: 480px;" />
|
|
<div id="dplayer" ref="dplayer" style="height: 480px;" />
|
|
|
-<!-- <div id="dplayer" ref="dplayer" />-->
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -22,46 +21,18 @@ export default {
|
|
|
return {
|
|
return {
|
|
|
flvjs,
|
|
flvjs,
|
|
|
DPlayer,
|
|
DPlayer,
|
|
|
- userPermission: {
|
|
|
|
|
- userId: -1,
|
|
|
|
|
- vip: false
|
|
|
|
|
|
|
+ danmaku: {
|
|
|
|
|
+ api: '//api.reghao.cn/api/comment/danmaku/',
|
|
|
|
|
+ token: 'bili'
|
|
|
},
|
|
},
|
|
|
- userId: -1,
|
|
|
|
|
- playRecord: null,
|
|
|
|
|
- getUrl: false,
|
|
|
|
|
- permissionDialog: false,
|
|
|
|
|
- authCodeDialog: false,
|
|
|
|
|
- authCode: null,
|
|
|
|
|
- autoPlayList: false,
|
|
|
|
|
- showMessage: false,
|
|
|
|
|
- message: ''
|
|
|
|
|
|
|
+ getUrl: true
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
- /* const userInfo = this.$store.state.user.userInfo
|
|
|
|
|
- if (userInfo !== null) {
|
|
|
|
|
- this.userPermission.userId = userInfo.userId
|
|
|
|
|
- this.userPermission.vip = userInfo.vip
|
|
|
|
|
- }*/
|
|
|
|
|
-
|
|
|
|
|
- this.getUrl = true
|
|
|
|
|
- /* const vidScope = this.videoProp.scope
|
|
|
|
|
- if (vidScope === 1) {
|
|
|
|
|
- this.getUrl = true
|
|
|
|
|
- } else if (vidScope === 2) {
|
|
|
|
|
- if (this.userPermission.vip) {
|
|
|
|
|
- this.getUrl = true
|
|
|
|
|
- } else {
|
|
|
|
|
- this.permissionDialog = true
|
|
|
|
|
- }
|
|
|
|
|
- } else if (vidScope === 3) {
|
|
|
|
|
- this.authCodeDialog = true
|
|
|
|
|
- } else if (vidScope === 4) {
|
|
|
|
|
- alert('私有视频, 只有本人可以观看')
|
|
|
|
|
- }*/
|
|
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
SocketInstance.connect()
|
|
SocketInstance.connect()
|
|
|
|
|
+
|
|
|
const videoId = this.videoProp.videoId
|
|
const videoId = this.videoProp.videoId
|
|
|
if (this.getUrl) {
|
|
if (this.getUrl) {
|
|
|
this.getVideoUrl(videoId)
|
|
this.getVideoUrl(videoId)
|
|
@@ -69,33 +40,43 @@ export default {
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
getVideoUrl(videoId) {
|
|
getVideoUrl(videoId) {
|
|
|
- videoUrl(videoId)
|
|
|
|
|
- .then(res => {
|
|
|
|
|
- if (res.code === 0) {
|
|
|
|
|
- const urlType = res.data.type
|
|
|
|
|
- if (urlType === 'mp4') {
|
|
|
|
|
- const urls = res.data.urls
|
|
|
|
|
- for (const url of urls) {
|
|
|
|
|
- url.type = 'normal'
|
|
|
|
|
- }
|
|
|
|
|
- this.initMp4Player(this.userPermission.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime)
|
|
|
|
|
- } else if (urlType === 'flv') {
|
|
|
|
|
- const urls = res.data.urls
|
|
|
|
|
- const url = urls[0].url
|
|
|
|
|
- this.initFlvPlayer(videoId, this.videoProp.coverUrl, url)
|
|
|
|
|
- } else {
|
|
|
|
|
- this.message = 'url 类型无法识别'
|
|
|
|
|
- this.showMessage = true
|
|
|
|
|
|
|
+ videoUrl(videoId).then(res => {
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
|
+ const urlType = res.data.type
|
|
|
|
|
+ if (urlType === 'mp4') {
|
|
|
|
|
+ const urls = res.data.urls
|
|
|
|
|
+ for (const url of urls) {
|
|
|
|
|
+ url.type = 'normal'
|
|
|
}
|
|
}
|
|
|
|
|
+ this.initMp4Player(this.videoProp.userId, videoId, this.videoProp.coverUrl, urls, res.data.currentTime)
|
|
|
|
|
+ } else if (urlType === 'flv') {
|
|
|
|
|
+ const urls = res.data.urls
|
|
|
|
|
+ const url = urls[0].url
|
|
|
|
|
+ this.initFlvPlayer(videoId, this.videoProp.coverUrl, url)
|
|
|
} else {
|
|
} else {
|
|
|
- console.error(res.msg)
|
|
|
|
|
|
|
+ this.$notify.error({
|
|
|
|
|
+ message: '视频 url 类型不合法',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ duration: 3000
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
- }).catch(error => {
|
|
|
|
|
- console.error(error.message)
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$notify.error({
|
|
|
|
|
+ message: '视频 url 获取失败',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ duration: 3000
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(error => {
|
|
|
|
|
+ this.$notify.error({
|
|
|
|
|
+ message: '视频 url 获取失败',
|
|
|
|
|
+ type: 'warning',
|
|
|
|
|
+ duration: 3000
|
|
|
})
|
|
})
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
- // TODO 获取弹幕配置,将 videoUrl 作为本函数的回调
|
|
|
|
|
danmakuConfig() {
|
|
danmakuConfig() {
|
|
|
|
|
+ // TODO 获取弹幕配置,将 videoUrl 作为本函数的回调
|
|
|
},
|
|
},
|
|
|
initMp4Player(userId, videoId, coverUrl, urls, pos) {
|
|
initMp4Player(userId, videoId, coverUrl, urls, pos) {
|
|
|
const player = new DPlayer({
|
|
const player = new DPlayer({
|
|
@@ -110,14 +91,12 @@ export default {
|
|
|
pic: coverUrl,
|
|
pic: coverUrl,
|
|
|
defaultQuality: 0,
|
|
defaultQuality: 0,
|
|
|
quality: urls
|
|
quality: urls
|
|
|
- // url: videoUrl
|
|
|
|
|
- // type: 'auto',
|
|
|
|
|
},
|
|
},
|
|
|
danmaku: {
|
|
danmaku: {
|
|
|
id: videoId,
|
|
id: videoId,
|
|
|
maximum: 10000,
|
|
maximum: 10000,
|
|
|
- api: '//api.reghao.cn/api/comment/danmaku/',
|
|
|
|
|
- token: 'bili',
|
|
|
|
|
|
|
+ api: this.danmaku.api,
|
|
|
|
|
+ token: this.danmaku.token,
|
|
|
user: userId,
|
|
user: userId,
|
|
|
bottom: '15%',
|
|
bottom: '15%',
|
|
|
unlimited: true
|
|
unlimited: true
|
|
@@ -135,11 +114,13 @@ export default {
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
player.on('ended', () => {
|
|
player.on('ended', () => {
|
|
|
- SocketInstance.send({ videoId: videoId, currentTime: player.video.currentTime })
|
|
|
|
|
- // TODO 当前视频播放完成后判断是否继续播放相关推荐中的视频
|
|
|
|
|
- console.log('视频播放完成')
|
|
|
|
|
- if (this.autoPlayList) {
|
|
|
|
|
- this.$router.push('/video/oaywkjbLbW')
|
|
|
|
|
|
|
+ // SocketInstance.send({ videoId: videoId, currentTime: player.video.currentTime })
|
|
|
|
|
+ const path = this.$route.path
|
|
|
|
|
+ const nextPath = '/video/gz5RYkw1zn'
|
|
|
|
|
+ if (path !== nextPath) {
|
|
|
|
|
+ this.$router.push(nextPath)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log('视频播放完成')
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|