欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue使用video标签实现视频播放

程序员文章站 2022-09-04 12:46:17
本文项目为大家分享了vue使用video标签实现视频播放的具体代码,供大家参考,具体内容如下项目需求:动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。之前做视频...

本文项目为大家分享了vue使用video标签实现视频播放的具体代码,供大家参考,具体内容如下

项目需求:动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。
之前做视频播放时基本都是使用 vue-video-player 组件,其原因为 封装功能齐全、播放源兼容性好等。
通过这次项目需求,也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。

具体使用方法如下

<template>
  <!-- video组件 -->
  <div id="common-video" class="h-100">
    <div :class="{ isshow: control }" class="h-100">
      <video
        ref="myvideo"
        :poster="poster"
        :src="src"
        :controls="controls"
        oncontextmenu="return false"
        @timeupdate="timeupdate"
        controlslist="nodownload"
        class="video-box"
      ></video>
      <img
        src="@/assets/images/playbtn.png"
        alt=""
        @click="operatevideo"
        class="pointer operate-btn"
        :class="{ 'fade-out': videostate }"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "commonvideo",
  data() {
    return {
      videostate: false, // 视频播放状态
      // 学时
      studytime: {
        currenttime: 0, // 当前已学时长
        duration: 0 // 总时长
      },
      timer: {}, // 定时器
      pausetimer: {} // 暂停定时器
    };
  },
  /**
   * @param poster 展示图
   * @param src 视频资源
   * @param controls 是否显示控件
   * @param control 控件控制
   * @param videodata 视频基础数据
   */
  props: {
    poster: {
      type: string,
      required: false,
      default: ""
    },
    src: {
      type: string,
      required: true
    },
    controls: {
      type: boolean,
      required: false,
      default: true
    },
    control: {
      type: boolean,
      required: false,
      default: false
    },
    videodata: {
      type: object,
      required: true
    }
  },
  mounted() {
    // 监听视频播放
    this.$refs.myvideo.addeventlistener("play", () => {
      console.log("video is playing");
      this.opentimer();
    });
    // 监听视频暂停
    this.$refs.myvideo.addeventlistener("pause", () => {
      console.log("video is stop");
      this.closetimer();
    });
  },
  methods: {
    // 开启定时器
    opentimer() {
      this.timer = setinterval(() => {
        this.$emit("videostudytime", this.studytime);
      }, 5000);
    },
    // 关闭定时器
    closetimer() {
      clearinterval(this.timer);
      this.$emit("videostudytime", this.studytime);
    },
    // 开启暂停定时器
    openpausetimer() {
      this.pausetimer = setinterval(() => {
        this.hintoperate();
      }, 600000);
    },
    // 关闭暂停定时器
    closepausetimer() {
      clearinterval(this.pausetimer);
    },
    // 提示操作
    hintoperate() {
      this.operatevideo();
      this.$alert("请点击确认继续学习", "提示", {
        confirmbuttontext: "确定",
        confirmbuttonclass: "hint-btn",
        showclose: false,
        callback: action => {
          this.$refs.myvideo.currenttime = this.videodata.currenttime;
          this.operatevideo();
          this.openpausetimer();
        }
      });
    },
    // 获取当前播放位置
    timeupdate(e) {
      this.studytime.currenttime = e.target.currenttime;
      this.studytime.duration = e.target.duration ? e.target.duration : 0;
    },
    // 操作视频播放、暂停
    operatevideo() {
      if (!this.src) {
        this.$message({ message: "暂无视频资源,请查看其他视频!" });
        return false;
      }
      if (this.$refs.myvideo.paused) {
        this.$refs.myvideo.play();
        this.videostate = true;
      } else {
        this.$refs.myvideo.pause();
        this.videostate = false;
      }
    }
  },
  watch: {
    // 监听操作
    videodata(val, oldval) {
      const { currenttime, duration } = val;
      if (currenttime && duration && currenttime < duration) {
        this.hintoperate();
      }
    }
  }
};
</script>

<style lang="less">
#common-video {
  position: relative;
  .video-box {
    box-sizing: border-box;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none !important;
  }
  .isshow {
    //进度条
    video::-webkit-media-controls-timeline {
      display: none;
    }
  }
  video::-webkit-media-controls-play-button {
    visibility: hidden;
  }
  .operate-btn {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
  }
  .operate-btn:hover {
    opacity: 0.8;
  }
  .fade-out {
    opacity: 0;
  }
}
</style>

注:

1.使用 isshow 属性配合 css 样式动态展示视频滚动条
2.使用 video 标签的 οncοntextmenu=“return false” 属性来实现禁止下载
3.使用 video 标签的 @timeupdate=“timeupdate” 方法来时间视频播放进度监听
4.使用 vue 的 ref 属性为 video 标签绑定监听事件,来实现其他功能,如时长统计、延迟提示、动态显示图标播放按钮等功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇: 哥们,牛掰啊

下一篇: 能搞基吗