사이트 배경으로 비디오? HTML 5
전체 화면 (배경)으로 자동 확장되는 이미지 대신 비디오를 배경으로 사용하고 싶습니다.
또한 비디오와 이미지를 회전하고 싶습니다. 임의의 비디오 / 이미지가 임의의 순서로 표시되도록합니다.
또한 사이트가로드 된 후 30 초만에 동영상이 재생되도록 동영상 재생을 지연하는 방법을 아는 것도 좋습니다.
고마워!
내 jquery videoBG 플러그인 살펴보기
http://syddev.com/jquery.videoBG/
HTML5 비디오를 사이트 배경으로 만들기 ... html5를 지원하지 않는 브라우저에 대한 대체 이미지가 있습니다.
사용하기 정말 쉽습니다
도움이 필요하면 알려주세요.
먼저 HTML 마크 업은 다음과 같습니다.
<video id="awesome_video" src="first_video.mp4" autoplay />
둘째, JavaScript 코드는 다음과 같습니다.
<script type="text/javascript">
var index = 1,
playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
video = document.getElementById('awesome_video');
video.addEventListener('ended', rotate_video, false);
function rotate_video() {
video.setAttribute('src', playlist[index]);
video.load();
index++;
if (index >= playlist.length) { index = 0; }
}
</script>
마지막으로, CSS :
#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
그러면 페이지에 첫 번째 동영상 재생을 즉시 시작하는 동영상 요소가 생성 된 다음 자바 스크립트 변수로 정의 된 재생 목록을 반복합니다. CSS를 사용한 마일리지는 나머지 사이트의 CSS에 따라 다를 수 있지만 100 % 너비 / 높이는 기본 페이지에서 수행해야합니다.
브라우저 너비 또는 높이로 확장 된 배경으로 비디오에 대한 솔루션이있을 수 있지만 비디오는 여전히 종횡비를 유지하며 아직 솔루션을 찾을 수 없습니다.
본문 태그 바로 뒤에 style="width:100%;". 바로 뒤에 "bodydummy"태그를 넣으십시오.
<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
<source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
<source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
<source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>
</video>
<img id="bgImg" src="videos/poster.png" />
<!-- This image stretches exactly to the browser width/height and lies behind the video-->
<div id="bodyDummy">
모든 콘텐츠를 bodydummy-div 안에 넣고 다음과 같이 CSS에 Z- 색인을 올바르게 입력합니다.
#bgImg{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#bgVideo{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 2;
width: 100%;
height: 100%;
}
#bodyDummy{
position: absolute;
top: 0;
left: 0;
z-index: 3;
overflow: auto;
width: 100%;
height: 100%;
}
Hope I could help. Let me know when you could find a solution that the video does not maintain the aspect ratio, so it could fill the whole browser window so we do not have to put a bgimage.
ReferenceURL : https://stackoverflow.com/questions/3800813/video-as-site-background-html-5
'programing' 카테고리의 다른 글
| 이 Perl 정규식에서`\ s +`가`\ s \ s *`보다 훨씬 빠른 이유는 무엇입니까? (0) | 2020.12.31 |
|---|---|
| 변수가 두 값 중 하나와 같은지 테스트 (0) | 2020.12.31 |
| 이 두 파이썬 shebangs의 차이점은 무엇입니까 (0) | 2020.12.31 |
| Mac OS X에서 마우스 가속 비활성화 (0) | 2020.12.31 |
| 통화 기호없이 통화 서식 지정 (0) | 2020.12.30 |