vue video

2021-12-09  本文已影响0人  一只鱼_d589
<!-- html -->
<p>一、import <button @click="play1" class="play-btn">play1</button></p>
<video controls ref="videoDom1" class="video-box" autoplay>
   <source src type="video/mp4" />
 </video>


<p>二、require <button @click="play2" class="play-btn">play2</button></p>
<video controls ref="videoDom2" class="video-box" autoplay>
    <source src type="video/mp4" />
</video>

<p>三、a标签 <a :href="video2" target="_blank" class="play-btn">play3</a></p>


// js
import video1 from "@/assets/video/test视频.mp4";
export default {
  name: "HelloWorld",
  data() {
    return {
      videoUrl1: "",
      videoUrl2: "",
      video2: require("@/assets/video/test视频.mp4")
    };
  },
  methods: {
    play1() {
      this.$refs.videoDom1.src = video1;
    },
    play2() {
      this.$refs.videoDom2.src = this.video2;
    }
  }
};

上一篇 下一篇

猜你喜欢

热点阅读