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

Question

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

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

Answer 1

وHTML 5 توفر أي وسيلة لجعل وضع ملء الشاشة الفيديو، ولكن الإمدادات و مواصفات ملء الشاشة طريقة requestFullScreen الذي يسمح لكافة عناصر التعسفي (بما في ذلك عناصر <video>) ليتم وضع ملء الشاشة.

دعم تجريبي في عدد من المتصفحات .

---

والجواب الأصل:

HTML5 المواصفات (وفي وقت كتابة هذا التقرير: يونيو '09):

<اقتباس فقرة>   

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

ويمكن أن توفر المتصفحات واجهة المستخدم، ولكن لا ينبغي أن توفر واحدة للبرمجة.

---

لاحظ أن التحذير أعلاه قد أزيلت منذ ابتداء من المواصفات.

Answer 2

معظم الإجابات هنا قديمة.

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

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

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

• كروم 15+
• فايرفوكس 10+
• سفاري 5.1+

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

Answer 3

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

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

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

فيليب جاجنستيدت الأوبرا يقولون أنهم سيدعمونه في إصدار لاحق.

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

Answer 4

webkitEnterFullScreen();

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

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

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

Answer 5

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

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

وانظر يا!

Answer 6

نفذت

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

لتحصل على زر ملء الشاشة العاملة التي تحتاج إلى إعداد المستمع حدث آخر من شأنها أن استدعاء الدالة requestFullScreen() عند النقر على زر. للتأكد من أن هذا العمل عبر جميع المتصفحات المدعومة كنت تسير أيضا في حاجة إلى تحقق لمعرفة ما إذا كان requestFullScreen() هو متاح ونظام الاستعاضة إلى البائع مسبوقة إصدارات (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();
}

والمرجعي: - الشبكي: //developer.mozilla كافيه / EN-US / مستندات / الانترنت / دليل / API / DOM / Using_full_screen_mode المرجع: - http://blog.teamtreehouse.com/building-custom- ضوابط مقابل HTML5 أشرطة الفيديو

Answer 7

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

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

لا يزال يتعين عليك التعامل مع بادئات البائعين في الوقت الحالي ولكن يتم تتبع جميع تفاصيل التنفيذ في موقع MDN:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Answer 8

ومن CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Answer 9

ويمكنك تغيير العرض والارتفاع لتكون 100٪، لكنها لن تغطي متصفح الكروم أو قذيفة OS.

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

وهذا الأمر يبدو معقولا، وإلا كنت قد جعل علامات IMG التي غطت قذيفة، أو جعل علامات H1 ذلك كانت الشاشة بأكملها بريد إلكتروني.

Answer 10

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

Answer 11

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

وأحدث nightlies بكت أيضا دعم كامل شاشة الفيديو HTML5، حاول سبحانه لاعب باستخدام أحدث يلا وعقد كمد / السيطرة في حين اختيار خيار ملء الشاشة.

وأعتقد سوف كروم / أوبرا نؤيد أيضا شيئا من هذا القبيل. نأمل IE9 سيدعم أيضا كامل شاشة الفيديو HTML5.

Answer 12

وهذا هو الدعم بكت عبر <لأ href = "http://developer.apple.com/safari/library/documentation/appleapplications/reference/WebKitDOMRef/HTMLVideoElement_idl/Classes/HTMLVideoElement/index.html" يختلط = "نوفولو noreferrer "> webkitEnterFullscreen .

Answer 13

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

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

Answer 14

وHTML 5 فيديو لا تذهب ملء الشاشة في بناء أحدث ليلا من سفاري، على الرغم من أنني لست متأكدا كيف يتم تحقيق ذلك من الناحية الفنية.

Answer 15

والحل الكامل:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Answer 16

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

Answer 17

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

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

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

و3) منع العمل ملء الشاشة بشكل افتراضي، تماما مثل وقد تم ذلك عن النوافذ المنبثقة وقاعدة البيانات المحلية في HTML5، والمكان المعهد وغيرها، وما إلى ذلك.

وأنا لا أرى أي مشاكل مع هذا التصميم. أي شخص يفكر فاتني شيء؟

Answer 18

واعتبارا من كروم 11.0.686.0 ديف قناة كروم لديها الآن فيديو ملء الشاشة.

Answer 19

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

Answer 20

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

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