Java控制视频播放_js控制视频播放

1、js控制视频播放

1、页面html

2、js

var video;

var canvas;

/**

* desc: 视频点击事件

* author: wangzhen 2019-04-30

*/

function startPlayback() {

console.log('视频点击事件');

if (!video) {

video = document.createElement('video');

video.src = vm.advBanner.videoUrl;

video.loop = true;

video.addEventListener('playing', paintVideo);

}

video.play();

}

/**

* desc: 绘制画视频

* author: wangzhen 2019-04-30

*/

function paintVideo() {

if (!canvas) {

// canvas = document.createElement('canvas');

canvas = document.getElementById('canvas');

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

document.getElementById("slide").appendChild(canvas);

// document.body.appendChild(canvas);

}

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

if (!video.paused) {

vm.isShowVideoCover = false;

requestAnimationFrame(paintVideo);

} else {

vm.isShowVideoCover = true;

}

}