집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

高洛峰원래의: 2016-10-14 15:03:532130검색

동영상 태그를 사용하면 동영상이 항상 부모의 전체 화면을 차지할 수 없습니다. 원래 예산으로 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%에 도달합니다.

HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

왼쪽 그림: (Safari) 높이가 100%에 도달했습니다. 너비는 100%에 도달할 수 없습니다. 오른쪽 그림: (Opera) 높이는 100%에 도달할 수 없습니다.

HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

그런 다음 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)

HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

왼쪽 이미지: (Safari) 오른쪽 이미지: (Opera)

HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

완벽한 솔루션~

그렇다면 패딩바텀의 가치는 어떻게 구하는가?

videoH: 비디오 높이

videoW: 비디오 너비

videoTiW: 상위 너비, 백분율 사용

padBotRes: padding-bottom

의 값

공식:

padBotRes = (videoH / videoW) * videoTiW

성명：

이전 기사：캔버스 - 타이머를 사용하여 동적 로딩 애니메이션을 시뮬레이션하세요!다음 기사：캔버스 - 타이머를 사용하여 동적 로딩 애니메이션을 시뮬레이션하세요!

HTML5 기반으로 상위 블록에 동영상을 추가하면 전체 화면으로 재생되지 않는 문제가 해결되었습니다.

관련 기사