มีวิธีสร้างวิดีโอ HTML5 แบบเต็มหน้าจอหรือไม่

มีวิธีการเล่นวิดีโอเต็มหน้าจอโดยใช้<video>แท็กHTML5 หรือไม่

และถ้าเป็นไปไม่ได้ใครจะรู้ว่ามีเหตุผลสำหรับการตัดสินใจนี้หรือไม่?

HTML 5 ไม่มีวิธีในการสร้างวิดีโอแบบเต็มหน้าจอ แต่สเปคแบบเต็มหน้าจอแบบคู่ขนานนั้นให้requestFullScreenวิธีการที่อนุญาตให้มีองค์ประกอบแบบสุ่ม (รวมถึง<video>องค์ประกอบ) แบบเต็มหน้าจอ

มีการสนับสนุนการทดลองในเบราว์เซอร์จำนวนหนึ่ง

คำตอบเดิม:

จากสเป็ค HTML5 (ขณะที่เขียน: มิถุนายน '09):

ตัวแทนผู้ใช้ไม่ควรให้ API สาธารณะเพื่อให้วิดีโอแสดงเต็มหน้าจอ สคริปต์ที่รวมเข้ากับไฟล์วิดีโอที่สร้างขึ้นมาอย่างพิถีพิถันอาจหลอกให้ผู้ใช้คิดว่ามีการแสดงข้อความโต้ตอบของระบบและแสดงรหัสผ่านให้กับผู้ใช้ นอกจากนี้ยังมีอันตรายของการ "น่ารำคาญ" เพียงอย่างเดียวด้วยหน้าเว็บที่เปิดวิดีโอแบบเต็มหน้าจอเมื่อมีการคลิกลิงก์หรือการนำทางหน้าเว็บ แต่อาจมีการจัดเตรียมคุณลักษณะส่วนติดต่อผู้ใช้ของตัวแทนผู้ใช้เพื่อให้ผู้ใช้ได้รับโหมดการเล่นเต็มหน้าจอ

เบราว์เซอร์อาจมีส่วนต่อประสานกับผู้ใช้ แต่ไม่ควรให้ส่วนต่อประสานที่ตั้งโปรแกรมได้

โปรดทราบว่าคำเตือนข้างต้นได้ถูกลบออกจากข้อกำหนด

คำตอบส่วนใหญ่ที่นี่ล้าสมัย

ตอนนี้เป็นไปได้ที่จะนำองค์ประกอบใด ๆ มาสู่แบบเต็มหน้าจอโดยใช้Fullscreen APIแม้ว่ามันจะค่อนข้างยุ่งเพราะคุณไม่สามารถโทรdiv.requestFullScreen()ในทุกเบราว์เซอร์ได้ แต่ต้องใช้วิธีนำหน้าเบราว์เซอร์เฉพาะ

ฉันได้สร้าง wrapper screenfull.jsง่าย ๆที่ทำให้การใช้ Fullscreen API ง่ายขึ้น

การสนับสนุนเบราว์เซอร์ปัจจุบันคือ:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

โปรดทราบว่าเบราว์เซอร์มือถือจำนวนมากดูเหมือนจะไม่สนับสนุนตัวเลือกแบบเต็มหน้าจอเลย

ซาฟารีwebkitEnterFullscreenสนับสนุนผ่าน

Chromeควรสนับสนุนเนื่องจากเป็น WebKit เช่นกัน แต่มีข้อผิดพลาดเกิดขึ้น

Chris Blizzard ของFirefoxกล่าวว่าพวกเขากำลังออกมาพร้อมกับเวอร์ชันเต็มหน้าจอของพวกเขาเองซึ่งจะอนุญาตให้องค์ประกอบใด ๆ ไปที่เต็มหน้าจอ เช่นผ้าใบ

Philip Jagenstedt จากOperaกล่าวว่าพวกเขาจะสนับสนุนในรุ่นถัดไป

ใช่สเป็ควิดีโอ HTML5 บอกว่าไม่รองรับการแสดงเต็มหน้าจอ แต่เนื่องจากผู้ใช้ต้องการและทุกเบราว์เซอร์จะสนับสนุนสเปคจะเปลี่ยน

webkitEnterFullScreen();

สิ่งนี้จำเป็นต้องเรียกใช้ในองค์ประกอบแท็กวิดีโอตัวอย่างเช่นในการใช้งานเต็มหน้าจอแท็กวิดีโอแรกของการใช้หน้าเว็บ:

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

คำเตือน: นี่เป็นคำตอบที่ล้าสมัยและไม่เกี่ยวข้องอีกต่อไป

เว็บเบราว์เซอร์ที่ทันสมัยหลายแห่งมีการใช้ FullScreen 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();
}

การอ้างอิง: - 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

ฉันคิดว่าถ้าเราต้องการมีวิธีเปิดดูวิดีโอในเบราว์เซอร์ของเราโดยไม่ต้องปิดปลั๊กอิน (และความปลอดภัยทั้งหมดที่มาพร้อมกับประวัติของปลั๊กอินแฟลช ... ) แท็กต้องหาวิธีเปิดใช้งานเต็มหน้าจอ .. เราสามารถจัดการได้เหมือนที่ทำกับแฟลช: เมื่อต้องการทำแบบเต็มหน้าจอจะต้องเปิดใช้งานด้วยการคลิกซ้ายด้วยเมาส์และไม่มีอะไรอื่นฉันหมายความว่า ActionScript ไม่สามารถเปิดใช้งานได้ เต็มหน้าจอเมื่อโหลดแฟลชตามตัวอย่าง

ฉันหวังว่าฉันชัดเจนพอ: หลังจากทั้งหมดฉันเป็นแค่นักเรียนไอทีชาวฝรั่งเศสเท่านั้นไม่ใช่กวีชาวอังกฤษ :)

แล้วเจอกัน!

จาก 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;
}

วิธีที่สามารถตั้งโปรแกรมได้แบบเต็มหน้าจอกำลังทำงานทั้งใน Firefox และ Chrome (ในเวอร์ชันล่าสุด) ข่าวดีก็คือว่าข้อมูลจำเพาะได้รับการร่างที่นี่:

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

คุณยังจะต้องจัดการกับคำนำหน้าของผู้จัดจำหน่ายในตอนนี้ แต่รายละเอียดการใช้งานทั้งหมดจะถูกติดตามในไซต์ MDN:

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

คุณสามารถเปลี่ยนความกว้างและความสูงเป็น 100% ได้ แต่จะไม่ครอบคลุมเบราว์เซอร์ chrome หรือเชลล์ OS

การออกแบบเป็นเพราะ HTML อาศัยอยู่ในหน้าต่างเบราว์เซอร์ ปลั๊กอินแฟลชไม่ได้อยู่ในหน้าต่างเพื่อให้สามารถเล่นได้เต็มหน้าจอ

สิ่งนี้สมเหตุสมผลมิฉะนั้นคุณสามารถสร้างแท็ก img ที่ครอบคลุมเชลล์หรือสร้างแท็ก h1 ดังนั้นทั้งหน้าจอจึงเป็นตัวอักษร

ไม่มันเป็นไปไม่ได้ที่จะมีวิดีโอแบบเต็มหน้าจอใน html 5 หากคุณต้องการทราบเหตุผลคุณโชคดีเพราะการต่อสู้เพื่อต่อสู้แบบเต็มหน้าจอในขณะนี้ ดูรายชื่อผู้รับจดหมาย WHATWGและค้นหาคำว่า "วิดีโอ" ฉันหวังว่าพวกเขาจะให้ API แบบเต็มหน้าจอใน HTML 5

Firefox 3.6 มีตัวเลือกเต็มหน้าจอสำหรับวิดีโอ HTML5 คลิกขวาที่วิดีโอและเลือก 'เต็มหน้าจอ'

Webkit nightlies ล่าสุดยังรองรับวิดีโอ HTML5 แบบเต็มหน้าจอลองเล่น Sublimeพร้อมกับค้างคืนล่าสุดและกด Cmd / Ctrl ค้างไว้ในขณะที่เลือกตัวเลือกเต็มหน้าจอ

ฉันเดาว่า Chrome / Opera จะสนับสนุนบางอย่างเช่นนี้ หวังว่า IE9 จะรองรับวิดีโอ HTML5 แบบเต็มหน้าจอ

นี้ได้รับการสนับสนุนใน WebKit ผ่านwebkitEnterFullscreen

ทางเลือกอื่นที่จะต้องใช้เบราว์เซอร์ก็คือให้ตัวเลือกนี้ในเมนูตามบริบท ไม่จำเป็นต้องมี Javascript ให้ทำเช่นนี้แม้ว่าฉันจะเห็นว่ามันจะมีประโยชน์เมื่อใด

ในขณะเดียวกันทางเลือกอื่นก็คือการขยายหน้าต่างให้ใหญ่ที่สุด (Javascript สามารถกำหนดขนาดหน้าจอ) จากนั้นขยายวิดีโอให้ใหญ่ที่สุด ลองใช้ดูและดูว่าผลลัพธ์เป็นที่ยอมรับของผู้ใช้ของคุณหรือไม่

วิดีโอ HTML 5 จะแสดงเต็มหน้าจอในงานสร้างซาฟารีทุกคืน แต่ฉันไม่แน่ใจว่าจะใช้เทคนิคได้อย่างไร

ทางออกที่สมบูรณ์:

    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();
                    }
            }
    }

ถ้าคุณมีตัวเลือกในการกำหนดเว็บไซต์ของคุณเป็นความก้าวหน้า Web App (กปภ.) แล้วยังมีตัวเลือกที่จะใช้display: "fullscreen"ภายใต้manifest.json แต่จะใช้งานได้ก็ต่อเมื่อผู้ใช้เพิ่ม / ติดตั้ง webapp ของคุณในหน้าจอหลักและเปิดขึ้นมาจากที่นั่น

ใช่. สิ่งที่เกิดขึ้นกับวิดีโอ HTML5 คือคุณเพิ่งใส่<video>แท็กและเบราว์เซอร์จะให้ UI เป็นของตัวเองและทำให้ความสามารถในการดูแบบเต็มหน้าจอ มันทำให้ชีวิตผู้ใช้เราดีขึ้นมากโดยที่ไม่ต้องเห็น "ศิลปะ" นักพัฒนาบางคนที่เล่นด้วย Flash สามารถสร้าง :) มันยังเพิ่มความสอดคล้องกับแพลตฟอร์มซึ่งเป็นสิ่งที่ดี

ง่ายปัญหาทั้งหมดสามารถแก้ไขได้เช่นนี้

1) มีการหลบหนีมักจะนำคุณออกจากโหมดเต็มหน้าจอ (ซึ่งจะไม่นำไปใช้กับการป้อนเต็มหน้าจอผ่าน f11 ด้วยตนเอง)

2) แสดงแบนเนอร์ขนาดเล็กเป็นการชั่วคราวว่ามีการป้อนโหมดวิดีโอแบบเต็มหน้าจอ (โดยเบราว์เซอร์)

3) บล็อกการกระทำแบบเต็มหน้าจอตามค่าเริ่มต้นเช่นเดียวกับที่เคยทำกับป๊อปอัปและฐานข้อมูลท้องถิ่นใน html5 และตำแหน่ง api และอื่น ๆ เป็นต้น

ฉันไม่เห็นปัญหาใด ๆ กับการออกแบบนี้ ใครคิดว่าฉันคิดถึงอะไร

ในฐานะที่เป็นของ Chrome 11.0.686.0 dev ช่องทาง Chrome ตอนนี้มีวิดีโอแบบเต็มหน้าจอ

คุณสามารถทำได้หากคุณบอกผู้ใช้ให้กด F11 (แบบเต็มหน้าจอสำหรับเบราว์เซอร์จำนวนมาก) และใส่วิดีโอลงบนเนื้อหาทั้งหมดของหน้า

หากไม่มีคำตอบเหล่านี้ไม่ทำงาน (เพราะพวกเขาไม่ได้ทำเพื่อฉัน) คุณสามารถตั้งค่าวิดีโอสองรายการ ขนาดหนึ่งสำหรับขนาดปกติและอีกขนาดหนึ่งสำหรับขนาดเต็มหน้าจอ เมื่อคุณต้องการเปลี่ยนเป็นหน้าจอเต็ม

1. ใช้ javascript เพื่อตั้งค่าแอตทริบิวต์ 'src' ของวิดีโอแบบเต็มหน้าจอให้เป็นแอตทริบิวต์ 'src' ของวิดีโอขนาดเล็ก
2. ตั้งค่า video.currentTime บนวิดีโอแบบเต็มหน้าจอให้เหมือนกับวิดีโอขนาดเล็ก
3. ใช้ css 'display: none' เพื่อซ่อนวิดีโอขนาดเล็กและแสดงวิดีโอขนาดใหญ่โดยใช้ 'ตำแหน่ง: absolute' และ 'z-index: 1000' หรืออะไรบางอย่างที่สูงมาก