128 lines
3.0 KiB
Vue
128 lines
3.0 KiB
Vue
<template>
|
||
<div
|
||
style="width: 100%; height: 100%"
|
||
class="bs-design-wrap"
|
||
>
|
||
<video-player
|
||
ref="videoPlayer1"
|
||
:options="videoOptions"
|
||
class="vjs-custom-skin videoPlayer"
|
||
:playsinline="true"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { videoPlayer } from 'vue-video-player'
|
||
import 'video.js/dist/video-js.css'
|
||
import 'videojs-contrib-hls'
|
||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||
export default {
|
||
name: 'Video',
|
||
components: { videoPlayer },
|
||
mixins: [refreshComponentMixin],
|
||
props: {
|
||
// 卡片的属性
|
||
config: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
computed: {},
|
||
beforeDestroy () {
|
||
this.$refs.videoPlayer1.dispose()
|
||
},
|
||
data () {
|
||
return {
|
||
// TODO 这里介绍各个参数的意义
|
||
videoOptions: {
|
||
live: true,
|
||
// 浏览器准备好时开始回放
|
||
autoplay: false,
|
||
// true：默认视频播放无声音，需要手动开启声音
|
||
muted: false,
|
||
// 播放速度
|
||
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||
// 语言
|
||
language: 'zh-CN',
|
||
// 当true时，播放器将按比例缩放以适应其容器
|
||
fluid: true,
|
||
// 无法播放时提示信息
|
||
notSupportedMessage: '该视频无法正常播放',
|
||
// 纵横比或屏幕高宽比
|
||
aspectRatio: '16:9',
|
||
controlBar: {
|
||
timeDivider: true,
|
||
durationDisplay: true,
|
||
remainingTimeDisplay: true,
|
||
// 全屏按钮
|
||
fullscreenToggle: true
|
||
},
|
||
// 播放器宽度，测试无效
|
||
// width: 100,
|
||
// 视频封面图
|
||
poster: this.config.customize.posterUrl,
|
||
sources: [
|
||
{
|
||
// 流配置，数组形式，会根据兼容顺序自动切换
|
||
type: this.config.customize.videoType,
|
||
src: this.config.customize.videoUrl
|
||
}
|
||
]
|
||
},
|
||
dataForm: {
|
||
script: ''
|
||
}
|
||
}
|
||
},
|
||
|
||
watch: {},
|
||
mounted () {},
|
||
methods: {
|
||
// 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
|
||
changeStyle (config) {
|
||
this.videoOptions.sources.type = config.customize.videoType
|
||
this.videoOptions.sources.type = config.customize.videoUrl
|
||
this.videoOptions.poster = config.customize.posterUrl
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bs-design-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: transparent;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||
box-sizing: border-box;
|
||
|
||
.videoPlayer {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
/*滚动条样式*/
|
||
::v-deep ::-webkit-scrollbar {
|
||
width: 4px;
|
||
border-radius: 4px;
|
||
height: 4px;
|
||
}
|
||
|
||
::v-deep ::-webkit-scrollbar-thumb {
|
||
background: #dddddd !important;
|
||
border-radius: 10px;
|
||
}
|
||
::v-deep .video-js .vjs-big-play-button {
|
||
z-index: 100;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 4em;
|
||
}
|
||
</style>
|