```c
<video-player
id="video"
class="video video-player vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event, 'm')"
@ready="playerReadied"
v-on:click.stop="doThis"
></video-player>
<canvas
ref="canvas"
id="canvas"
width="640"
height="480"
v-show="showcanvas"
@mousedown="mousedown"
@mouseup="mouseup"
@mousemove="mousemove"
></canvas>
## 给标注绑定点击事件
```handlebars
<!-- 标注 -->
<div class="tool mark" v-show="showmark">
<h4>标记信息</h4>
<div class="mark-box" v-for="(item, index) in markmsg" :key="index">
<div class="mark-circle">
<div class="mark-title">
<p @click="markTitle(index)">标注{{ index + 1 }} </p>
<p @click="delBtn(index)">x</p>
</div>
<div class="mark-time">
<p>时间点: </p>
<p>{{ item.pausetime }}</p>
</div>
<div class="mark-msg">
<p>标注信息: </p>
<p class="mark-content">{{ item.content }}</p>
</div>
</div>
</div>
</div>
//暂停
onPlayerPause(player) {
this.markmsg.push({
pausetime: player.controlBar.currentTimeDisplay.formattedTime_,
content: "",
});
},
//播放准备
playerReadied(player, playtimes) {
// console.log(player, "playerReadied");
// console.log(getS(playtimes), "playerReadied");
player.currentTime(getS(playtimes));
},
//定位
markTitle(index) {
this.playerReadied(
this.$refs.videoPlayer.player,
this.markmsg[index].pausetime
);
},
工具函数
export const getS = (params) => {
var s = '';
// var hour = params.split(':')[0];
if (!params) {
return s;
}
var min = params.split(':')[0];
var sec = params.split(':')[1];
// console.log(min, sec, 'minsec');
s = Number(min * 60) + Number(sec);
return s;
}