vue video

作者: 一只鱼_d589 | 来源:发表于2021-12-09 14:11 被阅读0次
<!-- 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;
    }
  }
};

相关文章

网友评论

      本文标题:vue video

      本文链接:https://www.haomeiwen.com/subject/emsffrtx.html