<template>
    <div class="app-rawitem-video">
        <video 
            :src="playerParams.url" 
            :autoplay="playerParams.autoplay" 
            :controls="playerParams.controls" 
            :loop="playerParams.loop" 
            :muted="playerParams.volume">
        </video>
    </div>
</template>

<script lang="ts">
import { Util } from '@/utils';
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({})
export default class AppVideo extends Vue {
    /**
     * 播放器唯一标识
     */
    public uuid: string = Util.createUUID();

    /**
     * 视频播放数据
     */
    @Prop() public videoParmas?: any;

    //视频播放参数
    public playerParams = {
        id: this.uuid,
        height: '100%',
        width: '100%',
        url:"https://kvideo01.youju.sohu.com/16403c4c-378c-4415-b3ef-908e87efb0082_0_0.mp4",
        volume:0.8,
        autoplay:false,
        loop:false,
        controls:false
    };    

    /**
     * 生命周期
     */
    public mounted() {
        if (this.videoParmas) {
            this.playerParams.url = this.videoParmas.path;
            this.playerParams.volume = this.videoParmas.mute ? 0 : 0.8;
            this.playerParams.autoplay = this.videoParmas.autoplay ? true : false;
            this.playerParams.loop = this.videoParmas.replay ? true : false;
            this.playerParams.controls = this.videoParmas.showcontrols ? true : false
        }
    }
}
</script>

<style lang='less'>
@import "./app-rawitem-video.less";
</style>
