Làm thế nào để tạo một video toàn màn hình khi nó được đặt bên trong khung nội tuyến?

Tôi đang sử dụng các thiết lập mặc định cho máy nghe nhạc mediaelement.js của tôi, và khởi tạo của tôi là rất cơ bản: $('video').mediaelementplayer();Làm thế nào để tạo một video toàn màn hình khi nó được đặt bên trong khung nội tuyến?

Câu hỏi của tôi là: Có thể toàn màn hình máy nghe nhạc khi video được nhúng vào trong một khung nội tuyến? Khi tôi nhấn toàn màn hình, video sẽ tối đa hóa iframe nhưng không hiển thị toàn bộ màn hình. Đây có phải là giới hạn của html hoặc có cách nào để vượt qua nó không?

Cấu trúc chung như sau:

<!DOCTYPE html> 
<html> 
    <head /> 
    <body> 
    <iframe> 
     <!DOCTYPE html> 
     <html> 
     <head /> 
     <body> 
      *My Video Here <video> ...* 
     <body> 
     </html> 
    </iframe> 
    </body> 
</html>

Cảm ơn!

EDIT: Có vẻ như đây là trình phát cụ thể. Triển khai html5 <video> mặc định tối đa hóa thành toàn màn hình, ngay cả trong iframe.

Nguồn

2013-03-07 Jazon

Tại sao bạn sử dụng iframe? Đó là 2013 ... – BenM

Một phần của việc đóng góp mã của người khác ... – Jazon

stumbled khi qua này tại Video.js:

video.js inside a modal window: full screen not working

Và câu trả lời là để thêm những thuộc tính này để iframe: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (không hỗ trợ trình duyệt IE mặc dù)

Nguồn

2013-03-08 14:44:52 Jazon

Tôi yêu các giải pháp đơn giản. –

làm việc cho tôi. Cảm ơn. –

Cảm ơn rất nhiều, đó là những gì tôi đang tìm kiếm – LiborV

Đây là giải pháp "hack" giúp trang của bạn tải nhanh hơn.

1) Tạo hình ảnh (thường là ảnh chụp màn hình của video) thay cho iFrame.

2) Liên kết trình xử lý sự kiện nhấp vào hình ảnh để tạo iFrame cho thứ nguyên bạn yêu cầu. (Bạn có thể căn cứ các kích thước đó trên kích thước cửa sổ của máy khách).

Nguồn

2013-03-07 16:53:05

Ý tưởng thú vị. Tôi đã tìm kiếm nhiều hơn một cách trực tiếp để làm điều đó mặc dù, giống như cách html5

tôi sử dụng bit này của mã để theo dõi xem video có đi vào/ra khỏi chế độ toàn màn hình hay không:

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen; 
MediaElementPlayer.prototype.enterFullScreen = function() { 
    // Your code here 
    this.enterFullScreen_org(); 
} 
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen; 
MediaElementPlayer.prototype.exitFullScreen = function() { 
    // Your code here 
    this.exitFullScreen_org(); 
}

Tôi cho rằng bạn có thể gọi hàm này trên trang cha để phóng to khung nội tuyến?

Nguồn

2013-04-12 21:58:34

Điều này có liên quan ngay cả sau tất cả các năm này.Đối với những người đặt câu hỏi về bộ khung, triển khai LMS (Hệ thống quản lý học tập) vẫn sử dụng bộ khung để khởi chạy các khóa học SCORM. CSOD (Cornerstone OnDemand), đang nhìn bạn! Cảm ơn @Ab_c điều này đã làm việc tốt cho tôi. – Shiyaz

Khách hàng của tôi đã hài lòng với chiều rộng của video giới hạn 'toàn màn hình' - đó chỉ là các thanh màu đen ở trên và dưới mà tôi phải loại bỏ. (trong trường hợp của tôi kích thước của iFrame là 945 × 1500).

Điều này, tôi có thể khắc phục hoàn toàn bằng một chút CSS.

.mejs-container-fullscreen { 
    background-color: #fff !important; 
} 

.mejs-container-fullscreen .mejs-mediaelement, 
.mejs-container-fullscreen video { 
    height: 530px !important; 
    top: 500px !important; 
} 

.mejs-container.mejs-container-fullscreen .mejs-controls { 
    bottom: auto !important; 
    top: 1000px !important; /* video top + video height - controls height (30px) */ 
}

Phải thừa nhận rằng đây là giải pháp khá hạn chế và tùy thuộc vào kích thước video (và tính nhất quán về kích thước cho một số video) cũng như màu nền. Nhưng nó cũng có thể làm việc cho bạn.

Nguồn

2015-08-27 12:54:16 WoodrowShigeru

Làm thế nào để tạo một video toàn màn hình khi nó được đặt bên trong khung nội tuyến?

Trả lời

Các vấn đề liên quan