-
使用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
相关推荐
阿华的代码王国1 小时前
MySQL ------- 索引(B树B+树)Hello.Reader1 小时前
StarRocks实时分析数据库的基础与应用执键行天涯1 小时前
【经验帖】JAVA中同方法,两次调用Mybatis,一次更新,一次查询,同一事务,第一次修改对第二次的可见性如何yanglamei19622 小时前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明,后端采用flask,前端采用vue工作中的程序员2 小时前
ES 索引或索引模板严格格2 小时前
三范式,面试重点微刻时光2 小时前
Redis集群知识及实战单字叶3 小时前
MySQL数据库mqiqe3 小时前
PostgreSQL 基础操作just-julie3 小时前
MySQL面试题——第一篇