canvas寫入視訊 video
阿新 • • 發佈:2019-01-28
canvas寫入video元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> video { width: 0; height: 0; opacity: 0; display: none; } canvas { width: 375px; height: 667px; } </style> </head> <body> <video id="video1" autoplay data-response data-type="contain" width="100%" height="100%" x-webkit-airplay="true" webkit-playsinline="" playsinline="true" preload="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" src="https://mat1.gtimg.com/zj/forguo/zwzt/quzhou_politeness/video/video1.mp4"></video> <canvas id="canvas" width="750" height="1060"></canvas> <button id="play">播放</button> </body> <script> var FixAndroidVideo = function(videoSrc, canvasSrc, videoW, videoH) { var TestVideo = document.getElementById(videoSrc); //獲取canvas畫布 var TestCanvas = document.getElementById(canvasSrc); //設定畫布 var TestCanvas2D = TestCanvas.getContext('2d'); //設定setinterval定時器 var TestVideoTimer = null; //監聽播放 TestVideo.addEventListener('play', function() { TestVideoTimer = setInterval(function() { TestCanvas2D.drawImage(TestVideo, 0, 0, videoW, videoH); }, 20); }, false); //監聽暫停 TestVideo.addEventListener('pause', function() { clearInterval(TestVideoTimer); }, false); }; FixAndroidVideo('video1', 'canvas', 750, 1060); // document.getElementById('play').addEventListener('click', function () { // document.getElementById('video1').play(); // }) </script> </html>