vue视频组件

最新推荐文章于 2024-05-28 11:01:06 发布



最新推荐文章于 2024-05-28 11:01:06 发布

阅读量203

点赞数 2

文章标签：音视频 javascript 前端

本文链接：https://blog.csdn.net/weixin_53954018/article/details/136565568

版权

1.引入组件

import Videovue from "@/components/video";

2.调用组件

<Videovue :videoFile="scope.row.keyword" videoHeight="200px" videoWidth="100%"></Videovue>

3.组件

<template>
    <div>
        <div>
            <video ref="videoElement" controls :src="videoFile" @timeupdate="updateTimeAndProgressBar" :style="{'width':videoWidth,'height':videoHeight}"></video>
            <!-- <button @click="playPauseVideo">{{ isPlaying ? '暂停' : '播放' }}</button> -->
            <!-- <span>{{ currentTime }} / {{ totalTime }}</span> -->
            <!-- <input type="range" v-model="progress" min="0" max="100" step="0.1" @input="updateVideoTime"> -->
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        videoFile: {
            type: String,
        },
        videoHeight:{
            type: String,
        },
        videoWidth:{
            type: String,
        }
    },
    data() {
        return {
            video: null,
            isPlaying: false,
            currentTime: '00:00',
            totalTime: '00:00',
            progress: 0,
            isDragging: false
        };
    },

    computed: {

    },
    mounted() {
        // 获取 video 元素
        this.video = this.$refs.videoElement;

        // 监听视频时间更新事件
        this.video.addEventListener('timeupdate', this.updateTimeAndProgressBar);
    },
    created() {

    },
    methods: {
        playPauseVideo() {
      if (this.isPlaying) {
        this.video.pause();
      } else {
        this.video.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    updateVideoTime() {
      const currentTime = (this.progress / 100) * this.video.duration;
      this.video.currentTime = currentTime;

      if (!this.isDragging) {
        this.updateTimeAndProgressBar();
      }
    },
    updateTimeAndProgressBar() {
      const currentTime = this.video.currentTime;
      const totalTime = this.video.duration;

      this.currentTime = this.formatTime(currentTime);
      this.totalTime = this.formatTime(totalTime);

      this.progress = (currentTime / totalTime) * 100;
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
    },
};
</script>
  
<style lang="scss" scoped>
.inputStyle {
    width: 200px;
}
</style>