javascript مشغل مجموعة videoElement.currentTime في هولو لاعب الفيديو لا يعمل، وكسر لاعب




مشغل html (3)

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

document.getElementsByTagName("video")[1].play(); // works fine
document.getElementsByTagName("video")[1].pause(); // works fine
document.getElementsByTagName("video")[1].muted = true; // works fine
document.getElementsByTagName("video")[1].muted = false; // works fine

ولكن بمجرد محاولة القفز إلى نقطة معينة في الفيديو عن طريق القيام بشيء من هذا القبيل:

document.getElementsByTagName("video")[1].currentTime = 500; // doesn't work

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

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

أيه أفكار؟


حسنا أنا ملتوية حولها مع ذلك لبعض الوقت لنرى كيف يمكنني إعادة إنتاج الحدث انقر على لاعب وجاء مع الحل التالي:

handleViewer = function(){
    var thumbnailMarker = $('.thumbnail-marker'),
        progressBarTotal = thumbnailMarker.parent(),
        controlsBar = $('.controls-bar'),
        videoPlayer = $('#content-video-player');

    var init = function(){
            thumbnailMarker = $('.thumbnail-marker');
            progressBarTotal = thumbnailMarker.parent();
            controlsBar = $('.controls-bar');
            videoPlayer = $('#content-video-player');
    },
    check = function(){
        if(!thumbnailMarker || !thumbnailMarker.length){
            init();
        }
    },
    show = function(){
            thumbnailMarker.show();
            progressBarTotal.show();
            controlsBar.show();
    },
    hide = function(){
        controlsBar.hide();
    },
    getProgressBarWidth = function(){
        return progressBarTotal[0].offsetWidth;
    };

    return {
        goToTime: function(time){
            var seekPercentage, 
            duration;
            check();
            duration = videoPlayer[0].duration;
            if(time > 0 && time < duration){
                seekPercentage = time/duration;
                this.jumpToPercentage(seekPercentage);
            }

        },
        jumpToPercentage: function(percentage){
            check();
            if(percentage >= 1 && percentage <= 100){
                percentage = percentage/100;
            }
            if(percentage >= 0 && percentage < 1){
                show();
                thumbnailMarker[0].style.left = (getProgressBarWidth()*percentage)+"px";
                thumbnailMarker[0].click();
                hide();
            }
        }
    }
}();

بعد تهيئة هذا الرمز، يمكنك إجراء ما يلي:

handleViewer.goToTime(500);

بدلا من ذلك

handleViewer.jumpToPercentage(50);

لقد اختبرت هذا في الكروم على ماك بوك برو. اسمحوا لي أن أعرف إذا واجهت أي مشاكل.


يجب أن يكون الفيديو جاهزا للتشغيل قبل تعيين الوقت الحالي.

حاول إضافة هذا الخط قبل تعيين كيرنتيم؟

document.getElementsByTagName("video")[1].play(); document.getElementsByTagName("video")[1].currentTime = 500;


بدلا من محاولة العثور على جافا سكريبت مسؤولة عن تغيير الوقت، لماذا لا تحاول محاكاة الأحداث المستخدم التي تسبب الوقت للتغيير؟

معرفة التسلسل الدقيق للأحداث الماوس التي تؤدي إلى تغيير الوقت. هذا ربما يكون بعض مزيج من تمرير الماوس، مسدون، الماوس، وانقر فوق.

ثم إعادة تلك الأحداث صناعيا وإرسالها إلى العناصر المناسبة.

هذا هو النهج الذي اتخذته ملحقات مثل ستريم مفاتيح و فيميوم .





html5-video