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>
相关推荐
薛定谔的算法10 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Databend11 小时前
Databend 亮相 RustChinaConf 2025,分享基于 Rust 构建商业化数仓平台的探索
数据库
得物技术12 小时前
破解gh-ost变更导致MySQL表膨胀之谜|得物技术
数据库·后端·mysql
Raymond运维16 小时前
MariaDB源码编译安装(二)
运维·数据库·mariadb
沢田纲吉16 小时前
🗄️ MySQL 表操作全面指南
数据库·后端·mysql
RestCloud1 天前
SQL Server到Hive:批处理ETL性能提升30%的实战经验
数据库·api
RestCloud1 天前
为什么说零代码 ETL 是未来趋势?
数据库·api
ClouGence1 天前
CloudCanal + Paimon + SelectDB 从 0 到 1 构建实时湖仓
数据库
DemonAvenger2 天前
NoSQL与MySQL混合架构设计:从入门到实战的最佳实践
数据库·mysql·性能优化
AAA修煤气灶刘哥2 天前
后端人速藏!数据库PD建模避坑指南
数据库·后端·mysql