js控制视频播放

2019独角兽企业重金招聘Python工程师标准>>>

1、js控制视频播放

1、页面html
<div id="slide" class="videoWrap"></div>
                <canvas v-show="!isShowVideoCover" id="canvas" class="videoCanvas"></canvas>

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;
    }
}

 

转载于:https://my.oschina.net/u/2365397/blog/3047855