कैनवास पर एचटीएमएल 5 वीडियो बनाएं - Google क्रोम क्रैश, ओ स्नैप

मैंने एमपी 4 फ़ाइल स्रोत के साथ एक वीडियो एचटीएमएल 5 खींचा, सीएसएस स्टाइल और सबकुछ सुधारने के लिए, मैंने वीडियो की फ्रेम छवि को 20ms अंतराल में कैनवास पर फिर से खींचा है जैसे कि कई जावास्क्रिप्ट डेवलपर करता है,

Example on w3schools: The Last Drawing Example

यदि आप इसे IE10 या फ़ायरफ़ॉक्स पर प्रदर्शित करते हैं तो यह सब कुछ ठीक दिखाएगा, लेकिन जब मैं इसे क्रोम पर प्रदर्शित करता हूं (मेरा नवीनतम संस्करण 31 है) कुछ समय बाद यह दुर्घटनाग्रस्त हो जाएगा (बहुत स्नैप!)

कोई विचार है कि इसका कोई समाधान क्यों है या नहीं?

0

1 उत्तर

इसके बजाय requestAnimationFrame (rAF) का उपयोग करें। 20ms कोई समझ नहीं आता है। अधिकांश वीडियो यूएस (एनटीएससी सिस्टम) में 30 एफपीएस और यूरोप में 25 एफपीएस (पीएएल सिस्टम) पर चलता है। यह क्रमश: 33.3ms और 40ms होगा।

ऐसा कहा जा रहा है कि आरएएफ 60 एफपीएस (या मॉनिटर रीफ्रेश दर 60 हर्ट्ज तक) पर दौड़ने की कोशिश करेगा ताकि हम टॉगल स्विच का उपयोग कर फ्रेम दर को कम कर सकें।

किसी भी मामले में आरएएफ ड्राइंग को मॉनिटर में सिंक करने में सक्षम करेगा ताकि किसी भी मामले में यह setInterval / setTimeout से बेहतर मामलों में बेहतर विकल्प होगा।

आपको दुर्घटना होने का कारण शायद स्थान लेने के कारण है (लेकिन यह सिस्टम से संबंधित भी हो सकता है)।

डेमो

var toggle = true;

function loop() {

    toggle = !toggle;
    if (toggle) {
        if (!v.paused) requestAnimationFrame(loop);
        return;
    }

    /// draw video frame every 1/30 frame
    ctx.drawImage(v, 0, 0);

    /// loop if video is playing
    if (!v.paused) requestAnimationFrame(loop);
}

फिर उस उदाहरण के इस सरलीकृत संस्करण का उपयोग करें:

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');

v.addEventListener('play', loop ,false);
2
जोड़ा