-
使用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>
-
使用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>
-
使用第三方库,如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>
vue2获取视频时长
xingxingwuxin2024-07-21 14:08
相关推荐
RestCloud18 分钟前
SQL Server到Hive:批处理ETL性能提升30%的实战经验RestCloud28 分钟前
为什么说零代码 ETL 是未来趋势?ClouGence3 小时前
CloudCanal + Paimon + SelectDB 从 0 到 1 构建实时湖仓DemonAvenger9 小时前
NoSQL与MySQL混合架构设计:从入门到实战的最佳实践AAA修煤气灶刘哥21 小时前
后端人速藏!数据库PD建模避坑指南RestCloud1 天前
揭秘 CDC 技术:让数据库同步快人一步得物技术1 天前
MySQL单表为何别超2000万行?揭秘B+树与16KB页的生死博弈|得物技术可涵不会debug1 天前
【IoTDB】时序数据库选型指南:工业大数据场景下的技术突围ByteBlossom1 天前
MySQL 面试场景题之如何处理 BLOB 和CLOB 数据类型?麦兜*1 天前
MongoDB Atlas 云数据库实战:从零搭建全球多节点集群