아래에서 몇 가지 사례를 보여드리겠습니다. 이는 몇 가지 문제에 대한 예와 요약입니다. 캔버스를 사용하여 비디오를 그렸고 그 효과가 비디오를 직접 사용하는 것과 동일하다는 것을 알았기 때문에 참고하고 연구할 가치가 있습니다. 그래서 여전히 원본 영상 방법
<div class="commondw videoimg" id="videoimg"></div><video class="vido" id="vidoid" poster="images/photo/video.jpg"> <source src="media/move.mp4" type="video/mp4"></video>$("#videoimg").on("click", function () { $(this).fadeOut(1000); $(".clicktips").hide(); $("#vidoid").show(); $("#vidoid")[0].play(); $("#vidoid").bind('ended', function () { $("#vidoid").hide(); $("#videoimg").show(); }) });
을 사용했는데 브라우저에서는 여전히 문제가 없고 캔버스 그리기와 동일합니다! 블라인드 방식의 네이티브 영상 버전을 경험해 보시려면 클릭Video
실패 사례 2(캔버스 렌더링 영상)
나중에 캔버스를 사용하여 영상을 렌더링하는 방법, 즉 캔버스의 drawImage 방식을 통해 requestAnimationFrame 애니메이션과 결합하는 방법을 생각하게 되었습니다. , requestAnimationFrame 애니메이션 요약은 이전 청첩장 때 소개되기도 했습니다.
코드는 아래에 게시되어 있습니다
function VideoToCanvas(videoElement,fn) { if (!videoElement) { return; } var fn=fn||""; var canvas = document.createElement('canvas'); canvas.width = videoElement.offsetWidth; canvas.height = videoElement.offsetHeight; var 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); } function endedCallBack(){ cancelAnimationFrame(timer); fn && fn() } newVideo.addEventListener('play', function () { drawCanvas(); }, false); newVideo.addEventListener('pause', stopDrawing, false); newVideo.addEventListener('ended', endedCallBack, false); videoElement.parentNode.replaceChild(canvas, videoElement); 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; this.show = function () { canvas.style.display = "block"; } this.hide = function () { canvas.style.display = "none"; } }
show(), hide(), play(), Pause(), 주소 변경change(), 재생 전환 및 일시 정지 playPause()를 캡슐화합니다.
사용 방법은 다음과 같습니다.
var canvasvedio=new VideoToCanvas(document.getElementById("vidoid"),function(){
canvasvedio.hide();
$("#videoimg").show();});canvasvedio.play() ;
또한 콜백 함수도 있습니다. 즉, 캔버스 재생이 끝난 후 콜백 함수를 전달할 수 있습니다! 이 테스트 주소를 클릭해 보세요. 하지만 Android WeChat 및 일부 브라우저에서는 여전히 새 창이 팝업되어 매우 답답합니다! !
캔버스 그리기 비디오를 위한 기타 애플리케이션
캔버스 그리기 비디오를 위한 다른 애플리케이션이 많이 있습니다. 예를 들어 동기화된 흐린 배경, 비디오 스크린샷, 회색 비디오 등을 사용하여 비디오 재생을 만들 수 있습니다.
아주 좋은 특정 기사가 있습니다. 모두가 읽어 보시기 바랍니다: http://html5doctor.com/video-canvas-magic/
하지만 이것은 PC 버전에서만 가능하며 다음이 있습니다. 모바일 버전에는 여전히 문제가 있습니다! ! ! !
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
공과 마우스 사이의 상호 작용을 구현하기 위해 캔버스를 사용하는 방법
위 내용은 모바일 비디오 재생 문제 사례 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!