그누보드 QA - 비디오 태그를 쓰고 있습니다

비디오 태그를 쓰고 있습니다

닐리리맘보 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.07.03 09:06:58 조회 957 (123.♡.♡.120)

본문

나미웹님의 콘텐트 메인에서 둘레아바님이 알려주신 비디오 태그를 잘 사용하고 있습니다.



<style type="text/css">
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<div class="video-container">
  <video width="320" class="video" autoplay muted>
        <source src="movie.mp4" type="video/mp4">
  </video>
</div>


첫 번째 질문.총 3개의 영상을 올렸고 이 코드에서 다음 영상으로 넘어갈 때 혹시
소리를 멈추게하는 방법이 있을까요?
다음 영상으로 가면 소리가 계속 들려서요

 

두 번째 질문.총 3개의 영상중에서 1번과 2번까지는 자동으로 2번에서 3번으로 넘어갈 땐 수동으로 하는게 가능할까요.

#그누보드5

답변 2

웹메이킹 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-07-03 11:23:16 39.♡.♡.46

JavaScript를 사용하여 제어할 수 있습니다. 다음과 같이 하면 되지 않을까 생각됩니다.


<style type="text/css">
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<script>
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
video1.addEventListener('ended', function() {
  video2.play();
});
video2.addEventListener('ended', function() {
  video3.pause();
});
function playVideo(videoId) {
  var previousVideo = document.querySelector('.video:not(#' + videoId + ')');
  if (previousVideo) {
    previousVideo.pause();
    previousVideo.currentTime = 0;
  }
  var video = document.getElementById(videoId);
  video.play();
}
</script>
<div class="video-container">
  <video id="video1" class="video" width="320" autoplay muted>
    <source src="movie1.mp4" type="video/mp4">
  </video>
  <video id="video2" class="video" width="320" muted>
    <source src="movie2.mp4" type="video/mp4">
  </video>
  <video id="video3" class="video" width="320" muted>
    <source src="movie3.mp4" type="video/mp4">
  </video>
</div>
<button onclick="playVideo('video1')">Video 1 재생</button>
<button onclick="playVideo('video2')">Video 2 재생</button>
<button onclick="playVideo('video3')">Video 3 재생</button>

첫번째 <video> 요소에 id를 추가하고, JavaScript 코드를 사용하여 이전 영상의 재생을 중지시키면 될것 같습니다.

두번째 위처럼 하면 1번 비디오 자동재생,이 되고 1번 영상이 끝나면 2번 비디오 자동재생 되도록 하게 했으며, 3번 영상은 playVideo() 를 사용해서 수동으로 버튼클릭시 재생되도록 하면 될 것 같습니다.