js控制視頻播放

一、js控制視頻播放

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

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