html video实现

两种写法

第一种没有进度条，刚进入页面会有张页面，点击播放视频， 

第二种进入页面会有进度条

<template>
  <div>
    <!-- 没有进度条 -->
    <video width="1080" :key="new Date().getTime()" height="550" @click="play()" ref='audio' controlsList="nodownload" poster="https://health.ncsis.org.cn:50025/miniproject/staticimg/btn_video.png" :controls="controls" class="video">
      <source :src="url" type="video/mp4">
    </video>
    <!-- 有进度条 -->
    <video width="1080" v-if="url" height="550" controlsList="nodownload" preload poster="https://health.ncsis.org.cn:50025/miniproject/staticimg/btn_video.png" controls class="video">
      <source :src="url" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  data () {
    return {
      controls: false,
      url: 'https://cancer-research.oss-cn-beijing.aliyuncs.com/yuance-platform-permission/79bd7e90acd54626811e99a7cae1cdba.mp4'
    }
  },
  methods: {
    play () {
      this.controls = true
      setTimeout(() => {
        this.$refs.audio.play()
      }, 200)
    },
  }
}
</script>

<style>
</style>