Skip to content

A
admin-fdc
提交 ae80b525 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

视频播放

上级 85ed2857
隐藏空白字符变更
内嵌 并排
正在显示 包含 113 行增加 和 25 行删除
index.html
浏览文件 @ ae80b525
......@@ -5,6 +5,9 @@
<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>
......
package.json
浏览文件 @ ae80b525
......@@ -15,6 +15,7 @@
"query-string": "^7.0.1",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vue-video-player": "^5.0.2",
"vuex": "^3.6.2"
},
"devDependencies": {
......
src/api/base.js
浏览文件 @ ae80b525
......@@ -28,8 +28,14 @@ export function uploadFile(data) {
})
}
// 获取所有权限
export function getPermissions() {
return httpRequest.get('/api/lms-financial/school/permission/get-permissions')
// export function getPermissions() {
// return httpRequest.get('/api/lms-financial/school/permission/get-permissions')
// }
/**
* 获取权限列表
*/
export function getPermissions(params) {
return httpRequest.get('/api/permissions/api/v1/user/permissions', { params })
}
/**
* 获取课程列表
......
src/modules/dashboard/screen/api.js
浏览文件 @ ae80b525
......@@ -12,3 +12,14 @@ export function getDashboardList(params) {
export function getStudentList(params) {
return httpRequest.get('/api/lms-financial/school/student/list', { params })
}
/**
* 导出学员列表
* @params.key 课程ID、课程名称
*/
export function exportStudentList() {
return httpRequest({
url: '/api/lms-financial/school/student/download',
method: 'get',
responseType: 'blob'
})
}
src/modules/dashboard/screen/views/Details.vue
浏览文件 @ ae80b525
......@@ -12,10 +12,7 @@
</div>
</template>
<script>
import AppStudentSelect from '@/components/base/AppStudentSelect.vue'
import AppClassSelect from '@/components/base/AppClassSelect.vue'
export default {
components: { AppStudentSelect, AppClassSelect },
data() {
return {
}
......@@ -48,4 +45,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
src/modules/dashboard/screen/views/List.vue
浏览文件 @ ae80b525
......@@ -18,6 +18,12 @@
</app-card>
<app-card title="数据汇总">
<app-list v-bind="tableOptions" ref="list">
<template>
<div style="border-top:1px solid #f3f3f3;padding:15px 0;">
<el-button type="primary" icon="el-icon-plus" @click="exportAll">导出Excel</el-button>
<span style="color:#666;font-size:14px;margin-left:15px;">导出当前搜索结果</span>
</div>
</template>
<template v-slot:filter-progress_min="{ params }">
<el-input v-model="params.progress_min" style="width:69px;" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" />%<p style="display:inline-block;width:10px;"></p>-
</template>
......@@ -45,19 +51,14 @@
</template>
<script>
import AppStudentSelect from '@/components/base/AppStudentSelect.vue'
import AppClassSelect from '@/components/base/AppClassSelect.vue'
import { getDashboardList, getStudentList } from '../api'
import { getDashboardList, getStudentList, exportStudentList } from '../api'
import { funDownload } from '@/utils/util'
export default {
data() {
return {
classList: []
}
},
components: {
AppStudentSelect,
AppClassSelect
},
computed: {
// 列表配置
tableOptions() {
......@@ -102,8 +103,13 @@ export default {
this.fetchList()
},
methods: {
keyupNumber() {
exportAll() {
exportStudentList().then(res => {
if (res) {
const url = URL.createObjectURL(res)
funDownload(url, `${Date.now()}.xlsx`)
}
})
},
fetchList() {
getDashboardList().then(res => {
......
src/modules/school/course/api.js
浏览文件 @ ae80b525
......@@ -11,4 +11,10 @@ export function getCourseList(params) {
*/
export function getCourseDetails(params) {
return httpRequest.get('/api/lms-financial/school/course/view', { params })
}
\ No newline at end of file
}
/**
* 获取视频地址
*/
export function getVideoUrl(data) {
return httpRequest.post('/api/lms-financial/school/course/aliyun-video-streaming', data)
}
src/modules/school/course/components/VideoPlayer.vue
浏览文件 @ ae80b525
<template>
<el-dialog :title="info.title" v-bind="$attrs" v-on="$listeners" width="800px" top="20vh">
<video :src="info.url" controls="controls" autoplay="autoplay"></video>
<!-- <video :src="info.url" controls="controls" autoplay="autoplay"></video> -->
<!-- <video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname">
</video-player> -->
<video id="videoPlayer" class="video-js" muted></video>
</el-dialog>
</template>
<script>
// import Videojs from "video.js"
export default {
// components: {
// videoPlayer
// },
props: {
info: {
type: Object,
......@@ -14,7 +25,31 @@ export default {
}
},
data() {
return {}
return {
playerOptions: {
// videojs options
muted: true,
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "https://img1.ezijing.com/curriculum/courses/bf3b399810-houzi.jpg",
}
}
},
mounted() {
console.log(this.info)
const url = this.info.url
setTimeout(() => {
const player = window.videojs('videoPlayer');
player.src({
src: url,
type: 'application/x-mpegURL',
withCredentials: true
})
}, 1000)
}
}
</script>
......
src/modules/school/course/views/Details.vue
浏览文件 @ ae80b525
......@@ -16,7 +16,7 @@
<div class="course-title">{{item.name}}</div>
</template>
<div class="item" v-for="(it, idx) in item.children" :key="idx">
<i v-if="it.type === 2" class="el-icon-video-play" @click="onPlay(it)"></i>
<i v-if="it.type === 2" class="el-icon-video-play" @click="fetchVideoUrl(it)"></i>
<p>{{it.name}}</p>
<div class="time" v-if="it.type === 2">
<span class="text">时长</span>
......@@ -31,7 +31,7 @@
</template>
<script>
import VideoPlayer from '../components/VideoPlayer.vue'
import { getCourseDetails } from '../api'
import { getCourseDetails, getVideoUrl } from '../api'
export default {
components: { VideoPlayer },
data() {
......@@ -83,6 +83,19 @@ export default {
this.isShowDialog = true
this.videoInfo = val
},
fetchVideoUrl(val) {
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,
title: val.name,
vid: val.resource_id
}
this.isShowDialog = true
}
})
},
fetchCourseList() {
const params = {
id: this.$route.query.id || ''
......
src/modules/school/course/views/List.vue
浏览文件 @ ae80b525
......@@ -8,7 +8,10 @@
<img v-if="row.curriculum" :src="row.curriculum.course_picture" width="120" height="70">
</template>
<template v-slot:table-desc="{ row }">
<div v-html="row.course_introducation"></div>
<el-popover placement="top-start" width="500" trigger="hover">
<div v-html="row.course_introducation"></div>
<div slot="reference" class="table-desc" v-html="row.course_introducation"></div>
</el-popover>
</template>
<template v-slot:table-x="{ row }">
<router-link :to="{ path: '/school/course/details', query: { id: row.id } }">
......@@ -81,5 +84,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.table-desc{
max-height:70px;
}
</style>
src/utils/axios.js
浏览文件 @ ae80b525
......@@ -36,11 +36,18 @@ httpRequest.interceptors.request.use(
httpRequest.interceptors.response.use(
function (response) {
const { data } = response
// console.log(data)
// 正常返回
if (data.code === 0) {
return data
}
// 下载excel流
if (data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
return data
}
// 获取阿里视频地址
if (data.video) {
return data
}
Message({ message: data.message || data.msg, type: 'error' })
return Promise.reject(data)
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论