|
|
|
<template>
|
|
|
|
<div class="info">
|
|
|
|
<div class="container">
|
|
|
|
<div class="play">
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="24">
|
|
|
|
<video-player
|
|
|
|
id="video"
|
|
|
|
class="video-player vjs-custom-skin"
|
|
|
|
ref="videoPlayer"
|
|
|
|
@ended="videoEnded"
|
|
|
|
@timeupdate="videoTimeUp"
|
|
|
|
@loadeddata="videoLoaded"
|
|
|
|
@seeking="videoSeeking"
|
|
|
|
@seeked="videoSeeked"
|
|
|
|
:events="['seeking', 'seeked']"
|
|
|
|
:playsinline="true"
|
|
|
|
:options="playerOptions"
|
|
|
|
></video-player>
|
|
|
|
<!-- <h3 id="text-progress">{{ this.progress }}</h3> -->
|
|
|
|
</el-col>
|
|
|
|
<!-- <el-col :span="6" class="text"> -->
|
|
|
|
<!-- </el-col> -->
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Vue from 'vue'
|
|
|
|
import VideoPlayer from 'vue-video-player'
|
|
|
|
import 'video.js/dist/video-js.css'
|
|
|
|
import 'vue-video-player/src/custom-theme.css'
|
|
|
|
Vue.use(VideoPlayer)
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
classHour : [],
|
|
|
|
data : [],
|
|
|
|
userId :'',
|
|
|
|
videoInformation : [],
|
|
|
|
progress : '0.00%',
|
|
|
|
durationTime : '' ,// 视频总时常
|
|
|
|
currentTime : '' ,// 当前播放进度时长
|
|
|
|
saveDurationTime : '', // 视频总时常
|
|
|
|
saveCurrentTime:'', // 当前播放进度时长
|
|
|
|
isShowSubs: false,
|
|
|
|
recodrTime :null,
|
|
|
|
playerOptions:{
|
|
|
|
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
|
autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
|
muted: false, // 默认情况下将会消除任何音频。
|
|
|
|
loop: false, // 导致视频一结束就重新开始。
|
|
|
|
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
|
language: 'zh-CN',
|
|
|
|
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
|
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
|
sources: [
|
|
|
|
{
|
|
|
|
type: 'video/mp4', //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
|
|
|
|
src: 'http://vjs.zencdn.net/v/oceans.mp4' //url地址
|
|
|
|
}
|
|
|
|
],
|
|
|
|
poster: '', //你的封面地址
|
|
|
|
// width: document.documentElement.clientWidth, //播放器宽度
|
|
|
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
|
controlBar: {
|
|
|
|
timeDivider: true,
|
|
|
|
durationDisplay: true,
|
|
|
|
remainingTimeDisplay: false,
|
|
|
|
fullscreenToggle: true //全屏按钮
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 视频信息加载完成，获取总时长，若接口返回进度，断点播放
|
|
|
|
videoLoaded(item) {
|
|
|
|
this.durationTime = item.cache_.duration
|
|
|
|
this.videoInformation = item
|
|
|
|
// console.log('progress', this.progress)
|
|
|
|
if (this.progress > '0.00%') {
|
|
|
|
item.currentTime(Number(this.currentTime))
|
|
|
|
}
|
|
|
|
// console.log('视频信息videoLoaded：', this.videoInformation)
|
|
|
|
},
|
|
|
|
// 当前播放进度
|
|
|
|
videoTimeUp(item) {
|
|
|
|
this.currentTime = item.cache_.currentTime
|
|
|
|
this.progress = ((this.currentTime.toFixed(2) / item.cache_.duration.toFixed(2)) * 100).toFixed(2) + '%'
|
|
|
|
// console.log('当前播放进度', item)
|
|
|
|
},
|
|
|
|
// 正在拖动
|
|
|
|
videoSeeking(item) {
|
|
|
|
// console.log('正在拖动',item)
|
|
|
|
this.isSeeking = true
|
|
|
|
},
|
|
|
|
// 拖动结束
|
|
|
|
videoSeeked(item) {
|
|
|
|
// console.log('拖动结束',item)
|
|
|
|
this.isSeeking = false
|
|
|
|
},
|
|
|
|
|
|
|
|
// 点击播放
|
|
|
|
videoPlay() {
|
|
|
|
//清除定时器
|
|
|
|
if (this.pauseTimer) {
|
|
|
|
clearTimeout(this.pauseTimer)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 触发暂停
|
|
|
|
videoPause(item) {
|
|
|
|
//利用定时器延迟
|
|
|
|
this.pauseTimer = setTimeout(() => {
|
|
|
|
if (this.isVideoEnd) return
|
|
|
|
if (this.isSeeking) return
|
|
|
|
// 展示蒙层
|
|
|
|
this.isShowSubs = true
|
|
|
|
}, 100)
|
|
|
|
},
|
|
|
|
// 播放结束
|
|
|
|
videoEnded() {
|
|
|
|
this.isVideoEnd = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
$width: 1140px;
|
|
|
|
.info {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.container {
|
|
|
|
width: $width;
|
|
|
|
margin: auto;
|
|
|
|
.breadcrumb {
|
|
|
|
padding-top: 20px;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
}
|
|
|
|
.play {
|
|
|
|
box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
|
|
|
|
background-color: #26262b;
|
|
|
|
.text {
|
|
|
|
font-size: 15px;
|
|
|
|
color: #fff;
|
|
|
|
text-align: left;
|
|
|
|
.title {
|
|
|
|
padding: 12px 15px;
|
|
|
|
}
|
|
|
|
.teacher {
|
|
|
|
padding: 12px 0 12px 10px;
|
|
|
|
background: #2d2d2d;
|
|
|
|
}
|
|
|
|
.list {
|
|
|
|
height: 393px;
|
|
|
|
width: 283px;
|
|
|
|
.name1 {
|
|
|
|
cursor: pointer;
|
|
|
|
background: #2d2d2d;
|
|
|
|
font-size: 15px;
|
|
|
|
padding: 10px 0 10px 47px;
|
|
|
|
margin-top: 2px;
|
|
|
|
}
|
|
|
|
.name2 {
|
|
|
|
cursor: pointer;
|
|
|
|
color: rgb(61, 231, 112);
|
|
|
|
background: #2d2d2d;
|
|
|
|
font-size: 15px;
|
|
|
|
padding: 10px 0 10px 47px;
|
|
|
|
margin-top: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// .biref {
|
|
|
|
// box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
|
|
|
|
// background-color: #ffffff;
|
|
|
|
// font-size: 15px;
|
|
|
|
// text-align: left;
|
|
|
|
// color: #5e5e5e;
|
|
|
|
// padding: 25px 20px;
|
|
|
|
// margin: 30px 0;
|
|
|
|
// img {
|
|
|
|
// vertical-align: middle;
|
|
|
|
// margin-right: 5px;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
background-color: #f7f9fc !important;
|
|
|
|
/* background-color: #d7e4f7 !important; */
|
|
|
|
}
|
|
|
|
.vjs-custom-skin > .video-js .vjs-big-play-button {
|
|
|
|
width: 70px;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
.el-breadcrumb__inner {
|
|
|
|
color: #2c3e50 !important;
|
|
|
|
}
|
|
|
|
.el-scrollbar__wrap {
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
...
|
...
|
|
