最近做了个项目需要给视频打点，故而查阅各方资料
参考：
vue项目如何引入video.js
video.js使用及问题
video.js使用技巧
- 在vue项目中文件的引入video.js和videojs-markers
import videojs from 'video.js'import 'video.js/dist/video-js.css'import 'videojs-markers'- videojs初始化
html初始化(此方法没法添加标记)
在<video>标签里面加上class="video-js"和data-setup='{}'和controls属性。<video id="video" class="video-js vjs-big-play-centered" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" width="600" height="400" data-setup='{}' > <source :src="videoSrc" type="video/mp4"/></video>- js初始化
this.player = videojs('video', { controls: true, // 必填，显示各控制组件 autoplay: false, // 是否自动播放 preload: 'auto', // 预加载 poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面 width: '600px', height: '400px', loop: true, // 是否循环播放 playbackRates: [0.5, 1, 1.5, 2], // 是否显示倍速 controlBar: { volumePanel: { inline: false// 将音量横向改为纵向 } } })- js动态初始化
注意当视频播放不出来时，看看controls参数有没有，看看视频地址有没有
<template> <div class="video"> <div ref="videoBox"></div> </div> </template> <script> const video = ` <video id="myvideo" controls class="video-js vjs-big-play-centered" > <source src="${this.videoSrc}" type="video/mp4" /> </video> ` this.$refs.videoBox.innerHTML = video this.player = videojs('myvideo', { controls: true, // 必填，显示各控制组件 autoplay: false, // 是否自动播放 preload: 'auto', // 预加载 poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面 width: '600px', height: '400px', loop: true, // 是否循环播放 playbackRates: [0.5, 1, 1.5, 2], // 是否显示倍速 controlBar: { volumePanel: { inline: false// 将音量横向改为纵向 } } }) this.player.markers({ markerStyle: { // 标记样式 width: '0.7em', height: '0.7em', bottom: '-0.15em', 'border-radius': '50%', 'background-color': 'orange', position: 'absolute' }, markerTip: { display: false// 不显示标记的tip }, markers: [ { time: 9.5 }, { time: 16 }, { time: 23.6 }, { time: 28 } ] }) </script>github:视频打点