<template>
	<video class="czo-video" controls :autoplay="autoplay" preload="none" :style="{ width, height }" :poster="poster">
		<source :src="src" type="video/mp4" />
		<source :src="src" type="video/mpeg" />
		<source :src="src" type="video/ogg" />
	</video>
</template>

<script>
	export default {
		props: {
			//封面地址
			poster: String,
			//资源地址
			src: String,
			//宽度
			width: {
				type: String,
				default: '100%'
			},
			//高度
			height: {
				type: String,
				default: '100%'
			},
			//是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.czo-video {
		display: block;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #fff;
		background-color: #000;
		position: relative;
		padding: 0;
		font-size: 10px;
		line-height: 1;
		font-weight: normal;
		font-style: normal;
		font-family: Arial, Helvetica, sans-serif;
		word-break: initial;
	}
</style>
