|
@@ -1,73 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="videoDemo" :style="`background-image:url(${require('@/assets/image/background.png')})`">
|
|
|
- <video v-if="isPlay" ref="videoDom" width="100%" height="100%" controls muted preload="auto" crossorigin="anonymous">
|
|
|
- <source :src="videoSrc" type="video/mp4">
|
|
|
- 您的浏览器不支持视频标签。
|
|
|
- </video>
|
|
|
- <div class="playVideo" v-if="!isPlay" >
|
|
|
- <div class="button">
|
|
|
- <el-button class="btn" @click="play">播放视频</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- },
|
|
|
- props: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // videoSrc: require('@/assets/media/yanshi.mp4'),
|
|
|
- videoSrc: '',
|
|
|
- isPlay:false,
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {},
|
|
|
- computed: {},
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- play(){
|
|
|
- this.$message.warning('敬请期待')
|
|
|
- return
|
|
|
- this.isPlay = true
|
|
|
- this.$nextTick(()=>{
|
|
|
- console.log(this.$refs.videoDom.play)
|
|
|
- this.$refs.videoDom.play()
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.videoDemo{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.playVideo{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- inset: 0;
|
|
|
- background-color:rgba(238, 228, 228, 0.2);
|
|
|
-}
|
|
|
-.button{
|
|
|
- width: 80px;
|
|
|
- height: 50px;
|
|
|
- position: absolute;
|
|
|
- inset: 0;
|
|
|
- margin: auto;
|
|
|
- .btn{
|
|
|
- background-color:rgba(238, 228, 228, 0.2);
|
|
|
- color: black;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|