初始化
This commit is contained in:
砂糖
127
frontend/packages/BasicComponents/Video/index.vue
Normal file
127
frontend/packages/BasicComponents/Video/index.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<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>
|
||||
135
frontend/packages/BasicComponents/Video/setting.vue
Normal file
135
frontend/packages/BasicComponents/Video/setting.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="bs-setting-wrap">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="config"
|
||||
label-width="90px"
|
||||
label-position="left"
|
||||
class="setting-body bs-el-form"
|
||||
>
|
||||
<slot name="top" />
|
||||
<el-form
|
||||
:model="config.customize"
|
||||
label-position="left"
|
||||
class="setting-body bs-el-form"
|
||||
label-width="90px"
|
||||
>
|
||||
<SettingTitle>标题</SettingTitle>
|
||||
<el-form-item
|
||||
label="播放器名称"
|
||||
class="lc-field-body"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.title"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<SettingTitle>位置</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<PosWhSetting :config="config" />
|
||||
</div>
|
||||
<SettingTitle v-if="config.border">边框</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<BorderSetting
|
||||
v-if="config.border"
|
||||
label-width="100px"
|
||||
:config="config.border"
|
||||
:bigTitle='config.title'
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>旋转</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<RotateSetting
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>基础</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<el-form-item label="视频链接">
|
||||
<el-input
|
||||
v-model="config.customize.videoUrl"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频封面">
|
||||
<el-input
|
||||
v-model="config.customize.posterUrl"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频格式">
|
||||
<el-select
|
||||
v-model="config.customize.videoType"
|
||||
popper-class="bs-el-select"
|
||||
class="bs-el-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in videoTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
|
||||
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
|
||||
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
|
||||
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
|
||||
import {predefineColors} from "data-room-ui/js/utils/colorList";
|
||||
export default {
|
||||
name: 'Border14Setting',
|
||||
components: {
|
||||
PosWhSetting,
|
||||
SettingTitle,
|
||||
BorderSetting,
|
||||
RotateSetting
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
predefineThemeColors: {
|
||||
type: Array,
|
||||
default: () => predefineColors
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
videoTypeList: [
|
||||
{
|
||||
label: 'mp4',
|
||||
value: 'video/mp4'
|
||||
},
|
||||
{
|
||||
label: 'm3u8',
|
||||
value: 'application/x-mpegURL'
|
||||
},
|
||||
{
|
||||
label: 'flv',
|
||||
value: 'video/x-flv'
|
||||
},
|
||||
{
|
||||
label: 'mov',
|
||||
value: 'rtmp/mp4'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted () {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lc-field-body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
</style>
|
||||
35
frontend/packages/BasicComponents/Video/settingConfig.js
Normal file
35
frontend/packages/BasicComponents/Video/settingConfig.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import { commonConfig } from '../../js/config'
|
||||
|
||||
export const settingConfig = {
|
||||
// 设置面板属性的显隐
|
||||
displayOption: {
|
||||
dataAllocation: {
|
||||
// 是否存在数据配置
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
}
|
||||
const customConfig = {
|
||||
type: 'video',
|
||||
root: {
|
||||
version: '2023071001',
|
||||
// 绕x轴旋转角度
|
||||
rotateX: 0,
|
||||
// 绕y轴旋转角度
|
||||
rotateY: 0,
|
||||
// 绕z轴旋转角度
|
||||
rotateZ: 0,
|
||||
// 透视距离
|
||||
perspective: 0,
|
||||
skewX: 0,
|
||||
skewY: 0
|
||||
},
|
||||
customize: {
|
||||
videoType: 'application/x-mpegURL',
|
||||
videoUrl: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
|
||||
posterUrl: ''
|
||||
}
|
||||
}
|
||||
export const dataConfig = {
|
||||
...commonConfig(customConfig)
|
||||
}
|
||||
Reference in New Issue
Block a user