draggable works resizable not

우선, 나는 프로그래밍에 초보자입니다. 나는 거의 모든 비슷한 주제를 읽었지만 내 경우에는 무엇이 잘못되었는지를 알 수 없다. localhost 서버 (XAMPP)를 사용하여 다음 코드를 실행하고 draggable 옵션은 잘 작동하지만 크기를 조정할 수 없습니다.draggable works resizable not

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Learning WebRTC - Chapter 2: Get User Media</title> 

    <link rel="stylesheet" href="jquery-ui-1.12.0.custom/jquery-ui.min.css"> 
    <script src="jquery-ui-1.12.0.custom/external/jquery/jquery.js"></script> 
    <script src="jquery-ui-1.12.0.custom/jquery-ui.min.js"></script>  

    <style type="text/css"> 
     .student {      
      width: 180px; 
      height: 180px; 
     } 
    </style> 
</head> 
<body> 

<video class="student" autoplay></video> 

<script src="main.js"></script> 

<script> 
    $(document).ready(function() { 
     $(".student").resizable().draggable(); 
    }); 
</script> 

</body> 
</html>

main.js

function hasUserMedia() { 
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia 
    || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 
if (hasUserMedia()) { 
    navigator.getUserMedia = navigator.getUserMedia || 
     navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
     navigator.msGetUserMedia; 
    navigator.getUserMedia({ video: true, audio: true }, function 
     (stream) { 
     var video = document.querySelector('video'); 
     video.src = window.URL.createObjectURL(stream); 
    }, function (err) {}); 
} else { 
    alert("Sorry, your browser does not support getUserMedia."); 
}

출처

2016-09-15 enippeas

여기에서 테스트하고 Draggable이 작동하고있는 것으로 보입니다. https://jsfiddle.net/Twisty/f0resov1/ – Twisty

나는 div에 video 요소를 포장하고 이것에 드래그 및 크기 조정을 적용 권합니다. Making HTML5 video draggable without losing the controls 여기

내가 조언 할 것입니다 :

나는이 비슷한 질문을 발견 https://jsfiddle.net/Twisty/f0resov1/

HTML

<div class="vid-wrap"> 
    <div class="handle"> 
    <span class="ui-icon ui-icon-grip-dotted-horizontal"></span> 
    </div> 
    <video class="student" autoplay></video> 
</div>

CSS

.vid-wrap { 
    width: 240px; 
    height: 200px; 
} 

.handle { 
    height: 20px; 
    width: 100%; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    border: 1px solid #ccc; 
    border-radius: 6px 6px 0 0; 
} 

.student { 
    width: 240px; 
    height: 180px; 
    margin: 0; 
    padding: 0; 
}

JS이와

, 우리는 래퍼의 크기를 조정할 수 있고, 그 안에 비디오의 크기를 조정합니다. 이렇게하는 또 다른 방법은 폭이 & 인 경우 비디오 CSS를 100 %로 설정하는 것입니다. 래퍼의 크기가 변하면 스타일링은 내부 상자를 해당 상자 크기의 100 %로 만듭니다.

draggable의 경우 video 요소에서 발생할 수있는 이벤트를 클릭하거나 끌지 않도록 특정 핸들을 설정합니다. 이 컨트롤 스타일 이미지 캡처처럼 보이지만 앞으로보십시오.

출처

2016-09-15 16:35:46 Twisty

우수 답변 Twisty. 그것은 작동합니다. 감사 – enippeas

draggable works resizable not

답변

관련 문제