تحميل - هل هناك طريقة لجعل فيديو HTML5 بملء الشاشة؟




video html youtube (14)

هل هناك طريقة لتشغيل الفيديو بملء الشاشة باستخدام علامة HTML5 <video> ؟

وإذا كان هذا غير ممكن ، فهل يعرف أحد ما إذا كان هناك سبب لهذا القرار؟


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

آمل أن تكوني واضحة بما فيه الكفاية: بعد كل شيء ، أنا طالب فرنسي في مجال تكنولوجيا المعلومات فقط ، وليس شاعرًا إنكليزيًا :)

اراك لاحقا!


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

  1. استخدم javascript لتعيين سمة "src" للفيديو بملء الشاشة إلى سمة src "مقاطع الفيديو الأصغر"
  2. عيّن video.currentTime على فيديو ملء الشاشة ليكون هو نفس الفيديو الصغير.
  3. استخدم css "display: none" لإخفاء الفيديو الصغير وعرض الشاشة الكبيرة عبر "position: absolute" و "z-index: 1000" أو أي شيء مرتفع حقًا.

انها بسيطة ، يمكن حل جميع المشاكل مثل هذا ،

1) يمكنك الهروب دائمًا من وضع ملء الشاشة (لا ينطبق ذلك على إدخال وضع ملء الشاشة يدويًا عبر f11)

2) عرض إعلان بانر صغير مؤقتًا يتم إدخال وضع الفيديو بملء الشاشة (بواسطة المتصفح)

3) حظر عرض ملء الشاشة بشكل افتراضي ، تمامًا كما تم إجراؤه للنوافذ المنبثقة وقاعدة البيانات المحلية في html5 و api للموقع وما إلى ذلك ، إلخ.

لا أرى أي مشاكل مع هذا التصميم. أي شخص أعتقد أنني اشتقت إلى أي شيء؟


بدءًا من قناة Chrome 11.0.686.0 dev ، أصبح لدى Chrome الآن فيديو بملء الشاشة.


قد يكون الحل البديل هو توفير المتصفح ببساطة لهذا الخيار في القائمة السياقية. لا حاجة لوجود جافا سكريبت للقيام بذلك ، على الرغم من أنني أستطيع أن أرى متى سيكون ذلك مفيدًا.

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


لا ، ليس من الممكن الحصول على فيديو بملء الشاشة في html 5. إذا كنت تريد معرفة الأسباب ، فأنت محظوظ لأن المعركة الحاسمة من أجل ملء الشاشة يتم خوضها الآن. انظر قائمة بريد WHATWG وابحث عن كلمة "فيديو". أنا شخصياً أتمنى أن يقوموا بتوفير واجهة برمجة تطبيقات كاملة الشاشة في HTML 5.


لدى Firefox 3.6 خيار ملء الشاشة لمقاطع الفيديو بتنسيق HTML5 ، انقر بزر الماوس الأيمن على الفيديو وحدد "ملء الشاشة".

كما تدعم أحدث نايتات Webkit فيديو HTML5 بملء الشاشة ، جرب لاعب Sublime مع آخر ليلة مع الاستمرار Cmd / Ctrl أثناء تحديد خيار ملء الشاشة.

أعتقد أن Chrome / Opera سيدعم أيضًا شيئًا كهذا. نأمل أن IE9 يدعم أيضا الفيديو HTML5 ملء الشاشة.


معظم الإجابات هنا عفا عليها الزمن.

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

لقد قمت بإنشاء غلاف برنامج screenfull.js بسيط يسهل عليك استخدام واجهة برمجة تطبيقات Fullscreen.

دعم المتصفح الحالي هو:

  • Chrome 15+
  • Firefox 10+
  • سفاري 5.1+

لاحظ أن العديد من متصفحات الجوال لا تدعم خيار ملء الشاشة حتى الآن .


نعم فعلا. حسنًا ، ما يحدث مع فيديو HTML5 هو أنك وضعت علامة <video> وسيعطي المتصفح واجهة المستخدم الخاصة به ، وبالتالي القدرة على مشاهدة الشاشة بالكامل. حقا يجعل الحياة أفضل بكثير بالنسبة لنا المستخدمين ليس لديهم لرؤية "الفن" بعض المطور اللعب مع فلاش يمكن أن تجعل :) كما يضيف الاتساق إلى النظام الأساسي ، وهو أمر لطيف.


نفذت العديد من متصفحات الويب الحديثة واجهة برمجة تطبيقات FullScreen التي تسمح لك بالتركيز على كامل الشاشة لعناصر HTML معينة. هذا شيء عظيم حقًا لعرض الوسائط التفاعلية مثل مقاطع الفيديو في بيئة غامرة تمامًا.

للحصول على زر ملء الشاشة تحتاج إلى إعداد وحدة إصغاء حدث آخر استدعاء الدالة requestFullScreen() عند النقر فوق الزر. للتأكد من أن هذا سيعمل عبر جميع المتصفحات المدعومة ، ستحتاج أيضًا إلى التحقق لمعرفة ما إذا كان requestFullScreen() متوفراً requestFullScreen() إلى الإصدارات السابقة mozRequestFullScreen ( mozRequestFullScreen و webkitRequestFullscreen ) إذا لم يكن كذلك.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

المرجع: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode المرجع: - http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos


يعمل مقطع فيديو HTML 5 على وضع ملء الشاشة في أحدث إصدار من Safari كل ليلة ، على الرغم من أنني لست متأكدًا من كيفية إنجازه تقنيًا.


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


سفاري يدعم ذلك من خلال webkitEnterFullscreen .

يجب أن يدعمه Chrome نظرًا لأنه WebKit أيضًا ، ولكن الأخطاء.

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

يقول Philip Jagenstedt من Opera إنه سيدعمه في إصدار لاحق.

نعم ، تشير مواصفات فيديو HTML5 إلى عدم دعم وضع ملء الشاشة ، ولكن نظرًا لأن المستخدمين يريدون ذلك ، وسيعمل كل متصفح على دعمه ، ستتغير المواصفات.


webkitEnterFullScreen();

يجب استدعاء عنصر علامة الفيديو ، على سبيل المثال ، لعرض علامة الفيديو الأولى على استخدام الصفحة:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

إشعار: هذه إجابة قديمة ولم تعد ذات صلة.





fullscreen