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