<template> <div :class="curClassName" :style="curStyle"> <video :src="playerParams.path" :autoplay="playerParams.autoplay" :controls="playerParams.showcontrols" :loop="playerParams.replay" :muted="playerParams.mute"> <source :src="playerParams.path" type="video/mp4"> <source :src="playerParams.path" type="video/ogg"> <source :src="playerParams.path" type="video/webm"> </video> </div> </template> <script lang="ts"> import { Util } from '@/utils'; import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; @Component({}) export default class AppRawItemVideo extends Vue { /** * 名称 * * @type {*} * @memberof AppRawItemImage */ @Prop() public name!: string; /** * 模型 * * @type {*} * @memberof AppRawItemImage */ @Prop() public layoutModelDetails!: any; /** * 视频播放数据 * @memberof AppRawItemVideo */ @Prop() public videoParmas?: any; /** * 下标 * * @type {number} * @memberof AppRawItemVideo */ @Prop() public index?: number; /** * 值变更 * * @memberof AppRawItemVideo */ @Watch('videoParmas',{immediate:true,deep:true}) onVideoParmasChange(newVal: any, oldVal: any) { this.handleStaticVideo(); } /** * 项名称 * * @type {*} * @memberof AppRawItemVideo */ get itemName() { return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name; } /** * 类名 * * @memberof AppRawItemVideo */ get curClassName() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return `app-rawitem-video ${this.itemName} ${layoutModel.sysCss}`; } } /** * 当前容器样式 * * @memberof AppRawItemVideo */ get curStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.getElementStyle(); } } /** * 播放器唯一标识 * @memberof AppRawItemVideo */ public uuid: string = Util.createUUID(); /** * 视频播放参数 * * @type {any} * @memberof AppRawItemVideo */ public playerParams = { id: this.uuid, height: '100%', width: '100%', path: "", mute: 0.8, autoplay: false, replay: false, showcontrols: false }; created(){ this.handleStaticVideo(); } /** * 处理静态视频播放 * * @memberof AppRawItemVideo */ protected handleStaticVideo() { if (this.videoParmas && this.videoParmas.length > 0) { const rawParams: any = {}; this.videoParmas.forEach((param: any) => { if(param.key == 'autoplay' || param.key == 'replay' ||param.key == 'showcontrols'){ rawParams[param.key] = param.value == "1" ? true : false; }else{ rawParams[param.key] = param.value; } }) Object.assign(this.playerParams, rawParams); } } } </script> <style lang='less'> @import "./app-rawitem-video.less"; </style>