VideoJS 로 웹페이지에서 동영상 플레이어 사용하기

프로그래밍/HTML & JavaScript|2024. 11. 1. 18:47
반응형

소스코드는 굉장히 단순합니다.

아래 옵션중 vjs-big-play-centered 는 플레이 버튼을 중앙에 두며, 미설정시 좌측 상단에 버튼이 위치합니다.

스마트폰에서 재생 버튼이 느리게 동작되어 영상을 다운로드 후 재생하는 듯 보인다면 웹서버에 H.264 모듈을 설치하여 스트리밍이 가능합니다.

 

<head>
        <meta charset="UTF-8">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet" />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>

</head>


<body>

<video id="my-video" 

class="video-js vjs-big-play-centered" 

controls 

preload="auto" 

width="320" 

height="180" 

data-setup='{
"autoplay": true
}'>
        <source src="The.mkv" type='video/mp4'>
</video>

 

</body>

 

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

script 를 이용한 안내 창 (Alert) 커스텀하여 출력하기  (0) 2024.05.28
td 에서 두가지 배경색 사용하기  (0) 2021.07.21
[JavaScript] checkbox 선택시 바로 이벤트 발생  (0) 2021.07.15
JavaScript 에서 refresh 없이 PHP 파일 실행하기  (0) 2021.07.01
[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30

댓글()

script 를 이용한 안내 창 (Alert) 커스텀하여 출력하기

프로그래밍/HTML & JavaScript|2024. 5. 28. 08:19
반응형

아래 소스를 적당히 수정하여 사용합니다.

 

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert</title>
    <style>
        /* Custom alert box styling */
        .alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* High z-index to ensure it is on top */
        }
        .alert-box {
            background: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            width: 400px;
            height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .alert-box h1 {
            margin-top: 0;
        }
        .alert-box p {
            margin: 20px 0;
            font-size: 13px;
            color: #111111;
        }
        .alert-box button {
            width: 100px; /* Set fixed width */
            margin: 0px auto 0px; /* Center horizontally */
            padding: 10px;
            border: none;
            background: #007BFF;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        .alert-box button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div id="alertOverlay" class="alert-overlay" style="display: none;">
        <div class="alert-box">
            <h1>데모 페이지 로그인 정보</h1>
            <p>계정 : <font size="3" color="blue">sysdocu</font><br>
비밀번호 : <font size="3" color="blue">12345678</font><br><br>
* 다른 사용자와의 중복 테스트로 오작동이 일어날 수 있습니다.<br>
* 테스트를 마친 후 데이터를 삭제해 주시기 바랍니다.</p>
            <button onclick="closeAlert()">확인</button>
        </div>
    </div>
    <script>
        function showAlert() {
            document.getElementById('alertOverlay').style.display = 'flex';
        }

        function closeAlert() {
            document.getElementById('alertOverlay').style.display = 'none';
        }

        // Show the alert when the page loads
        window.onload = showAlert;
    </script>
</body>
</html>

 

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

VideoJS 로 웹페이지에서 동영상 플레이어 사용하기  (0) 2024.11.01
td 에서 두가지 배경색 사용하기  (0) 2021.07.21
[JavaScript] checkbox 선택시 바로 이벤트 발생  (0) 2021.07.15
JavaScript 에서 refresh 없이 PHP 파일 실행하기  (0) 2021.07.01
[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30

댓글()

td 에서 두가지 배경색 사용하기

프로그래밍/HTML & JavaScript|2021. 7. 21. 14:23
반응형

테이블 td 에서 배경을 두가지 색상으로 채우고 싶을때 아래와 같이 사용하면 됩니다.

 

<td style="background:linear-gradient(to right, #e6def7 0%, #e6def7 20%, #ffffff 20%, #ffffff 100%)">
    두가지 배경색 입니다. 왼쪽부터 20% 부분만 #e6def7 색상을 사용하고 나머지는 흰색입니다.
</td>

 

부드럽게 색상이 바뀌는 그라데이션 방법은 별도 포스팅을 참고하세요.

https://sysdocu.tistory.com/1522

 

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

VideoJS 로 웹페이지에서 동영상 플레이어 사용하기  (0) 2024.11.01
script 를 이용한 안내 창 (Alert) 커스텀하여 출력하기  (0) 2024.05.28
[JavaScript] checkbox 선택시 바로 이벤트 발생  (0) 2021.07.15
JavaScript 에서 refresh 없이 PHP 파일 실행하기  (0) 2021.07.01
[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30

댓글()

[JavaScript] checkbox 선택시 바로 이벤트 발생

프로그래밍/HTML & JavaScript|2021. 7. 15. 09:12
반응형
<html>
<head>
<title>checkbox</title>
<meta charset="utf-8">
<script>
function check(box){
    if(box.checked == true)
        window.status = box.value + " 드라이브를 체크했습니다." //브라우저의 상태표시줄에 표시
    else
        window.status = box.value + " 드라이브의 체크를 해제했습니다."
}
</script>
</head>
<body>
<h2>드라이브 선택</h2>
<form>
    <input type=checkbox value="C" onClick="check(this)">C 드라이브<br>
    <input type=checkbox value="D" onClick="check(this)">D 드라이브<br>
    <input type=checkbox value="E" onClick="check(this)">E 드라이브<br>
    <input type=checkbox value="F" onClick="check(this)">F 드라이브<br>
</form>
</body>
</html>

 

[출처] https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=smilebanner88&logNo=220774452959

 

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

script 를 이용한 안내 창 (Alert) 커스텀하여 출력하기  (0) 2024.05.28
td 에서 두가지 배경색 사용하기  (0) 2021.07.21
JavaScript 에서 refresh 없이 PHP 파일 실행하기  (0) 2021.07.01
[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30
마우스 오버 이미지 미리보기 (썸네일 확인)  (0) 2020.07.22

댓글()

JavaScript 에서 refresh 없이 PHP 파일 실행하기

프로그래밍/HTML & JavaScript|2021. 7. 1. 09:10
반응형

먼저 아래를 선언한 뒤에

<script id="dynamic"></script>
<script> 
function add() {
        dynamic.src = "modify.html?action=add";
}
</script>

 

이렇게 호출하면 됩니다.

<a href="JavaScript:add()">[추가]</a>

 

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

td 에서 두가지 배경색 사용하기  (0) 2021.07.21
[JavaScript] checkbox 선택시 바로 이벤트 발생  (0) 2021.07.15
[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30
마우스 오버 이미지 미리보기 (썸네일 확인)  (0) 2020.07.22
jQuery 한글/영어 byte 체크해서 자르기  (0) 2020.07.15

댓글()

[html] 깜빡이는 글자, 이미지 예제

프로그래밍/HTML & JavaScript|2021. 6. 30. 15:18
반응형
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Animation</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="flicker" style=" width:200px; height:200px; background-color: #ff0000;"></div>
 
    <script type="text/javascript">
 
        /**
         * 깜빡이는 예제
         * flicker라는 Id를 가진 엘리먼트에 7개의 애니메이션 함수를 적용하였습니다.
         * 7개의 visual effect는 실행 대기열에 쌓여서 앞의 애니메이션 함수가 끝난후에 바로 동작을 합니다.
         */
        $("#flicker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();
 
    </script>
</body>
</html>

[출처] https://kssong.tistory.com/36

 

 

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[JavaScript] checkbox 선택시 바로 이벤트 발생  (0) 2021.07.15
JavaScript 에서 refresh 없이 PHP 파일 실행하기  (0) 2021.07.01
마우스 오버 이미지 미리보기 (썸네일 확인)  (0) 2020.07.22
jQuery 한글/영어 byte 체크해서 자르기  (0) 2020.07.15
페이지 로딩 완료 후 alert 출력하기  (0) 2020.07.04

댓글()

마우스 오버 이미지 미리보기 (썸네일 확인)

프로그래밍/HTML & JavaScript|2020. 7. 22. 16:42
반응형

동적으로 이미지 리스트를 생성 할때 on을 사용하여 이미지 확대 하는 소스 입니다.

body 에 p 태그를 선언하고 해당 테그 안에 이미지를 넣어 보여주는 소스 입니다.


<html>

    <head>

        <title>Test</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                 

                var xOffset = 10;

                var yOffset = 30;


                $(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시

$("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='400px' /></p>"); //보여줄 이미지를 선언  

$("#preview")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px")

.fadeIn("fast"); //미리보기 화면 설정 셋팅

});

$(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시

$("#preview")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px");

});

$(document).on("mouseout",".thumbnail",function(){ //마우스 아웃시

$("#preview").remove();

});

                 

            });

        </script>

            

<style>

/* 미리보기 스타일 셋팅 */

#preview{

z-index: 9999;

position:absolute;

border:0px solid #ccc;

background:#333;

padding:1px;

display:none;

color:#fff;

}

</style>

    </head>

     

    <body>

        <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />

    </body>

</html>


[미리보기]

참고: http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/



[출처] https://huskdoll.tistory.com/m/292?category=559073

반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

JavaScript 에서 refresh 없이 PHP 파일 실행하기  (0) 2021.07.01
[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30
jQuery 한글/영어 byte 체크해서 자르기  (0) 2020.07.15
페이지 로딩 완료 후 alert 출력하기  (0) 2020.07.04
input 찾아보기 스타일 변경 (두가지 스타일 예제)  (0) 2020.07.03

댓글()

jQuery 한글/영어 byte 체크해서 자르기

프로그래밍/HTML & JavaScript|2020. 7. 15. 08:49
반응형

[출처] https://dev.uhoon.co.kr/entry/jQuery-한글영어-byte-체크해서-자르기 [Dev 저장소]

[원문] http://blog.naver.com/yesdouble/130152964039



test.html


<!DOCTYPE html>

<html>
<head>
    <title>한글/영어 byte 체크해서 자르기</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body >
<script type="text/javascript">
    $(function () {
        $('.remaining').each(function () {
            // count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
            var $maxcount = $('.maxcount', this);
            var $count = $('.count', this);
            var $input = $("#contents");
 
            // .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
            var maximumByte = $maxcount.text() * 1;
            // update 함수는 keyup, paste, input 이벤트에서 호출한다.
            var update = function () {
                var before = $count.text() * 1;
                var str_len = $input.val().length;
                var cbyte = 0;
                var li_len = 0;
                for (i = 0; i < str_len; i++) {
                    var ls_one_char = $input.val().charAt(i);
                    if (escape(ls_one_char).length > 4) {
                        cbyte += 2; //한글이면 2를 더한다
                    } else {
                        cbyte++; //한글아니면 1을 다한다
                    }
                    if (cbyte <= maximumByte) {
                        li_len = i + 1;
                    }
                }
                // 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
                if (parseInt(cbyte) > parseInt(maximumByte)) {
                    alert('허용된 글자수가 초과되었습니다.\r\n\n초과된 부분은 자동으로 삭제됩니다.');
                    var str = $input.val();
                    var str2 = $input.val().substr(0, li_len);
                    $input.val(str2);
                    var cbyte = 0;
                    for (i = 0; i < $input.val().length; i++) {
                        var ls_one_char = $input.val().charAt(i);
                        if (escape(ls_one_char).length > 4) {
                            cbyte += 2; //한글이면 2를 더한다
                        } else {
                            cbyte++; //한글아니면 1을 다한다
                        }
                    }
                }
                $count.text(cbyte);
            };
            // input, keyup, paste 이벤트와 update 함수를 바인드한다
            $input.bind('input keyup keydown paste change', function () {
                setTimeout(update, 0)
            });
            update();
        });
    });
</script>
<div>
<textarea rows="5" cols="50" id="contents"/></textarea>
</div>
<span class="remaining">
    <span class="count">0</span>/<span class="maxcount">80</span>byte(한글 40자, 영어 80자)
</span>
</body>
</html> 



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30
마우스 오버 이미지 미리보기 (썸네일 확인)  (0) 2020.07.22
페이지 로딩 완료 후 alert 출력하기  (0) 2020.07.04
input 찾아보기 스타일 변경 (두가지 스타일 예제)  (0) 2020.07.03
iframe 높이 꽉차게 하기  (0) 2020.07.02

댓글()

페이지 로딩 완료 후 alert 출력하기

프로그래밍/HTML & JavaScript|2020. 7. 4. 08:32
반응형

아래 1번 코드를 문서의 아무 곳에나 넣어도 동작합니다.

그러나 브라우저나 PC 에 따라 소스가 잘 동작하지 않는 경우

2번 예제로 지연 출력을 시키는 방법도 있습니다.



1번


<script>

    window.onload = function() {

        alert("로딩이 완료 되었습니다.") ;

   };

</script>



2번


<script>

            window.setTimeout(function(){

                alert("로딩이 완료 되었습니다.");

            }, 200);  // 0.2 초 지연 후 출력

</script>


반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

마우스 오버 이미지 미리보기 (썸네일 확인)  (0) 2020.07.22
jQuery 한글/영어 byte 체크해서 자르기  (0) 2020.07.15
input 찾아보기 스타일 변경 (두가지 스타일 예제)  (0) 2020.07.03
iframe 높이 꽉차게 하기  (0) 2020.07.02
table tr td 에 링크걸기  (0) 2020.06.16

댓글()

input 찾아보기 스타일 변경 (두가지 스타일 예제)

프로그래밍/HTML & JavaScript|2020. 7. 3. 08:52
반응형

아래 소스코드로 파일을 만들어 실행해보면 확인할 수 있습니다.

소스는 크게 CSS, HTML, JavaScript 부분으로 나뉩니다.


[ 첫번째 스타일 ]


이것은 클릭 또는 드래그&드롭 기능을 제공합니다.


test.html


<style type="text/css">

input[type="file"] {

  position: absolute;

  left: 0;

  opacity: 0;

  top: 0;

  bottom: 0;

  width: 100%;

}


div {

  position: absolute;

  top: 0;

  bottom: 0;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #ccc;

  border: 3px dotted #bebebe;

  border-radius: 10px;

}


label {

  display: inline-block;

  position: relative;

  height: 100px;

  width: 400px;

}


div.dragover {

  background-color: #aaa;

}

</style>



<label for="test">

  <div>Click or drop something here</div>

  <input type="file" id="test">

</label>

<p id="filename"></p>



<script>

var fileInput = document.querySelector('input[type=file]');

var filenameContainer = document.querySelector('#filename');

var dropzone = document.querySelector('div');


fileInput.addEventListener('change', function() {

filenameContainer.innerText = fileInput.value.split('\\').pop();

});


fileInput.addEventListener('dragenter', function() {

dropzone.classList.add('dragover');

});


fileInput.addEventListener('dragleave', function() {

dropzone.classList.remove('dragover');

});

</script> 


[출처] https://jsfiddle.net/t7w1sovq/



[ 두번째 스타일 ]


이것은 Jquery 까지 사용합니다.


test2.html


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>


<style type="text/css">

body {

    background-color:Black;

}


div.upload {

    background-color:#fff;

    border: 1px solid #ddd;

    border-radius:5px;

    display:inline-block;

    height: 30px;

    padding:3px 40px 3px 3px;

    position:relative;

    width: auto;

}


div.upload:hover {

    opacity:0.95;

}


div.upload input[type="file"] {

    display: input-block;

    width: 100%;

    height: 30px;

    opacity: 0;

    cursor:pointer;

    position:absolute;

    left:0;

}

.uploadButton {

    background-color: #425F9C;

    border: none;

    border-radius: 3px;

    color: #FFF;

    cursor:pointer;

    display: inline-block;

    height: 30px;

    margin-right:15px;

    width: auto;

    padding:0 20px;

    box-sizing: content-box;

}


.fileName {

    font-family: Arial;

    font-size:14px;

}


.upload + .uploadButton {

    height:38px;

}

</style>



<form action="" method="post" enctype="multipart/form-data">

    <div class="upload">

        <input type="button" class="uploadButton" value="Browse" />

        <input type="file" name="upload" accept="image/*" id="fileUpload" />

        <span class="fileName">Select file..</span>

    </div>

    <input type="button" class="uploadButton" value="Upload File" />

</form>



<script>

$('input[type=file]').change(function(e) {

    $in = $(this);

    $in.next().html($in.val());

    

});


$('.uploadButton').click(function() {

    var fileName = $("#fileUpload").val();

    if (fileName) {

        alert(fileName + " can be uploaded.");

    }

    else {

        alert("Please select a file to upload");

    }

});

</script> 


[출처] http://jsfiddle.net/umhva747/



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

jQuery 한글/영어 byte 체크해서 자르기  (0) 2020.07.15
페이지 로딩 완료 후 alert 출력하기  (0) 2020.07.04
iframe 높이 꽉차게 하기  (0) 2020.07.02
table tr td 에 링크걸기  (0) 2020.06.16
html table <td> 에 그라데이션 배경 주기  (0) 2020.06.16

댓글()

iframe 높이 꽉차게 하기

프로그래밍/HTML & JavaScript|2020. 7. 2. 11:13
반응형

간혹 iframe 을 사용하면 가로는 100% 가 되지 만 높이가 100% 로 되지 않는 경우가 있습니다.

이 경우 아래와 같이 vh 단위로 변경하여 적용해주면 됩니다.

주의 할것은 가로 길이는 그대로 100% 를 유지해주세요.


<iframe src="notice.php" frameborder="0" style="display:block; width:100%; height: 100vh"></iframe>



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

페이지 로딩 완료 후 alert 출력하기  (0) 2020.07.04
input 찾아보기 스타일 변경 (두가지 스타일 예제)  (0) 2020.07.03
table tr td 에 링크걸기  (0) 2020.06.16
html table <td> 에 그라데이션 배경 주기  (0) 2020.06.16
html 테이블 내용에 따라 가로 사이즈가 늘어나지 않게하기  (0) 2020.06.08

댓글()
이전 1 2 3 4 ··· 7 다음

티스토리툴바