동영상을 웹에서 배경화면으로 만들기

#main.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>CSS</title>
    <script type="text/javascript" src="resources/js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
      body { padding: 0px; margin: 0px; }
      .jb-box { width: 100%; height: 100%; overflow: hidden;margin: 0px auto; position: relative; }
      video { width: 100%; }
      .jb-text { position: absolute; top: 50%; width: 100%; }
      .jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <video muted autoplay loop>
        <source src="/resources/videos/Blue.mp4" type="video/mp4">
      </video>
      <div class="jb-text">
        <strong><p>배경화면입니다용</p></strong>
        <div style="float: right; margin-right: 300px; margin-top: 100px;">
        <label style="color: white; font-weight: bold;"></label><br>
        <input type="text" ><br>
         <label style="color: white; font-weight: bold;">비밀번호</label><br>
         <input type="password"><br>
         <div style="margin-top: 25px;">
         <button type="button" class="btn btn-default">로그인</button>
         <a type="button" class="btn btn-success" href="#">입장하기</a>
         <a type="button" class="btn btn-danger" href="#">비밀번호찾기</a>
         </div>
         </div>
      </div>
    </div>
  </body>
</html>
Colored by Color Scripter

cs

스타일을 통하여 영상의 크기를 배경화면에 맞게 조정합니다.

1
2
3
4
5
6
7

<style>
      body { padding: 0px; margin: 0px; }
      .jb-box { width: 100%; height: 100%; overflow: hidden;margin: 0px auto; position: relative; }
      video { width: 100%; }
      .jb-text { position: absolute; top: 50%; width: 100%; }
      .jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }
</style>
Colored by Color Scripter

cs

비디오태그를 통하여 이클립스내의 resources/videos의 폴더에서 해당 영상을 가져옵니다.
muted autoplay loop를 통하여 무음, 반복, 자동플레이를 실행하여 중간에 끝나서 꺼지는 일이 없도록합니다.

1
2
3

<video muted autoplay loop>
        <source src="/resources/videos/Blue.mp4" type="video/mp4">
</video>
Colored by Color Scripter

cs

# 결 과

출처: https://www.codingfactory.net/11880

저작자표시 비영리

'Coding story > go HTML,CSS,JS' 카테고리의 다른 글

자바 스크립트를 통한 로딩창 띄우기 (0)	2022.03.10
이클립스에서의 자바스크립트 자동완성기능 추가하기 (tern플러그인) (0)	2022.03.08
자바스크립트 보충수업#2 (Json,복사와 참조) (0)	2022.01.24
자바스크립트 보충수업 #1 (자바스크립트정의, 암묵적형변환) (0)	2022.01.24
input태그 (0)	2022.01.15