video标签_JS对video标签的持续监视

“ 一入前端深似海，何时功成万古枯。”

在日常的工作开发中

碰到一个视频播放的功能，往往是比较令人头疼的

因为做出一个比较完美的视频播放,往往会有一个漫长的踩坑过程

如果想通过video标签来实现一套与众不同的页面，是很艰难的，前一段时间接了一个视频播放的需求，由于各种原因，导致了项目的不可控，延期了好久才给出了一个兜底方案，下面是我的万里长征路

踩坑1

—

千万不要相信你的后端同学

首先拿到后端同学给你的视频地址，一定要先看下，这些接口返回的链接，在各大主流浏览器是不是都能正常播放，因为像火狐，safari浏览器对视频格式有着不同的要求

作为一名资深的前端开发，在这方面要对后端同学严格要求，产品验收的时候，如果看到视频在浏览器不能播放，首先艾特的就是你，因为页面是你画出来的。

同时，如果前端同学需要自己封装进度条等功能，那么还需要了解后端同学提供的视频是不是合格的

比如，进度条是不是从0开始播放，或者有木有只有进度条在动，视频其实没有播放的情况

本人对此深有体会由于后端同学提供的摄像头视频是静止的画面所以当时就没有考虑到会有这种问题后端给的视频直接拿到浏览器播放只有下面的进度条在动视频其实没有播放当然，这种情况存在的几率灰常小

踩坑2

—

手写需谨慎

能用组件实现的，还是尽量选择组件趴。

(1)html页面中视频标签

//自定义进度条需要设置controls="false"<video id="player" controls="controls">    <source src="a.mp4">video>//react中也可以使用ref的方式<video ref={this.player} controls="false">    <source src="a.mp4">video>constructor(props) {  super(props);  this.player = React.createRef();}//this.player.current 就是你需要的对象

(2)视频加载中

<script> var c= document.getElementById("video");  c.addEventListener('waiting',   () => {    console.log("加载中");  });script>

(3)视频加载完成，获取视频的时长

<script> var c= document.getElementById("player");  //监听视频加载  c.addEventListener('loadedmetadata',  () => {     //视频的总长度    console.log(video.duration);  });script>

(4)视频开始播放

<script> var c= document.getElementById("video");  c.addEventListener('play',    () => {     console.log("开始播放");   });script>

(5)实时监听视频播放进度

<video ref={this.player} controls="false"  onTimeUpdate={() => {this.timeUpdate}}>  <source src="a.mp4" type="video/mp4">video>timeUpdate = () => {  //视频当前播放到了第几秒  console.log(video.currentTime)}

(6)视频播放中

<script> var c = document.getElementById("video");  c.addEventListener('playing',    () => {     console.log("播放中");   });script>

(7)视频播放结束

<script> var c= document.getElementById("video");  c.addEventListener('ended',   () => {     console.log("播放结束");   }, false);script>