当前位置：网站首页>Videojs to canvas pause, play, switch video

Videojs to canvas pause, play, switch video

2022-07-26 13:41:00 【Tangce】

Insert picture description here 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#video{
			/*display: none;*/
		}
	</style>
</head>
<body>
<div class="play"> Play </div>
<div class="pause"> Pause </div>
<div class="playPause"> Play or pause video </div>
<div class="change-src"> Switch video </div>
<video id="video" loop width='300' autoplay webkit-playsinline="true" src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'></video>
 <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/*
 * video Video turned into canvas（ Compatible to IE8+）
 * Author: Zijor   Created On: 2017-06-25
 * 
 *   Usage method ：
 *      var videoCanvas = new VideoToCanvas(videoDom);
 *
 *   Object properties ：
 *       no .
 *
 *   Object method ：
 *      play        Play the video 
 *      pause       Pause video 
 *      playPause   Play or pause video 
 *      change(src)  Switch video . Parameters src Video address switched for 
 */
var VideoToCanvas = (function(window, document) {
  function VideoToCanvas(videoElement) {
    if(!videoElement) {return;}

    var canvas = document.createElement('canvas');
    canvas.width = videoElement.offsetWidth;
    canvas.height = videoElement.offsetHeight;
    ctx = canvas.getContext('2d');

    var newVideo = videoElement.cloneNode(false);

    var timer = null;

    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

    function drawCanvas() {
      ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
      timer = requestAnimationFrame(drawCanvas);
    }

    function stopDrawing() {
      cancelAnimationFrame(timer);
    }

    newVideo.addEventListener('play', function() {
      drawCanvas();
    },false);
    newVideo.addEventListener('pause', stopDrawing, false);
    newVideo.addEventListener('ended', stopDrawing, false);

    videoElement.parentNode.replaceChild(canvas, video);

    this.play = function() {
      newVideo.play();
    };

    this.pause = function() {
      newVideo.pause();
    };

    this.playPause = function() {
      if(newVideo.paused) {
        this.play();
      } else {
        this.pause();
      }
    };

    this.change = function(src) {
      if(!src) {return;}
      newVideo.src = src;
    };

    this.drawFrame = drawCanvas;
  }

  return VideoToCanvas;

})(window, document);	

var video = document.getElementById('video');
var videoCanvas = new VideoToCanvas(video);
$('.play').on('click',function(){
	videoCanvas.play();
});
$('.pause').on('click',function(){
	videoCanvas.pause();
})
$('.playPause').on('click',function(){
	videoCanvas.playPause();
})
$('.change-src').on('click',function(){
	videoCanvas.change('p4-video1.mp4');
})
</script>	
</body>
</html>
原网站

版权声明
本文为[Tangce]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261024000308.html

边栏推荐

猜你喜欢

随机推荐