第一种方式
在iondex.html 中引入
<head>
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
id="video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
</video>
</body>
第二种方式
npm下载
npm install --save-dev video.js
在main.js 中引入
import 'video.js'
//fluid:true 设置内在元素的比率来做到响应式的宽高
var player = videojs('video', { fluid: true }, function () {
console.log('Good to go!');
//this.play(); // if you don't trust autoplay for some reason
});
player.on('play', function () {
console.log('开始/恢复播放');
});
player.on('pause', function () {
console.log('暂停播放');
});
player.on('ended', function () {
console.log('结束播放');
});
player.on('timeupdate', function() {
console.log(player.currentTime());
})
player.on('timeupdate', function () {
// 如果 currentTime() === duration(),则视频已播放完毕
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放结束
}
});