Notice
Recent Posts
Recent Comments
Tags more
«   2025/04   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[javascript] 동영상 재생 관련 사용법 - HTML5 Video 태그 본문

javascript

[javascript] 동영상 재생 관련 사용법 - HTML5 Video 태그

http://portfolio.wonpaper.net 2022. 11. 30. 19:04

HTML5 의 기본태그인 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

 

 

[javascript] 10분마다 영상 시청 멈추는 기능 [영상 시청 환기] 만들기

동영상 재생을 할때 주의를 환기시키려는 목적으로 정해진 시간마다 Alert 창이 뜨면서 영상재생 여부를 묻는 소스를 만들어 보았다. HTML5 video 기본태그에 setInterval 함수를 간단히 이용하면 되겠

wonpaper.tistory.com

 

 

 

video 태그 다운로드 기능 막기

 

video 태그 다운로드 기능 막기

동영상 재생을 위한 video 태그를 이용할때 다운로드 기능이 디폴트로 켜져 있다. 이를 간단히 끄는 방법이다. 1 2 3 4 5 현재 브라우저는 video태그를 지원하지 않습니다. Colored by Color Scripter cs control

wonpaper.tistory.com

 

 

만약 하단부에 재생시간 , 재생 타임 슬라이드 등의 콘트롤 메뉴를 모두 안보이게 하려면,

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
'javascript' Related Articles more
Comments