vue 获取任意视频时长和视频任意时间动画帧

最新推荐文章于 2024-07-20 14:52:32 发布

行而上学

最新推荐文章于 2024-07-20 14:52:32 发布

阅读量3.7k

点赞数 5

分类专栏： js基础 VUE 基础文章标签： vue js video

本文链接：https://blog.csdn.net/weixin_40145429/article/details/103405659

版权

1.获取时长

function  getVideoTime(fileInput, callback) {
	var file = fileInput.files[0];
	//获取视频或者音频时长
	var fileurl = URL.createObjectURL(file);
	//经测试，发现audio也可获取视频的时长
	var audioElement = new Audio(fileurl);
	// loadedmetadata 视频源数据加载成功
	audioElement.addEventListener("loadedmetadata",  (_event) => {
		var duration = audioElement.duration; // 视频时长
	  	callback && callback(duration )
	});
}

2.获取任意帧图片

setVideoImg(url) {
      this.$nextTick(() => {
      	// 创建视频
        let video = document.createElement('video')
        video.controls = 'controls'
        video.crossOrigin = 'anonymous'
        // 播放地址
        let source = document.createElement('source')
        source.src = url
        source.type = 'video/mp4'
        video.appendChild(source)
        // 这很重要
        video.currentTim