HTML5 कैनवास drawImage साथ वीडियो स्रोत एंड्रॉयड

Question

पर काम नहीं कर मैं कैनवास के वीडियो स्रोत के साथ drawImage विधि का उपयोग करने की कोशिश कर रहा हूँ, लेकिन यह एंड्रॉयड 4.4.2 में काम नहीं कर रहा, क्रोम ब्राउज़र के साथ परीक्षण किया।

यहाँ मेरी कोड है:

$(function() { 

    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var video = document.getElementById('video'); 

    var videoWidth; 
    var videoHeight;  

    var paused = false; 

    canvas.addEventListener('click', function() { 
     if (paused) { 
      video.play(); 
     } else { 
      video.pause(); 
     } 
     paused = !paused; 
    }); 

    video.addEventListener("loadedmetadata", function() { 
     videoWidth = this.videoWidth || this.width; 
     videoHeight = this.videoHeight || this.height; 
     canvas.width = videoWidth; 
     canvas.height = videoHeight; 
    }, false); 

    video.addEventListener('play', function() { 
     var $this = this; // cache 
     (function loop() { 
      if (! $this.paused && ! $this.ended) { 
       drawImage($this); 
       requestAnimationFrame(loop); 
       // setTimeout(loop, 1000/25); // drawing at 25 fps 
      } 
     })(); 
    }, 0); 

    function drawImage(frame) { 
     ctx.drawImage(frame, 0, 0); 
     // ctx.clearRect (0 , 0 , canvas.width, canvas.height); 
    } 

}); 

फिडल:http://jsfiddle.net/h1hjp0Lp/

इसके साथ ही साथ Android और IOS उपकरणों से काम करता है बनाने के लिए एक तरीका है?

Answer 1

यह है कि विशिष्ट फ़ाइल स्वरूप (mp4) के साथ एक समस्या हो रहा है।

एक webm फ़ाइल स्थानापन्न करके और यह ठीक काम करता है।

दुर्भाग्यपूर्ण है, लेकिन यह थोड़ी देर के लिए <video> का तरीका रहा है (वास्तव में वेबएम/ओग की आवश्यकता है और केवल एमपी 4 की आवश्यकता नहीं है, चाहे ब्राउज़र किस प्रकार समर्थन करने का दावा करता हो)।

(? मैं अपनी एक बग विरोधी DRM स्क्रीनशॉट सामान से संबंधित कौन जानता है यकीन है) उदाहरण के लिए स्रोत http://video.webmfiles.org/big-buck-bunny_trailer.webm उपयोग करें और यह काम करेगा: http://jsfiddle.net/h1hjp0Lp/15/

Answer 2

मैं क्रोम 43.0.2357.93 चल रहा हूँ पर एंड्रॉइड 5.0.1, और drawImage mp4 या webm के लिए काम नहीं कर रहा है।

ऐसा लगता है कि Chrome को सही ढंग वीडियो टैग से फ्रेम डेटा पर कब्जा नहीं है। जब मैं getImageData फोन और जिसके परिणामस्वरूप imageData वस्तु का निरीक्षण किया, RGBA मान सभी एंड्रॉयड 5.0.1 के साथ 0.

Answer 3

की तैयारी में हैं HUAWEI GRA-TL00 के लिए, drawImagemp4 या webm लिए काम नहीं कर रहा है।

वीडियो बिटमैप crestejs का संदर्भ लें।

संबंधित लिंक:

1. Using Images

2. Can I use: Canvas?