HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.
- 高洛峰원래의
- 2016-10-14 15:03:532070검색
동영상 태그를 사용하면 동영상이 항상 부모의 전체 화면을 차지할 수 없습니다. 원래 예산으로 10분짜리 프로젝트가 동영상에 갇히게 되어서 계속 적어볼 예정입니다. 상호 격려를 위해. . .
코드(css 콘텐츠):
<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>코드(본문 콘텐츠)
<body> <p>视频</p> <div class="videoTime"> <video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video> </div> </body> </html>
동영상 태그를 평소대로 설정했습니다. height: 100% width: 100%;
결과는 다음과 같습니다.
왼쪽 그림: (Google Chrome) 높이는 100%에 도달했지만 너비는 100%에 도달하지 못했습니다. 오른쪽 그림: (Firefox) 높이 100%에 도달할 수 없고 너비가 100%에 도달합니다.
왼쪽 그림: (Safari) 높이가 100%에 도달했습니다. 너비는 100%에 도달할 수 없습니다. 오른쪽 그림: (Opera) 높이는 100%에 도달할 수 없습니다.
그런 다음 Xiaoguo는 다음을 사용합니다.
1. js를 사용하여 너비와 높이가 비디오에 할당됩니다. 결과: 실패. 2. :-webkit-full-screen{} 메서드를 사용하면 작동하지 않습니다. 3. 호환을 사용하세요.... . . 누워서 Xiaoguo는 간단하고 쉬운 방법을 발견했습니다. css 코드: (부모 높이가 0; 패딩 바닥 설정;)<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 45%; //需要计算得到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>결과 왼쪽 이미지: (Google Chrome) 오른쪽 이미지: (Firefox)
의 값
공식: padBotRes = (videoH / videoW) * videoTiW성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.