Notice
Recent Posts
Recent Comments
Tags
- 하드 윈도우 복사
- XSS방어
- 하드 마이그레이션
- 맥 오라클설치
- ViewBag
- TempData
- javascript 바코드스캔
- XSS PHP
- 타임피커
- javascript 바코드 생성
- SSD 복사
- django 엑셀불러오기
- 바코드 생성하기
- 파일업로드 유효성체크
- asp.net core Select
- asp.net dropdownlist
- asp.net Select
- php 캐쉬제거
- 파일업로드 체크
- Mac Oracle
- 바코드 스캔하기
- javascript redirection
- 강제이동
- ASP.Net Core 404
- javascript 유효성체크
- jquery 바코드생성
- 말줄임표시
- ViewData
- jquery 바코드
- 404에러페이지
웹개발자의 기지개
[javascript] 동영상 재생 관련 사용법 - HTML5 Video 태그 본문
javascript
[javascript] 동영상 재생 관련 사용법 - HTML5 Video 태그
http://portfolio.wonpaper.net 2022. 11. 30. 19:04HTML5 의 기본태그인 video 태그로 동영상 재생 관련 사용법을 정리해 보았다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<title>동영상재생</title>
<style>
body {margin: 0px; padding: 0px;}
</style>
</head>
<body>
<video id="video1" controls autoplay width="100%" height="100%" loop poster="" controlsList="nodownload">
<source src="test.mp4" type="video/mp4" />
현재의 브라우저는 지원하지 않습니다.
</video>
</body>
</html>
|
cs |
위에서 video 태그 내용이 재생관련 소스입니다.
그러면 이제 javascript 형태로 video 태그의 재생관련 사용법을 알아보자.
재생하기
document.getElementById('video1').play();
멈추기
document.getElementById('video1').pause();
현재 재생시간
document.getElementById('video1').currentTime
동영상 총재생시간
document.getElementById('video1').duration
alert(document.getElementById('video1').currentTime + " / " + document.getElementById('video1').duration);
시청환기 기능 (10분마다 알림확인창 띄우기)
1
2
3
4
5
6
7
|
setInterval(function() {
document.getElementById('video1').pause();
if (confirm("화면 영상을 잘 시청중이신가요 ? [10분마다 시청유도 확인]\n\n계속 시청을 원하시면 '확인'버튼을 눌러주세요."))
{
document.getElementById('video1').play();
}
}, 600000); // 10분마다 실행
|
cs |
video 태그 다운로드 기능 막기
만약 하단부에 재생시간 , 재생 타임 슬라이드 등의 콘트롤 메뉴를 모두 안보이게 하려면,
video 태그내 control 속성을 삭제한다.
재상 타임 슬라이드 메뉴만 안보이게
video::-webkit-media-controls-timeline {display:none;}
참고 : https://mik-a.com/8
'javascript' 카테고리의 다른 글
[Javascript] jquery 서명하고 이미지 저장하기 (0) | 2023.04.22 |
---|---|
[javascript] a태그 클릭시 위로 이동되는 현상 방지 (0) | 2023.01.16 |
[javascript] window.onbeforeunload 창닫기 이벤트 (1) | 2022.11.30 |
[javascript] 10분마다 영상 시청 멈추는 기능 [영상 시청 환기] 만들기 (0) | 2022.11.24 |
[Javascript] Ajax 처리하기 (jquery 이용안하고) 예제포함 (0) | 2022.11.04 |
Comments