728x90

영상이 종료 되는 시점을 체크 하는 스크립트 

 

if ($("#video").prop("ended") && !alertTriggered) 

 

video 태그에 아이디 값을 주고 ended 로 값이 매칭 될때 다른 영상을 플레이 할 수 있다. jquery 를 사용한 문법이라 jqeury 를 기본적으로 가지고 있어야 가능한 문법이다.

 

<div class="wrap">
	<div class="video-wrap">
		<video id="video" autoplay controls muted playsinline class="normal-video">
			<source id="normalloop1" src="영상주소" type='video/mp4'/>
		</video>
	</div>
	<div class="video-wrap">
		<video id="video2" controls muted playsinline class="normal-video">
			<source id="normalloop2" src="영상주소" type='video/mp4'/>
		</video>
	</div>
</div>

<style>
.wrap {position:absolute;top:0;left:0;width:100%;height:100%;}
.video-wrap {position:relative;height:50%;background:#000;overflow:hidden;}
.video-wrap video {position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;}
       
@media all and (max-width:1199px){
	.video-wrap video {width:100%;height:auto;top:50%;left:0;transform:translate(0,-50%);}	
}
</style>
<script src="/application/assets/common/js/jquery-1.12.4.min.js"></script>
<script>
$(window).on("load",function(){
	
    //윈도우 로드 시 비디오 플레이
    $("#video").get(0).play();
	
    //작동하는지 콘솔창에서 확인
    console.log("test");
})
    
var alertTriggered = false; // Flag variable to track whether the alert has been triggered

setInterval(function () {
    if ($("#video").prop("ended") && !alertTriggered) {

        //영상종료 후 어떤행동을 할건지 작성
        alert('영상종료');

        alertTriggered = true; // Set the flag to true to indicate that the alert has been triggered
    }
}, 200);
</script>
728x90
저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

canvas로 낙서장 만들기 스크립트 지우개 기능 추가 반응형 적용  (0) 2024.06.12
div 영역만 이미지로 저장 스크립트 html2cnvas  (0) 2024.03.12
javscript 페이지 새로고침 param 까지 같이 이동  (0) 2023.11.14
jquery 달력 스크립트 커스텀마이징 원하는 요일만 나오게  (0) 2023.09.21
파일확장자 체크 MINE 타입  (0) 2023.05.08
728x90

selectableDays 배열 값으로 원하는 요일만 선택이 가능하게 설정 하는 스크립트 예제 

 

요일은 일요일이 0 부터 시작 되게 해서 작성 하면 됩니다. 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<input type="text" id="datepicker">

<script>
$(document).ready(function() {
  var selectableDays = [1, 2, 3]; // 월요일, 화요일, 수요일
  
  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var day = date.getDay();
      
      if ($.inArray(day, selectableDays) >= 0) {
        return [true];
      }
      
      return [false];
    }
  });
});
</script>

</body>
</html>

beforeShowDay 함수에서 date 에 true, false 로 속성을 주어서 수정할 수 있는 부분으로 유용하게 사용 할수 있습니다. 

jquery 사용이 많이 줄어들고 있는 추세 지만 달력 스크립트는 간단하게 붙이고 수정이 용이해서 아직 까지는 장점도 있는거 같습니다. 

728x90
저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

div 영역만 이미지로 저장 스크립트 html2cnvas  (0) 2024.03.12
동영상 재생 완료 후 스크립트 실행 예제  (0) 2023.12.11
javscript 페이지 새로고침 param 까지 같이 이동  (0) 2023.11.14
파일확장자 체크 MINE 타입  (0) 2023.05.08
HTML에서 테이블에 행을 추가하고 삭제하는 간단한 JavaScript 코드  (0) 2023.03.23
728x90

<!-- HTML 테이블 -->
<table id="myTable">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>이메일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>25</td>
      <td>hong@example.com</td>
    </tr>
    <tr>
      <td>김철수</td>
      <td>30</td>
      <td>kim@example.com</td>
    </tr>
  </tbody>
</table>

<!-- JavaScript 코드 -->
<script>
  // 테이블에서 행 추가
  function addRow() {
    var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    var cells = [];
    for (var i = 0; i < 3; i++) {
      cells.push(newRow.insertCell(i));
      cells[i].innerHTML = "새 데이터";
    }
  }

  // 테이블에서 행 삭제
  function deleteRow() {
    var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
    var lastRow = table.rows.length - 1;
    table.deleteRow(lastRow);
  }
</script>

<!-- 추가/삭제 버튼 -->
<button onclick="addRow()">행 추가</button>
<button onclick="deleteRow()">행 삭제</button>

728x90
저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

div 영역만 이미지로 저장 스크립트 html2cnvas  (0) 2024.03.12
동영상 재생 완료 후 스크립트 실행 예제  (0) 2023.12.11
javscript 페이지 새로고침 param 까지 같이 이동  (0) 2023.11.14
jquery 달력 스크립트 커스텀마이징 원하는 요일만 나오게  (0) 2023.09.21
파일확장자 체크 MINE 타입  (0) 2023.05.08

+ Recent posts

티스토리툴바