vue 项目中关闭弹窗后使video实现视频暂停播放

最新推荐文章于 2024-10-14 14:56:50 发布

原创最新推荐文章于 2024-10-14 14:56:50 发布 · 8.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端

pc端vue知识点分享专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在HTML中使用Vue.js框架操作`<video>`元素，包括设置src属性、检测暂停状态并调用pause()和play()方法，配合本地视频文件进行测试。详细展示了在modal弹窗中实现视频播放控制的完整代码和相关事件处理。

通过ref的使用得到video标签身上的属性及方法，然后加以控制，就实现了，最好在本地文件放一个小视频进行测试

实现思路：

 html代码
 <video :src="videoUrl"  controls="controls" style="width:400px;height:400px;" ref="vueRef"></video>

javaScript的代码：

this.video_url='视频源url地址'

判断是否暂停状态返回true false 如下：
this.$refs.vueRef.paused  //true  false

通过以下方法进行视频的播放和暂停：

this.$refs.vueRef.pause();//暂停

this.$refs.vueRef.play();//播放

实现代码如下：

        <!-- 视频播放弹窗 -->
        <div class="video_box">
          <a-modal
            width="600px"
            height="600px"
            title="视频播放"
            :visible="visible"
            centered
            @ok="handleOk"
            @cancel="handleCancel"
          >
            <video
              v-if="playState"
              width="550"
              height="400"
              id="video_play"
              controls
              preload
              webkit-playsinline="webkit-playsinline"
              playsinline=""
              controlslist="nodownload"
              x-webkit-airplay="allow"
              x5-playsinline=""              
              src="../../assets/wumingzhibei.mp4"
              ref="vueRef"
            ></video>
          </a-modal>
        </div>

<script>
export default {
  props: {
    conditionsData: {
      type: Array,
      default: () => [
        {
          title: "分类",
          list: [
            "全部",
            "展会展览",
            "科技赛事",
            "路演发布",
            "论坛讲座",
            "在线视频",
            "专题培训",
          ],
        },
        {
          title: "当前状态",
          list: ["全部", "进行中", "已结束"],
        },
      ],
    },
  },
  data() {
    return {
      selectControl: [], //选项控制
      cardArr: [1, 2, 3, 4, 5, 6],
      pageSizeOptions: ["4", "20", "30", "40", "50"], // 下拉选项
      current: 1, //  当前页数
      pageSize: 10, // 每页几条数据
      total: 50, // 总页数
      input: "", // 搜索框输入的值
      videoUrl:"../../assets/wumingzhibei.mp4",
      play: true, // 是否显示播放图标 通过遍历的方式添加这个属性，然后根据当前的这个属性判断是否显示 把这个属性添加到item中
      visible: false, // 控制弹框是否显示
      playState: true, // 是否显示播放器
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //控制选中函数
    select(i, j) {
      console.log(i + "--------" + j);
      this.$set(this.selectControl, i, j);
      // this.selectControl[i] = j
      console.log(this.selectControl);
    },
    //页面初始化函数
    init() {
      this.selectControl = [];
      this.conditionsData.forEach(() => {
        this.selectControl.push(0);
      });
      console.log(this.selectControl);
    },
    // 当前页数
    onChange(current, pageSize) {
      this.current = current;
      this.pageSize = pageSize;
      console.log(this.current, "当前页数", this.current, "一页几条");
    },
    activityDetails(cardItem) {
      this.$router.push({ path: "/activityDetails" });
    },
    // 视频弹框
    showModal() {
      this.visible = true;
      this.playState = true;
    },
    handleOk(e) {
      this.visible = false;
      this.playState = false;
      // setTimeout(() => {
      //   this.visible = false;
      // }, 2000);
      console.log(this.$refs.vueRef,666)
      this.$refs.vueRef.pause();//暂停
    },
    handleCancel(e) {
      this.visible = false;
      this.$refs.vueRef.pause();//暂停
    },
  },
};
</script>

css自己写一下了，哈哈

 // 视频弹框样式
  .video_box {
    background-color: rgb(0, 0, 0);
    #video_play {
      width: 400px;
      height: 400px;
      margin: auto;
      background-color: rgb(38, 133, 85);
      background-color: rgb(0, 0, 0);
      display: block;
      visibility: visible;
      cursor: auto;
    }
  }