클릭 시 Video 주소 바꾸기
2021. 12. 23. 15:13ㆍStudy/JavaScript
클릭 시 Video 주소 바꾸기
a 태그의 링크값을 이용해 Javascript로 Video 주소 바꿔주기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>changeVideo</title>
<style>
*{margin: 0; padding: 0}
ul,ol{list-style: none}
a{color:#333; text-decoration: none}
.videoBox{width:1000px; border: 1px solid red; overflow: hidden}
.videoBox .video{float:left; width:800px;}
.videoBox ul{margin:50px 0 0 850px}
</style>
<script src="js/movie.js"></script>
</head>
<body>
<div class="videoBox">
<div class="video">
<video id="changeVideo" src="movie/video01.mp4" width="100%" poster="movie/po.jpg" controls></video>
</div>
<ul>
<li><a href="movie/video01.mp4" title="잡스아저씨1" onclick="changeVideo(this);return false">비디오1</a></li>
<li><a href="movie/video02.mp4" title="잡스아저씨2" onclick="changeVideo(this);return false">비디오2</a></li>
<li><a href="movie/video03.mp4" title="잡스아저씨3" onclick="changeVideo(this);return false">비디오3</a></li>
</ul>
</div>
</body>
</html>
JS
var video; //전역변수 선언
function changeVideo(linkBtn){ //linkBtn=>클릭한 a태그
video = document.getElementById('changeVideo');
//video태그
video.src = linkBtn.href; // 'movie/video01.mp4'
video.load(); //연결된 비디오를 로딩한다.
video.type = 'video/mp4'; //해당 코덱을 지정한다
video.play(); //비디오를 재생한다.
return false;
}
// <a href="movie/video01.mp4" title="잡스아저씨1">
'Study > JavaScript' 카테고리의 다른 글
| 마우스 휠 중복 과다 제어 막기 (0) | 2022.03.24 |
|---|---|
| 해상도별 이미지 교체 window resize (0) | 2022.01.11 |
| 링크 시 매개변수(parameter)파라미터 값 넘기기 (0) | 2021.12.21 |
| Mobile 홈 화면 전체 화면 모드 (0) | 2021.12.21 |
| 스마트폰 접속시 모바일페이지로 접속 (0) | 2021.12.21 |
