집 > 기사 > 웹 프론트엔드 > 모바일 비디오 재생 문제 사례 요약

모바일 비디오 재생 문제 사례 요약

php中世界最好的语言원래의: 2017-11-27 10:59:024067검색

아래에서 몇 가지 사례를 보여드리겠습니다. 이는 몇 가지 문제에 대한 예와 요약입니다. 캔버스를 사용하여 비디오를 그렸고 그 효과가 비디오를 직접 사용하는 것과 동일하다는 것을 알았기 때문에 참고하고 연구할 가치가 있습니다. 그래서 여전히 원본 영상 방법

<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(&#39;ended&#39;, function () {
        $("#vidoid").hide();
        $("#videoimg").show();
    })
});

을 사용했는데 브라우저에서는 여전히 문제가 없고 캔버스 그리기와 동일합니다! 블라인드 방식의 네이티브 영상 버전을 경험해 보시려면 클릭Video

실패 사례 2(캔버스 렌더링 영상)

나중에 캔버스를 사용하여 영상을 렌더링하는 방법, 즉 캔버스의 drawImage 방식을 통해 requestAnimationFrame 애니메이션과 결합하는 방법을 생각하게 되었습니다. , requestAnimationFrame 애니메이션 요약은 이전 청첩장 때 소개되기도 했습니다.

코드는 아래에 게시되어 있습니다

 function VideoToCanvas(videoElement,fn) {
        if (!videoElement) {
            return;
        }
        var fn=fn||"";
        var canvas = document.createElement(&#39;canvas&#39;);
        canvas.width = videoElement.offsetWidth;
        canvas.height = videoElement.offsetHeight;
        var ctx = canvas.getContext(&#39;2d&#39;);
        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(&#39;play&#39;, function () {
            drawCanvas();
        }, false);
        newVideo.addEventListener(&#39;pause&#39;, stopDrawing, false);
        newVideo.addEventListener(&#39;ended&#39;, 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!