HTML5 إطار عرض / إطار / البحث عن الإطار؟

Question

أنا أبحث عن طريقة لعرض HTML5 <video>, ، إطار جانب الإطار.

السيناريو: وجود مقطع فيديو ، مع زر إضافي يتخطى الإطار التالي عند الضغط عليه.

ما رأيك هو أفضل طريقة للقيام بذلك؟

1. قم بتشغيل الفيديو بشكل طبيعي ، استمع إلى timeUpdate الحدث ، الذي يتم استدعاؤه على Firefox لكل إطار, ، ثم توقف الفيديو. ومع ذلك ، فإن المتصفحات الأخرى لا تتصرف مثل Firefox.
2. غير ال currentTime العنصر يدويًا إلى +1/24 من الثانية ، حيث "24" هو معدل الإطار. ليس لدي أي فكرة عن كيفية Aquire FPS.
3. أي طريقة مفيدة أخرى يمكنك التفكير فيها.

---

تعديل

لقد وجدت هذه صفحة اختبار HTML5 مفيدة للغاية, ، الذي يتتبع قدرة جميع المتصفحات على تحقيق البحث الدقيق للإطار.

Answer 1

يبدو أن معظم المتصفحات تسمح بالنهج الثاني ، على الرغم من أنك ستحتاج إلى معرفة معدل الإطار. أوبرا ، ومع ذلك ، هو الاستثناء ، ويتطلب نهجا مشابها لنهجك الأول (النتيجة ليست مثالية). ها هو صفحة تجريبية توصلت إليها يستخدم الفيديو 29.97 إطار/s (معيار التلفزيون الأمريكي). لاحظ أنه لم يتم اختباره على نطاق واسع ، لذلك قد لا يعمل في IE 9 أو Firefox 4 أو الإصدارات المستقبلية من أي متصفح.

لغة البرمجة:

<p id="time"></p>
<video id="v0" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

javaScript (قم بتشغيل صفحة تحميل الصفحة ويستخدم jQuery 1.4.4 من أجل الإيجاز):

var vid = $('#v0')[0];

vid.onplay = vid.onclick = function() {
    vid.onplay = vid.onclick = null;

    setTimeout(function() {
        vid.pause();
        setInterval(function() {
            if($.browser.opera) {
                var oldHandler = vid.onplay;
                vid.onplay = function() {
                    vid.pause();
                    vid.onplay = oldHandler;
                };
                vid.play();
            } else {
                vid.currentTime += (1 / 29.97);
            }
        }, 2000);
    }, 12000);

    setInterval(function() {
        $('#time').html((vid.currentTime * 29.97).toPrecision(5));
    }, 100);
};

Answer 2

بعد أن كنت تقاتل هذه المشكلة ذاتها ، فإنني أتعامل مع طريقة القوة الغاشمة للعثور على معدل الإطارات. إدراك أن معدل الإطارات لن يمرر 60 إطارًا في الثانية التي أسعى إليها عبر الفيديو في الخطوات الثانية 1/60. مقارنة كل إطار بالآخر عن طريق وضع الفيديو على عنصر قماش ثم استخدام GetImagedata للحصول على بيانات البكسل. أقوم بذلك على مدار ثانية من الفيديو ، ثم عد إجمالي عدد الإطارات الفريدة للحصول على معدل الإطارات.

ليس عليك التحقق من كل بكسل واحد. أمسك بحوالي 2/3rds من الداخل من الفيديو ثم تحقق من كل بكسل 8 عبر وهبوط (اعتمادًا على الحجم). يمكنك إيقاف المقارنة فقط ببكسل واحد مختلف ، لذا فإن هذه الطريقة سريعة وموثوقة بشكل معقول ، لا تقارن بقول خاصية Framerate ، ولكن أفضل من التخمين.

Answer 3

أفضل شيء يمكنك القيام به على الأرجح حتى يتم تأكيد المعايير وتنفيذها (سيكون الأعمار!) هو التخمين في معدل الإطار والزيادة بحلول ذلك الوقت. ما لم تكن في بيئة خاضعة للرقابة ، فإنني أنصح بعدم الاعتماد بشدة على HTML5 ... بقدر ما أحب ميزاته ، لن يتم دعمه بشكل موثوق.