하는 방법이 있을 HTML5video 전체 화면?
https://stackoverflow.com/questions/1055214
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
는 방법이 있 비디오를 재생하려면 전체화면을 사용하여 HTML5 <video> 태그?
과 이것이 가능하지 않은 경우,누군가를 알고 있는 경우 이유로 이 결정은?
해결책
HTML 5는 비디오를 전체 화면을 만들 수있는 방법을 제공하지 않지만 병렬 전체 화면 사양 공급 requestFullScreen 임의의 요소를 허용하는 방법 (포함 <video> 요소) 전체 화면을 만들어야합니다.
가지고 있습니다 다수의 브라우저에서의 실험 지원.
원래 답변 :
로부터 HTML5 사양 (글을 쓰는 시점 : 6 월 '09) :
사용자 에이전트는 공개 API를 제공하여 비디오를 전체 화면에 표시하도록합니다. 신중하게 제작 된 비디오 파일과 결합 된 스크립트는 사용자에게 시스템 모달 대화 상자가 표시되었다고 생각하고 사용자에게 암호를 자랑 할 수 있습니다. 링크를 클릭하거나 페이지를 탐색 할 때 페이지가 전체 화면 비디오를 시작하면 "단순한"성가심의 위험도 있습니다. 대신, 사용자가 전체 화면 재생 모드를 쉽게 얻을 수 있도록 사용자 에이전트 특정 인터페이스 기능이 제공 될 수 있습니다.
브라우저는 사용자 인터페이스를 제공 할 수 있지만 프로그래밍 가능한 인터페이스를 제공해서는 안됩니다.
위의 경고는 이후 사양에서 제거되었습니다.
다른 팁
답변의 대부분은 여기 있습니다.
그것이 지금은 가능한 가을 가지고 모든 요소를 전체 화면으로 사용 전체 화면 API, 지만,그것은 여전히 매우 혼잡 할 수 없기 때문에 그냥 전화 div.requestFullScreen() 모든 브라우저에서하지만,브라우저를 사용하는 특정 앞에는 방법이 있습니다.
내가 만들어 간단한 래퍼 screenfull.js 그것은 쉽게 사용하는 전체 화면 API 를 사용합니다.
현재 브라우저가 지원:
- 크롬 15+
- Firefox10+
- Safari5.1+
참고되는 많은 모바일 브라우저하지 않는 것을 지원 전체 화면 아직이 옵션.
원정 여행 그것을 지원합니다 webkitEnterFullscreen.
크롬 WebKit이기 때문에 지원해야하지만 오류가 발생합니다.
크리스 블리자드의 Firefox 그들은 모든 요소가 전체 화면으로 이동할 수 있도록 자체 버전의 전체 화면 버전을 제공한다고 말했다. 예를 들어 캔버스
필립 jagenstedt of 오페라 그들은 나중에 릴리스에서 그것을 지원할 것이라고 말합니다.
예, HTML5 비디오 사양은 전체 화면을 지원하지 않는다고 말하지만 사용자는 원하고 모든 브라우저가 지원하기 때문에 사양이 변경됩니다.
webkitEnterFullScreen();
예를 들어, 페이지 사용의 첫 번째 비디오 태그를 전체 화면을 위해 비디오 태그 요소에서 호출해야합니다.
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
통지 : 이것은 구식 답변이며 더 이상 관련이 없습니다.
내가 생각하는 경우에 우리는 열을 볼 수 있는 방법 동영상에서 우리의 브라우저없이 모든 비공개 소스 플러그인(고 모든 보안 침해와 함께 제공하는 역사의 플래시 플러그인을...).태그가 있는 방법을 찾아 활성화를 전체 화면..우리는 그것을 취급할 수 있었 같은 플래시지:하면,그것은 활성화에 의해 왼쪽 마우스로 클릭하고 아무 것도,내가 그것을 의미의 불가능에 의해 ActionScript 을 실행하면 로의 플래시한다.
I hope I've 충분히 명확:나만 프랑스어 그것을 학생하지 않는 영국 시인:)
보 Ya!
많은 최신 웹 브라우저는 특정 HTML 요소에 전체 화면 초점을 제공 할 수있는 전체 화면 API를 구현했습니다. 이것은 완전히 몰입 형 환경에서 비디오와 같은 대화 형 미디어를 표시하는 데 정말 좋습니다.
전체 화면 버튼을 작동 시키려면 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
풀 스크린을 수행하는 프로그래밍 가능한 방법은 이제 Firefox와 Chrome (최신 버전)에서 작동하고 있습니다. 좋은 소식은 사양이 초안 이었다는 것입니다.
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/overview.html
지금도 공급 업체 접두사를 다루어야하지만 모든 구현 세부 정보는 MDN 사이트에서 추적됩니다.
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;
}
너비와 높이를 100%로 변경할 수 있지만 브라우저 크롬 또는 OS 쉘을 덮지는 않습니다.
디자인 결정은 HTML이 브라우저 창 안에 살고 있기 때문입니다. 플래시 플러그인은 창 안에 없으므로 화면 전체로 이동할 수 있습니다.
그렇지 않으면 쉘을 덮는 IMG 태그를 만들거나 H1 태그를 만들 수 있으므로 전체 화면이 문자가되었습니다.
아니요, HTML 5에서 전체 화면 비디오를 가질 수는 없습니다. 이유를 알고 싶다면 전체 화면에 대한 논쟁이 지금 싸워서 운이 좋았습니다. 보다 Whatwg 메일 링리스트 "비디오"라는 단어를 찾으십시오. 나는 개인적으로 그들이 HTML 5에서 전체 화면 API를 제공하기를 바랍니다.
Firefox 3.6에는 HTML5 비디오에 대한 전체 화면 옵션이 있으며 비디오를 마우스 오른쪽 버튼으로 클릭하고 '전체 화면'을 선택하십시오.
최신 WebKit Nightlies는 전체 화면 HTML5 비디오를 지원합니다. 숭고한 선수 전체 화면 옵션을 선택하면서 최신 야간 및 CMD / CTRL을 보유하십시오.
Chrome / Opera도 이와 같은 것을 지원할 것이라고 생각합니다. IE9가 전체 화면 HTML5 비디오를 지원하기를 바랍니다.
이것은 WebKit Via에서 지원됩니다 WebKitenterfullscreen.
대체 솔루션은 브라우저를 문맥 메뉴에서 단순히이 옵션을 제공해야합니다. 이 작업을 수행하기 위해 JavaScript가 필요하지는 않지만 언제 유용할지 알 수 있습니다.
그 동안 대체 솔루션은 단순히 창을 최대화하는 것입니다 (JavaScript는 화면 치수를 제공 할 수 있음)와 그 안에 비디오를 최대화하는 것입니다. 그 결과 결과가 사용자가 수용 할 수 있는지 간단히 확인하십시오.
HTML 5 비디오는 최신 야간 Safari 빌드에서 전체 화면으로 이동하지만 기술적으로 어떻게 달성되는지 잘 모르겠습니다.
완전한 해결책 :
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();
}
}
}
예. HTML5 비디오에서 일어나는 일은 <video> 태그와 브라우저는 자체 UI를 제공하므로 전체 화면보기 기능을 제공합니다. 그것은 실제로 우리 사용자가 플래시를 가지고 노는 일부 개발자가 만들 수있는 "Art"를 볼 필요가 없도록 인생을 훨씬 더 좋게 만듭니다. 또한 플랫폼에 일관성을 더합니다.
간단합니다. 모든 문제는 다음과 같이 해결 될 수 있습니다.
1) 탈출을 항상 전체 화면 모드에서 벗어나게하십시오 (F11을 통해 전체 화면에 수동으로 입력하는 데 적용되지 않음)
2) 전체 화면 비디오 모드가 입력된다는 작은 배너를 일시적으로 표시합니다 (브라우저에서)
3) HTML5 및 Location API 등의 팝업 및 로컬 데이터베이스에 대해 수행 된 것처럼 기본적으로 전체 화면 작업을 차단하십시오.
이 디자인에 아무런 문제가 없습니다. 누구든지 내가 놓친 것 같아?
크롬 현재 11.0.686.0 데브 채널 Chrome에는 이제 전체 화면 비디오가 있습니다.
F11 (많은 브라우저의 전체 화면)을 누르라고 사용자에게 지시하고 비디오 전체에 비디오를 넣으면이 작업을 수행 할 수 있습니다.
이 답변 중 어느 것도 작동하지 않으면 (나에게는 그렇지 않은 것처럼) 두 개의 비디오를 설정할 수 있습니다. 하나는 일반 크기이고 다른 하나는 전체 화면 크기입니다. 전체 화면으로 전환하려면
- JavaScript를 사용하여 전체 화면 비디오의 'SRC'속성을 작은 비디오 'SRC'속성에 설정하십시오.
- FullScreen 비디오에서 video.currenttime을 작은 비디오와 동일하게 설정하십시오.
- CSS의 디스플레이 : 없음 ''작은 비디오를 숨기고 BIG를 VIA '위치'및 'z-index : 1000'또는 실제로 높은 비디오로 표시하십시오.
