draggable works resizable not

Прежде всего, я новичок в программировании. Я прочитал почти все похожие темы, но я не могу понять, что не так в моем случае. Я запускаю следующий код, используя localhost server (XAMPP), и перетаскиваемый параметр работает отлично, но не изменяется.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

Я бы посоветовал обертывание video элемент в div и применяя Draggable и Resizable к этому.

Я нашел подобный вопрос: 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; 
}

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."); 
} 

$(document).ready(function() { 
    $(".vid-wrap").resizable({ 
    aspectRatio: 4/3, 
    minWidth: 240, 
    maxWidth: 640, 
    alsoResize: ".student" 
    }).draggable({ 
    handle: ".handle" 
    }); 
});

С этим, мы можем изменить размер обертку, и он будет изменять размер видео внутри него. Другой способ сделать это - установить для CSS CSS значение 100% для ширины & height. Когда обертка изменяет размер, стилизация вынуждает внутренний ящик быть на 100% от размера этих ящиков.

Для перетаскивания мы устанавливаем конкретный дескриптор, чтобы избежать нажатия или перетаскивания событий, которые могут произойти с элементом video. Это похоже на отсутствие захвата изображения в стиле управления, но я стараюсь смотреть вперёд.

источник

2016-09-15 16:35:46 Twisty

Отличный ответ Twisty. Оно работает. благодаря – enippeas

draggable works resizable not

ответ

Смежные вопросы