عنصر فيديو HTML5 على iPad لا يطلق النار على أحداث onclick أو touchstart؟

https://stackoverflow.com/questions/3803702

25-09-2019
|

سؤال

أحاول إرفاق بعض الأحداث بعنصر فيديو HTML5 داخل تطبيق الويب الخاص بـ iPad ولكن لا يبدو أنها تطلق النار؟ لقد اختبرت هذا على الجهاز وفي جهاز المحاكاة وأحصل على نفس النتائج. ومع ذلك ، تعمل الأحداث (على الأقل على الأقل) في Safari سطح المكتب. لقد حاولت أيضًا تبديل عنصر الفيديو لـ Div و Fire Fire بشكل جيد؟ هل صادف أي شخص آخر ولديه فكرة عن العمل؟

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <title>Test video swipe</title>
        </head>
        <body>

                <video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>

                <script>
                        var theVid = document.getElementById("currentlyPlaying");

                                theVid.addEventListener('touchstart', function(e){
                                        e.preventDefault();
                                        console.log("touchstart");
                                }, false);

                                theVid.addEventListener('click', function(e){
                                        e.preventDefault();
                                        console.log("click");
                                }, false);

                                theVid.addEventListener('touchmove', function(e){
                                        console.log("touchmove");
                                }, false);

                                theVid.addEventListener('touchend', function(e){
                                        console.log("touchend");
                                }, false);

                                theVid.addEventListener('touchcancel', function(e){
                                        console.log("touchcancel");
                                }, false);



                </script>
        </body>
</html>

المحلول

سيبتلع عنصر الفيديو ، على iPad ، الأحداث إذا كنت تستخدم سمة عناصر التحكم. يجب عليك توفير عناصر التحكم الخاصة بك إذا كنت تريد أن يستجيب العنصر لأحداث اللمس.

نصائح أخرى

من تجربتي المؤلمة إلى حد ما على مدار الأسبوعين الماضيين ، يمكنني أن أبدأ مثل هذه القائمة (على الأقل بالنسبة إلى iPad 3.2). قد يتم توثيق بعض هذه "الميزات" ، ولكن من الصعب العثور على الجملة ذات الصلة.

ال volume يتم تجاهل الخاصية (يمكنك تعيينها ، وسيظهر أنها تتغير ، لكن الصوت الفعلي على الجهاز لن يتأثر).
ال currentTime الخاصية هي القراءة فقط. الحل الخاص بي لهذا هو الاتصال load(), ، والذي يسمح لي على الأقل بإعادة التعيين إلى بداية المقطع.
ال onended لن ينشر الحدث بشكل موثوق ما لم تكن الضوابط مرئية. الحل الخاص بي لهذا هو مراقبة timeupdate الحدث ومقارنة currentTime إلى duration
كما تقول، autobuffer و autoplay يتم تعطيل.
لن يقوم الفيديو بتخزين ذاكرة التخزين المؤقت محليًا بغض النظر عن إعدادات ذاكرة التخزين المؤقت للتطبيق.
لا يبدو أن العديد من قواعد CSS تعمل كما هو متوقع عند تطبيقها على <video> علامة - على سبيل المثال. opacity و z-index كلاهما يبدو غير فعال ، مما يعني أنه لا يمكنك تخفيف أو إخفاء مقطع فيديو. يمكنك ضبط display:none, ، لكن هذا مفاجئ للغاية.

كما أقول ، ربما لا تكون هذه قائمة شاملة ، وأرحب بالإضافات أو التصحيحات.

(أيضا ، بعد كثيراً Googling ، لقد وجدت قائمة هنا من مجموعة فرعية ضئيلة من أساليب وخصائص البرنامج المساعد QT المدعوم على Safari المتنقلة).

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow