2019独角兽企业重金招聘Python工程师标准>>>
1、js控制视频播放
1、页面html
<div id="slide" class="videoWrap"></div><canvas v-show="!isShowVideoCover" id="canvas" class="videoCanvas"></canvas>2、jsvar 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;}
}