vue2获取视频时长

  1. 使用HTML5的video标签和JavaScript:

    javascript 复制代码
    <template>
      <video ref="video" autoplay controls loop muted @loadedmetadata="getVideoDuration">
        <source src="https://desktop-yikao.oss-cn-beijing.aliyuncs.com/avatar/kaissp.mp4" type="video/mp4">
      </video>
    </template>
     
    <script>
    export default {
      methods: {
        getVideoDuration() {
          const videoElement = this.$refs.video;
          const duration = videoElement.duration;
          console.log(duration);
        }
      }
    }
    </script>
  2. 使用Vue的@load事件:

    javascript 复制代码
    <template>
      <video ref="video" @load="getVideoDuration" :src="videoSource"></video>
    </template>
     
    <script>
    export default {
      data() {
        return {
          videoSource: "your_video_source",
        };
      },
      methods: {
        getVideoDuration() {
          const videoElement = this.$refs.video;
          const duration = videoElement.duration;
          console.log(duration);
        }
      }
    }
    </script>
  3. 使用第三方库,如video.js:

    javascript 复制代码
    <template>
      <video ref="video" class="video-js"></video>
    </template>
     
    <script>
    import videojs from "video.js";
    import "video.js/dist/video-js.css";
     
    export default {
      mounted() {
        this.initVideoPlayer();
      },
      methods: {
        initVideoPlayer() {
          const videoElement = this.$refs.video;
          const player = videojs(videoElement);
          
          player.on("loadedmetadata", () => {
            const duration = player.duration();
            console.log(duration);
          });
          
          player.src("your_video_source");
        }
      }
    }
    </script>
相关推荐
RestCloud18 分钟前
SQL Server到Hive:批处理ETL性能提升30%的实战经验
数据库·api
RestCloud28 分钟前
为什么说零代码 ETL 是未来趋势?
数据库·api
ClouGence3 小时前
CloudCanal + Paimon + SelectDB 从 0 到 1 构建实时湖仓
数据库
DemonAvenger9 小时前
NoSQL与MySQL混合架构设计:从入门到实战的最佳实践
数据库·mysql·性能优化
AAA修煤气灶刘哥21 小时前
后端人速藏!数据库PD建模避坑指南
数据库·后端·mysql
RestCloud1 天前
揭秘 CDC 技术:让数据库同步快人一步
数据库·api
得物技术1 天前
MySQL单表为何别超2000万行?揭秘B+树与16KB页的生死博弈|得物技术
数据库·后端·mysql
可涵不会debug1 天前
【IoTDB】时序数据库选型指南:工业大数据场景下的技术突围
数据库·时序数据库
ByteBlossom1 天前
MySQL 面试场景题之如何处理 BLOB 和CLOB 数据类型?
数据库·mysql·面试
麦兜*1 天前
MongoDB Atlas 云数据库实战:从零搭建全球多节点集群
java·数据库·spring boot·mongodb·spring·spring cloud