과제 중에 어려움이 있어서 조언을 구하려고 합니다.
정지되어 있고 컨트롤바가 있는 동영상을 드래그하여 빨간 사각형 내부영역에 드롭하면
동영상이 자동재생되며 컨트롤바가 사라져야 하는데요,
document.getElementById("video1").autoplay = "autoplay"; 이런식으로 요소 속성 변경하기도 해보고
자식노드 삭제 추가 이런 것도 해봤는데
아무리 해봐도 방법을 모르겠습니다ㅠㅠ
조언 또는 도움 부탁드려요ㅠㅠ
<!DOCTYPE HTML>
< html>
< head>
<style>
#video {
width: 500px;
height: 250px;
border: 1px solid red;
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function handleDragStart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.id);
}
function handleDrop(e) {
e.preventDefault();
var src = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(src));
var parent = document.getElementById("video");
var child = document.getElementById("p");
parent.removeChild(child);
}
</script>
< /head>
<body>
<div id="video" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
<p id="p">동영상을 드랙&드랍해봅니다</p>
</div>
<br>
<video id="video1" src="video1.mp4" draggable="true" ondragstart="handleDragStart(event)" width="500" height="250" controls="controls">
<video id="video2" src="video2.mp4" draggable="true" ondragstart="handleDragStart(event)" width="500" height="250" controls="controls">
< /body>
< /html>
