video总结

视频知识点
1、属性

poster：视频封面路径地址
例子：
	:poster="地址"

onpause：视频暂停触发方法
	例子：
		@pause="onPlayerPause()"
	
onplay：视频播放触发方法
	例子：
		@pause="onPlayerPlay()"
	
oncanplay：视频加载完成触发方法
	例子：
		@canplay="getTime()"

2、方法

//获取dom节点，	dom节点.play()可以控制视频播放
let player = this.$refs.videoPlayer;
player.play();

//获取视频时长
let video= this.$refs.video;
video.duration

注意：vue中在 mounted 中获取时长会出现NaN的情况，据传是因为视频还没加载完
*本人解决方式：使用 oncanplay 加载完成后触发函数（但是可能会先出现NaN然后在出现正常时间） *

例：

html :
/**
	外层有个v-for，这里就不展示了
*/
  <video
	style="display: none"
	width="100%"
	:poster="item.coverURL"
	controls
	@canplay="getTime()"
>
	<source :src="item.linkURL" type="video/mp4" />
	<source :src="item.linkURL" type="video/ogg" />
	<source :src="item.linkURL" type="video/webm" />
</video>

js :
/**
	这里直接获取dom节点，真实环境中不推荐这样直接操作dom
*/
getTime() {
let meansVideo = document.querySelectorAll(
	".means .content .Video video"
);
for (let i = 0; i < meansVideo.length; i++) {
	this.$set(
		this.meansData[i],
		"time",
		this.format(parseInt(meansVideo[i].duration))
	);
}
	this.isShowTime = true;
},

add0(m) {
  return m < 10 ? "0" + m : m;
},

format(time) {
  let s = time % 60;
  let m = parseInt((time / 60) % 60);
  let h = parseInt(parseInt(time / 60) / 60);
  let tmp;
  if (h == 0) {
    tmp = this.add0(m) + ":" + this.add0(s);
  } else {
    tmp = this.add0(h) + ":" + this.add0(m) + ":" + this.add0(s);
  }
  return tmp;
},

上传视频文件获取视频文件时长

var fileurl = URL.createObjectURL(file);
var audioElement = new Audio(fileurl);
	var duration;
audioElement.addEventListener("loadedmetadata", function (_event) {
	duration = audioElement.duration;
	console.log(parseInt(duration));//单位：秒
});