Button을 누르면 Video를 바꿔서 틀어주는.. 걸 만들고 싶었는데 인터넷 예제들이 속 시원한게 없어서 정리 해놓고 담에 사용하려고 함.
방법 1. Vanila JS
방법 2. JQuery (해당 방법은 특수 구현엔 약간 한계가 있다고 함)
<html>
<head>
<!--ajax 연결 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<style>
#video_tag{
width:500px;
height:500px;
}
</style>
</head>
<script>
// Vanila JS Version.
function change_video1(){
let src = "test_video2.mp4";
var video = document.getElementById('video_tag');
$("#video_tag").attr("src", src)
video.load();
}
// JQuery Version
function change_video2(){
let src = "test_video1.mp4";
var video = $('#video_tag')[0]
$("#video_tag").attr("src", src)
video.load();
}
</script>
<body>
<button onclick="change_video1()">Vanila JS로 Video src 변경</button>
<button onclick="change_video2()">JQuery로 Video src 변경</button>
<div id = "video_box">
<video id="video_tag" src='test_video1.mp4' type="video/mp4" controls muted ></video>
</div>
</body>
</html>'HTML, CSS, JS' 카테고리의 다른 글
| [HTML, CSS] 별점, 평점 시스템 예시 (0) | 2022.06.12 |
|---|---|
| [HTML] 검색되는 Dropdown Input Bar (0) | 2022.06.12 |
| [CSS] 문제의 div 정렬 - Flex (1) | 2022.05.02 |
| JQuery & Ajax 정리 (0) | 2022.04.22 |
| JavaScript 정리 (0) | 2022.04.22 |